AJax技术

ABP理论学习之Javascript API(理论完结篇)(2)

字号+ 作者:H5之家 来源:H5之家 2017-07-22 14:00 我要评论( )

虽然ABP提供了一种使得调用Ajax很简单的机制,但是在真实世界的应用中,为每个Ajax调用编写javascript函数是很经典的,比如: //创建一个抽象了Ajax调用的functionvar savePerson = function(person) {return abp.a

虽然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成功通知如下所示:


ABP理论学习之Javascript API(理论完结篇)


你也可以用你最喜欢的通知库中实现通知。只需要在自定义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理论学习之Javascript API(理论完结篇)


确认

例子如下:

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

这里的第二个参数(title)是可选的,因此,回调函数也可以是第二个参数。

一个确认消息的例子如下所示:


ABP理论学习之Javascript API(理论完结篇)


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');

样例截图:


ABP理论学习之Javascript API(理论完结篇)


该参数应该是一个选择器(如‘#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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 详解angular ui-grid之过滤器设置

    详解angular ui-grid之过滤器设置

    2017-06-16 17:00

  • socket.io学习教程之基础介绍(一)

    socket.io学习教程之基础介绍(一)

    2017-05-12 13:00

  • Ajax和跨域问题深入解析

    Ajax和跨域问题深入解析

    2017-04-28 10:01

  • Ajax基础与登入教程

    Ajax基础与登入教程

    2017-04-06 16:04

网友点评