ABP-JavaScript API (转)
转自:http://www.cnblogs.com/zd1994/p/7689164.html
因经常使用,备查
一、AJAX
1,ABP采用的方式
ASP.NET Boilerplate通过用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。这里通过返回一个匿名的对象简化了方法的实现。
2,AJAX返回消息
即使我们直接返回PersonId = 2的对象,ASP.NET Boilerplate也由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类派生时,也会存在相同的机制。
3,处理错误
正如上面描述的,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自动处理的。
4,动态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);
});
二、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...’)。
1,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作为适配器。
2,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包含了一个简单的全局事件总线来 注册并 触发事件。
1,注册事件
可以使用abp.event.on来注册一个全局事件。一个注册的例子:
abp.event.on('itemAddedToBasket', function (item) {
console.log(item.name + ' is added to basket!');
});
第一个参数是事件的唯一名称。第二个是回调函数,当特定事件被触发时,会被调用。
可以使用abp.event.off方法来从一个事件中取消注册。注意:要取消注册,要提供相同的函数。因此,对于上面的例子,你应该将回调函数设置为一个变量,然后在on和off方法中使用它。
2,触发事件
abp.event.trigger用于触发一个全局事件。触发一个已经注册的事件的代码如下:
abp.event.trigger('itemAddedToBasket', {
id: 42,
name: 'Acme Light MousePad'
});
第一个参数是该事件的唯一名称。第二个是(可选的)事件参数。你可以添加任何数量的参数,并且在回调方法中获得它们
六、日志
在客户端记录日志。
1,Javascript Logging API
当你想要在客户端记录一些简单的日志时,你可以使用console.log('...')API,这你已经知道了。但是这种写法不是所有的浏览器都支持的,而且可能会破坏你的脚本。因此,你应该首先检查console是否可用,此外,你可能想在别的地方记录日志,甚至你想以某种级别记录日志。ABP定义了安全的日志函数:
abp.log.debug('...');
abp.log.info('...');
abp.log.warn('...');
abp.log.error('...');
abp.log.fatal('...');
七、其他工具技能
ABP提供了一些通用的工具功能。
1,abp.utils.createNamespace
用于立即创建更深的命名空间。假设我们有一个基命名空间‘abp’,然后想要创建或者获得‘abp.utils.strings.formatting’命名空间
var formatting = abp.utils.createNamespace(abp, 'utils.strings.formatting'; //给该namespace添加一个function
formatting.format = function() { ... };
这样就简化了安全地创建深入的命名空间了。注意,第一个参数是必须存在的根命名空间。
2,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-JavaScript API (转)的更多相关文章
- ABP文档 - Javascript Api
文档目录 本节内容: AJAX Notification Message UI Block & Busy Event Bus Logging Other Utility Functions A ...
- ABP理论学习之Javascript API(理论完结篇)
返回总目录 本篇目录 Ajax Notification Message UI block和busy 事件总线 Logging 其他工具功能 说在前面的话 不知不觉,我们送走了2015,同时迎来了20 ...
- ABP官方文档翻译 6.6 Javascript API
JavaScript API AJAX 通知 消息 UI Block和Busy 事件总线 日志 其他实用功能 ABP提供了一套对象和函数,用来简化.标准化javascript的开发. 这里是ABP提供 ...
- ABP dynamic API
打开ABP的事例项目SimpleTaskSystem.WebSpaAngular 中LayoutView <!-- Dynamic scripts of ABP system (They are ...
- ABP源码分析三十六:ABP.Web.Api
这里的内容和ABP 动态webapi没有关系.除了动态webapi,ABP必然是支持使用传统的webApi.ABP.Web.Api模块中实现了一些同意的基础功能,以方便我们创建和使用asp.net w ...
- 【原创】web端高德地图javascript API的调用
关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lb ...
- 使用ArcGIS JavaScript API 3.18 加载天地图
对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. Ar ...
- 如何正确响应ArcGIS JavaScript API中图形的鼠标事件
在使用ArcGIS JavaScript API编写程序的时候,程序员往往需要完成这样一个功能:点击地图上的图形,自动进行专题GIS数据查询,当在地图非图形区域上点击时,自动进行底图兴趣点查询. 由于 ...
- libj 0.8.2 发布,Java/JavaScript API 的 C++ 实现
libj 0.8.2 增加了一些新的字符串相关的方法. libj 是一个跨平台的运行库,相当于提供了类似 Java/JavaScript API.libj 的内存管理是自动的,基于 shared_pt ...
- 百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
随机推荐
- The Real Meaning of Peace
The Real Meaning of Peace There once was a king who offered a prize to the artist who would paint th ...
- 译:微软发布.NET应用架构指南草案
原文<Microsoft Announces Draft .NET Architecture Guidance> 译注:上周微软发布了全新的<.NET应用架构指南>草案,以征求 ...
- TFS Java SDK使用指南
[2018.3.6 更新] 最新版本的TFS Java SDK(14.123.1)支持Java SDK 1.6版本,可以从Oracle的官方网站(http://www.oracle.com/techn ...
- 深入理解Aspnet Core之Identity(3)
主题 账户管理一个比较常见的功能就是密码强度策略,Identity已经内置了一个通用的可配置的策略,我们一般情况下可以直接拿来用即可.本篇我会介绍一些Identity内置的密码策略类:Password ...
- 《ASP.NET MVC 5 破境之道》:第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构
第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构 接下来,我们来看看,VS为我们自动创建的项目,是什么样子的? 可以通过菜单中[View]->[Solution Explo ...
- c#与c++类型
C/C++ C# HANDLE, LPDWORD, LPVOID, void* IntPtr LPCTSTR, LPCTSTR, LPSTR, char*, const char*, Wchar_t* ...
- 关于ubuntu下看视频中文字幕乱码的问题
试了几个播放器都不行.....然后把字幕文件打开后重新保存成utf-8的.... 可以了!!!! 天呐改编码真是一个万能的办法~ 随手记
- 网易云 MySQL实例迁移的技术实现
本文由 网易云 发布. 我们把数据库里部分或全部 Schema和数据迁移到另一个实例的行为称为实例迁移,将导出数据的实例称为源实例,导入数据的实例称为目标实例. 根据迁移数据库类型的不同,可以分为同 ...
- 在kolla中配置cinder ceph多后端
原文链接:在kolla中配置cinder ceph多后端
- 队列的实现——java
同样实现方法有两种: 1. 数组的实现,可以存储任意类型的数据(略): 2. Java的 Collection集合 中自带的"队列"(LinkedList)的示例: import ...