1.资源

http://www.jq22.com/jquery-info476

http://www.jq22.com/yanshi476

Nuget

Install-Package toastr

官网 http://codeseven.github.io/toastr/

2.简单使用步骤

Link to toastr.css

<link href="toastr.css" rel="stylesheet"/>

Link to toastr.js

<script src="toastr.js"></script>

use toastr to display a toast for info, success, warning or error

// Display an info toast with no title

toastr.info('Are you the 6 fingered man?')

3.BundleConfig

bundles.Add(new ScriptBundle("~/bundles/jquery")

                .Include("~/Scripts/jquery-{version}.js", "~/Scripts/toastr.min.js")

                );

bundles.Add(new StyleBundle("~/Content/css")

                .Include("~/Content/bootstrap.css", "~/Content/site.css")

                .Include("~/Content/toastr.min.css"));

4.abp集成

var abp = abp || {};

(function () {

    if (!toastr) {

        return;

    }

    /* DEFAULTS *************************************************/

    toastr.options.positionClass = 'toast-bottom-right';

    /* NOTIFICATION *********************************************/

    var showNotification = function (type, message, title, options) {

        toastr[type](message, title, options);

    };

    abp.notify.success = function (message, title, options) {

        showNotification('success', message, title, options);

    };

    abp.notify.info = function (message, title, options) {

        showNotification('info', message, title, options);

    };

    abp.notify.warn = function (message, title, options) {

        showNotification('warning', message, title, options);

    };

    abp.notify.error = function (message, title, options) {

        showNotification('error', message, title, options);

    };

})();