ABP的确认框

使用以前，是须要添加对abp.sweet-alert.js的引用，不然就没法正常使用。

确认框

abp.message.info('some info message', 'some optional title'); abp.message.success('some success message', 'some optional title'); abp.message.warn('some warning message', 'some optional title'); abp.message.error('some error message', 'some optional title');

从上到下分别为：普通消息，成功信息，警告信息，错误信息，以下：

 

---

确认对话框

abp.message.confirm(
    'User admin will be deleted.', 'Are you sure?', function (isConfirmed) { if (isConfirmed) { //...delete user } } );

此对话框会弹出一个确认对话框，提示是否继续，如图：

 

其中，第二个参数是可选参数。

 

Notification

展现自动关闭的通知。

咱们喜欢一些事情发生时展现一些精致的自动消失的通知，好比当保存一条记录或者问题发生时。ABP为这个定义了标准的APIs。

abp.notify.success('a message text', 'optional title'); abp.notify.info('a message text', 'optional title'); abp.notify.warn('a message text', 'optional title'); abp.notify.error('a message text', 'optional title');

通知API默认是使用toastr库实现的。要使toastr生效，你应该引用toastr的css和javascript文件，而后再在页面中包含abp.toastr.js做为适配器。一个toastr成功通知以下所示：

你也能够用你最喜欢的通知库中实现通知。只须要在自定义javascript文件中重写全部的函数，而后把它添加到页面中而不是abp.toastr.js（你能够检查该文件看它是否实现，这个至关简单）中。

 

UI block和Busy API

使用一个区域（一个div，form，整个页面等）阻塞用户的输入。此外，还使得一个区域处于繁忙状态（具备一个繁忙的指示器，如‘loading...’）。

UI Block API

该API使用一个透明的涂层（transparent overlay）来阻塞整个页面或者该页面上的一个元素。这样，用户的点击就无效了。当保存一个表单或者加载一个区域（一个div或者整个页面）时这是颇有用的，好比：

abp.ui.block(); //阻塞整个页面 abp.ui.block($('#MyDivElement')); //可使用jQuery 选择器.. abp.ui.block('#MyDivElement'); //..或者直接使用选择器 abp.ui.unblock(); //解除阻塞整个页面 abp.ui.unblock('#MyDivElement'); //解除阻塞特定的元素 

UI Block API默认使用jQuery的blockUI插件实现的。要是它生效，你应该包含它的javascript文件，而后在页面中包含abp.blockUI.js做为适配器。

UI Busy API

该API用于使得某些页面或者元素处于繁忙状态。好比，你可能想阻塞一个表单，而后当提交表单至服务器时展现一个繁忙的指示器。例子：

abp.ui.setBusy('#MyLoginForm'); abp.ui.clearBusy('#MyLoginForm');

样例截图：

该参数应该是一个选择器（如‘#MyLoginForm’）或者jQuery选择器（如$('#MyLoginForm')）。要使得整个页面处于繁忙状态，你能够传入null（或者'body'）做为选择器。

setBusy函数第二个参数接收一个promise（约定），当该约定完成时会自动清除繁忙的状态。例子：

abp.ui.setBusy( $('#MyLoginForm'), abp.ajax({ ... }) ); 

由于abp.ajax返回promise，咱们能够直接将它做为promise传入。要学习惯于promise更多的东西，查看jQuery的Deferred。

UI Busy API是使用spin.js实现的。要让它生效，应该包含它的javascript文件，而后在页面中包含abp.spin.js做为适配器。

事件总线

用于注册和触发客户端的全局事件。

介绍

Pub/sub事件模型普遍用于客户端，ABP包含了一个简单的全局事件总线来 注册并 触发事件。

注册事件

可使用abp.event.on来注册一个全局事件。一个注册的例子：

abp.event.on('itemAddedToBasket', function (item) { console.log(item.name + ' is added to basket!'); });

第一个参数是事件的惟一名称。第二个是回调函数，当特定事件被触发时，会被调用。

可使用abp.event.off方法来从一个事件中取消注册。注意：要取消注册，要提供相同的函数。所以，对于上面的例子，你应该将回调函数设置为一个变量，而后在on和off方法中使用它。

触发事件

abp.event.trigger用于触发一个全局事件。触发一个已经注册的事件的代码以下：

abp.event.trigger('itemAddedToBasket', { id: 42, name: 'Acme Light MousePad' });

第一个参数是该事件的惟一名称。第二个是（可选的）事件参数。你能够添加任何数量的参数，而且在回调方法中得到它们。

Logging

在客户端记录日志。

Javascript Logging API

当你想要在客户端记录一些简单的日志时，你可使用console.log('...')API，这你已经知道了。可是这种写法不是全部的浏览器都支持的，并且可能会破坏你的脚本。所以，你应该首先检查console是否可用，此外，你可能想在别的地方记录日志，甚至你想以某种级别记录日志。ABP定义了安全的日志函数：

abp.log.debug('...'); abp.log.info('...'); abp.log.warn('...'); abp.log.error('...'); abp.log.fatal('...'); 

你能够经过设置abp.log.level为abp.log.levels之一来更改日志级别（好比，abp.log.levels.INFO没有记录调试日志）。这些函数默认将日志记录到了浏览器的控制台里了。但若是你须要的话，你也能够重写或者扩展这个行为。

其余工具功能

ABP提供了一些通用的工具功能。

abp.utils.createNamespace

用于当即建立更深的命名空间。假设咱们有一个基命名空间‘abp’，而后想要建立或者得到‘abp.utils.strings.formatting’命名空间。不须要下面这样写：

//建立或得到namespace abp.utils = abp.utils || {}; abp.utils.strings = abp.utils.strings || {}; abp.utils.strings.formatting = abp.utils.strings.formatting || {}; //给该namespace添加一个function abp.utils.strings.formatting.format = function() { ... };

咱们能够这样写：

var formatting = abp.utils.createNamespace(abp, 'utils.strings.formatting'; //给该namespace添加一个function formatting.format = function() { ... };

这样就简化了安全地建立深刻的命名空间了。注意，第一个参数是必须存在的根命名空间。

abp.utils.formatString

这个和C#中的string.Format()很类似。用法示例：

var str = abp.utils.formatString('Hello {0}!', 'World'); //str = 'Hello World!' var str = abp.utils.formatString('{0} number is {1}.', 'Secret', 42); //str = 'Secret number is 42'

 

ABP经过使用abp.ajax函数封装Ajax的调用，自动化了这其中的一些步骤。一个ajax调用的例子以下：

var newPerson = { name: 'Dougles Adams', age: 42 }; abp.ajax({ url: '/People/SavePerson', data: JSON.stringify(newPerson) }).done(function(data) { abp.notify.success('created new person with id = ' + data.personId); }); 

abp.ajax以一个对象做为接收选项。你能够传递任何在jQuery的$.ajax方法中有效的任何参数。这里有一些 默认的值：dataType是‘json’，type是‘POST’，contentType是‘application/json’（所以，在发送到服务器以前，咱们能够调用JSON.stringify将javascript对象转成JSON字符串）。你能够经过将选项传给abp.ajax重写默认值。

abp.ajax返回了promise。所以，你能够写done,fail,then等处理函数。上面的例子中，咱们向 PeopleController的SavePerson的action发送了简单的Ajax请求。在 done处理函数中，咱们得到了新添加的person的数据库Id，并且展现了一个成功的通知。让咱们看一下该Ajax请求的 MVC控制器：

public class PeopleController : AbpController { [HttpPost] public JsonResult SavePerson(SavePersonModel person) { //TODO:将新的person保存到数据库，并返回该person的Id return Json(new {PersonId = 42}); } } 

SavePersonModel包含了Name和Age属性。SavePerson标记有 HttpPost特性，由于abp.ajax默认的方法是POST。这里经过返回一个匿名的对象简化了方法的实现。

这个看上去简单明了，可是ABP背后处理了许多重要的事情。让咱们深刻细节看一下：

Ajax返回的消息

虽然咱们直接返回了一个具备PersonId=2的对象，可是ABP会使用一个MVCAjaxResponse对象封装了它。实际的Ajax响应是像下面那样的：

{ "success": true, "result": { "personId": 42 }, "error": null, "targetUrl": null, "unAuthorizedRequest": false } 

这里，全部的属性都是camelCase的（由于在javascript中这是惯例），即便在服务端代码中是PascalCased的。下面解释一下全部的字段：

• success:一个布尔值，表示操做的成功状态。若是是true，abp.ajax会解析该promise，并调用 done处理函数。若是是false（若是在方法调用中发生了异常），它会调用 fail处理函数并使用abp.message.error函数展现一个 error消息。
• result：控制器的action返回的实际值。若是success是true，并且服务器发送了一个返回值，它才有效。
• error：若是success是false，那么该字段是一个包含了 message和 detail字段的对象。
• targetUrl:这为服务器提供了一种重定向客户端到其余Url的可能性。
• unAuthorizedRequest:这为服务器提供了通知客户端该操做没有受权或者用户没有认证的可能性。若是该值是true，那么abp.ajax会 从新加载当前的页面。

经过从AbpController类中派生就能够将返回值转换成一个封装的Ajax响应。 abp.ajax会识别并计算该响应。所以，它们成对工做。若是没有发生错误的话，那么abp.ajax的done处理函数会得到控制器返回的实际值（一个具备personId属性的对象）。

当从AbpApiController类派生时，也会存在相同的机制。

处理错误

正如上面描述的，ABP会处理服务器中的全部异常，并返回一个具备错误信息的对象，以下所示：

{ "targetUrl": null, "result": null, "success": false, "error": { "message": "An internal error occured during your request!", "details": "..." }, "unAuthorizedRequest": false } 

能够看到，success是false，result是null。abp.ajax处理该对象，并且使用abp.message.error函数展现一个错误信息给用户。若是你的服务端代码抛出了一个UserFriendlyException类型的异常，它会直接给用户显示异常信息。不然，它会隐藏实际的错误（将错误写到日志中），并展现一个标准的“服务器内部错误...”信息给用户。全部的这些都是ABP自动处理的。

动态Web API 层

虽然ABP提供了一种使得调用Ajax很简单的机制，可是在真实世界的应用中，为每一个Ajax调用编写javascript函数是很经典的，好比：

//建立一个抽象了Ajax调用的function var savePerson = function(person) { return abp.ajax({ url: '/People/SavePerson', data: JSON.stringify(person) }); }; //建立一个新的 person var newPerson = { name: 'Dougles Adams', age: 42 }; //保存该person savePerson(newPerson).done(function(data) { abp.notify.success('created new person with id = ' + data.personId); }); 

对于每一个Ajax调用都写个函数是个好的作法，可是这耗时且乏味。ASP.NET为应用服务层方法提供了自动生成这些类型的函数机制。请阅读《动态Web API层》