虽然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层》
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(你可以检查该文件看它是否实现,这个相当简单)中。
Message给用户展示消息对话框。
消息API用于给用户展示消息或者获得用户的确认。
消息API默认是使用 sweetalert 实现的。要让sweetalert生效,你应该包含它的css和javascript文件,然后再页面中添加 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) { //...删除用户 } } );这里的第二个参数(title)是可选的,因此,回调函数也可以是第二个参数。
一个确认消息的例子如下所示:
ABP内部使用了Message API。比如,如果Ajax调用失败了,那么它会调用abp.message.error。
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 作为适配器。
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