ABP展现层——Javascript函数库

点这里进入ABP系列文章总目录

基于DDD的现代ASP.NET开发框架--ABP系列之21、ABP展现层——Javascript函数库

ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。

ABP的官方网站http://www.aspnetboilerplate.com

ABP在Github上的开源项目https://github.com/aspnetboilerplate


ASP.NET Boilerplate的js库提供了一些让javascript开发更方便的方法和对象,以下介绍一下库中的API列表。

Ajax

现代的应用经常会使用AJAX,尤其是单页应用,几乎是和服务器通信的唯一手段,执行AJAX通常会有以下步骤:

在客户端,你需要提供一个URL,选择一个和服务器通信的方法(GET,POST,PUT,DELETE)。在请求完成后执行回调函数,请求结果可更是成功或失败,失败时你需要给出提示,成功时你需要根据返回值执行操作。通常情况下,在请求开始时,你需要给出类似正在处理或者相关的繁忙等待信息(如页面遮盖),请求完成后恢复。

服务端接收到请求后,对请求参数进行验证,执行服务端代码,如果发生错误或者验证失败,应给出具体的原因,成功时返回客户端想要的数据。

ABP服务端支持标准的ajax的请求/输出。建议大家使用abp.jquery.js中提供的ajax请求方法,这个方法基于jquery的ajax方法,可以自动处理服务端的异常信息,当然,如果你对js很熟练的话,也可以根据自己的需要写ajax。

ASP.NET Boilerplate的ajax请求实例:

//构建要传输的参数对象
var newPerson = {
name: 'Dougles Adams',
age: 42
};
//调用abp的ajax方法
abp.ajax({
url: '/People/SavePerson',
data: JSON.stringify(newPerson) //转换成json字符串
}).done(function(data) {
abp.notify.success('created new person with id = ' + data.personId);
});

你也可以使用jquery的ajax方法调用,但是需要设置一下默认请求参数,dataType 设置为 'json', type 设置为 'POST' and contentType 设置为 'application/json,在发送请求时需要将js对象转换成json字符串,和$.ajax一样,你也可以传递参数覆盖abp.ajax的默认参数abp.ajax返回一个promise类型,你可以链式编程写如下的方法:

.done() //成功,
.fail() //失败,
.then() //回调嵌套。

下面的一个简单的例子展示ajax请求PeopleController的SavePerson方法,在.done()中可以获取到服务端创建记录成功后返回的记录id。

public class PeopleController : AbpController
{
[HttpPost]
public JsonResult SavePerson(SavePersonModel person)
{
//TODO: save new person to database and return new person's id
//TODO: 创建一个新的person记录并返回此记录的id
return Json(new {PersonId = 42});
}
}

SavePersonModel 包含name,age等属性. SavePerson 上标记了 HttpPost 特性 abp.ajax默认以 POST 方式请求. 返回值被简化成了一个匿名对象。

SavePersonModel 包含name,age等属性. SavePerson 上标记了 HttpPost 特性 abp.ajax默认以 POST 方式请求. 返回值被简化成了一个匿名对象。

AJAX 返回值(AJAX return messages)

我们直接返回了一个匿名对象, ABP 通过 MvcAjaxResponse 类型包装了返回值. 实际的返回值类型如下:

{
"success": true, //正确处理标志
"result": {
"personId": 42 //返回的数据
},
"error": null, //如果发生错误,result为null,此处为错误信息的对象,包含message和details两个属性
"targetUrl": null, //可以提供一个url供客户端重定向,例如自动构建下一页的url
"unAuthorizedRequest": false //是否通过了授权,如果返回true,客户端应重新登录
}

如果你继承了AbpController,Json方法返回的对象总会被这样包装,如果未发生错误,你在abp.ajax的done(function(result,data){})中,第一个参数result是{"personId": 42}对象,data是原始对象,WebApi中继承AbpApiController也是同样的机制。

错误处理(Handling errors)

返回值如下:

{
"targetUrl": null,
"result": null,
"success": false, //代表出现异常
"error": {
"message": "An internal error occured during your request!", //未捕捉到的异常,通常为系统异常,会自动记录日志,具体提示信息在配置文件配置,可以搜索一下,如果是业务抛出的UserFriendlyException异常,message为具体的错误信息
"details": "..." //发生异常时默认会调用abp.message.error函数,你可以在abp.jquery.js修改,统一处理错误信息。
},
"unAuthorizedRequest": false
}

动态WebAPI(Dynamic Web API Layer)

此处会根据Services动态生成WebAPI调用函数:

//通常我们使用ajax会按照如下写法,做一个简单的封装来重用ajax,此处框架可以帮你生成简单的调用方法
var savePerson = function(person) {
return abp.ajax({
url: '/People/SavePerson',
data: JSON.stringify(person)
});
};
//调用时你需要构建参数
var newPerson = {
name: 'Dougles Adams',
age: 42
};
//直接调用方法,如何生成上面的调用方法可以参考源码中的Abp.Web.Api项目中/ WebApi/ Controllers/ Scripting/ jQuery下的实现
savePerson(newPerson).done(function(data) {
abp.notify.success('created new person with id = ' + data.personId);
});

通知

通知会显示在右下角,稍后自动消失

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的js和css,然后引用ABP项目的abp.toastr.js,notify.success调用后的样子:

你可以运行样板项目,在浏览器的控制台测试这几种提示消息,另外,当ajax出现异常时,你可以修改abp.jquery.js的源文件,来调用abp.notify.error方法实现友好的提示信息。

如果你有其他的的通知插件也可以使用,引用相应的js库就可以了,提示消息的js是可选的。

消息

用于向用户显示对话框,展示消息或者得到用户的确认,ABP默认采用的sweetalert库实现的对话框信息,使用时你需要引用sweetalert的样式和js,并且引用abp.sweet-alert.js就可以使用下列API了:

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.success会展示如下的对话框:

Confirmation 确认对话框:

abp.message.confirm(
'User admin will be deleted.', //确认提示
'Are you sure?',//确认提示(可选参数)
function (isConfirmed) {
if (isConfirmed) {
//...delete user 点击确认后执行
}
}
);

默认ABP的js库中可能会引用到消息API,比如ajax调用失败会调用abp.message.error。

用户界面的繁忙提示

ABP提供了设置页面的某部分繁忙的API。

UI Block API

设置一个半透明层,阻止点击页面元素,可以覆盖局部或者整个页面,例子如下:

abp.ui.block(); //覆盖整个页面
abp.ui.block($('#MyDivElement')); //覆盖指定元素,可以把jquery对象作为参数
abp.ui.block('#MyDivElement'); //或者直接使用选择器参数
abp.ui.unblock(); //整个页面解除覆盖
abp.ui.unblock('#MyDivElement'); //指定元素解除覆盖

UI Block API使用blockUI这个js库来实现效果的,如果使用这个api需要在页面引用blockUI的js库和abp.blockUI.js文件。

UI Busy API 指示页面繁忙的API,如ajax请求中:

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

第一个参数可以直接使用jquery选择器如’#id’或者使用jquery对象如$(‘#id’),如果传null或者‘body’则标记整个页面为繁忙状态,第二个参数可以接收一个promise,promise完成后会自动解除页面繁忙状态。

abp.ui.setBusy(
$('#MyLoginForm'),
abp.ajax({ ... }) //返回值是promise,如果需要了解promise的更多信息,可以参考jQuery的 Deferred
);

UI Busy API 使用的是spin.js,你需要在页面中引用spin.js和abp.spin.js。

Js日志接口

这个主要是对浏览器console.log('...') 进行的包装,可以支持所有浏览器,例子如下:

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

你可以通过设置abp.log.level来控制日志输出,和服务端一样,如设置了abp.log.levels为INFO时就不会输出debug日志了,你也可以根据你的需要定制重新这些API。

Javascript公共方法

ABP提供了一些常用的公共方法。

创建命名空间别名(abp.utils.createNamespace)

通过创建命名空间让js方法分类更加明确,使用更加方便,下面是例子:

//创建或者获取命名空间
abp.utils = abp.utils || {};
abp.utils.strings = abp.utils.strings || {};
abp.utils.strings.formatting = abp.utils.strings.formatting || {};
//在命名空间中增加一个方法
abp.utils.strings.formatting.format = function() { ... };
你可以向下面一样用
//创建命名空间别名
var formatting = abp.utils.createNamespace(abp, 'utils.strings.formatting';
//在formatting命名空间下增加/修改一个方法
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展现层——Javascript函数库的更多相关文章

  1. ABP(现代ASP.NET样板开发框架)系列之21、ABP展现层——Javascript函数库

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之21.ABP展现层——Javascript函数库 ABP是“ASP.NET Boilerplate Project ...

  2. ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及abp封装的Javascript函数库

    经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这里算是前面几节的一个初次试水. 首先我们数据库已经有的相应的数据. 模型和DTO已经建好,所以我们直接在服务 ...

  3. ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及几种abp封装的Javascript函数库

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期         简介 经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这 ...

  4. ABP(现代ASP.NET样板开发框架)系列之20、ABP展现层——动态生成WebApi

    点这里进入ABP系列文章总目录 ABP(现代ASP.NET样板开发框架)系列之20.ABP展现层——动态生成WebApi ABP是“ASP.NET Boilerplate Project (ASP.N ...

  5. ABP展现层——动态生成WebApi

    ABP展现层——动态生成WebApi 点这里进入ABP系列文章总目录 ABP(现代ASP.NET样板开发框架)系列之20.ABP展现层——动态生成WebApi ABP是“ASP.NET Boilerp ...

  6. ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...

  7. jQuery使用最广泛的javascript函数库

    网站建设中,jQuery之最方便的的库了,当用到其中的JavaScript函数库的时候,不禁会想居然还有这么简单的操作? 一.选择网页元素 jQuery的基本设计思想和主要用法,就是"选择某 ...

  8. ABP(现代ASP.NET样板开发框架)系列之23、ABP展现层——异常处理

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之23.ABP展现层——异常处理 ABP是“ASP.NET Boilerplate Project (ASP.NET ...

  9. 现代JavaScript函数库 usuallyjs 的安装和使用

    usuallyjs usuallyjs 是一个面向现代 Web 开发的 JavaScript 实用函数库. usuallyjs 基于 ES6 开发,抛弃了传统 Web 开发中 DOM 和 BOM 操作 ...

随机推荐

  1. 0x00000000该内存不能为read

    0X000000存储器不能read解决方案 有这种现象方面,首先,在硬件,这有问题的内存,二,软件,其中有许多问题. 一:先说说硬件: 一般来说,电脑硬件不easy生病.内存故障的可能性并不大(非你的 ...

  2. NETSH WINSOCK RESET这个命令的意义和效果?

    简要地netsh winsock reset命令含义复位 Winsock 文件夹.一机多用的假设Winsock协议配置问题,那么问题会导致网络连接,我们需要使用netsh winsock reset命 ...

  3. IOS设计模式学习(11)中介者

    1 前言 面向对象的设计鼓励把行为分散到不同对象中.这种分散可能导致对象之间的相互关联.在最糟糕的情况下,所有对象都彼此了解并相互操作.但是增加的相互关联又减少了获得的益处.增加的关联似的对象很难或不 ...

  4. MySql之ALTER命令用法详细解读(转)

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文详细解读了MySql语法中Alter命令的用法,这是一个用法比较多的语法,而且功能还是很强 ...

  5. 编译命令行终端 swift

    So, this is where swift lives, after you've installed XCode 6 Beta: /Applications/Xcode6-Beta.app/Co ...

  6. Linux平台下裸设备的绑定:

    Linux平台下裸设备的绑定: 运用RAW绑定 方法一 raw的配置(1) [root@qs-dmm-rh2 mapper]# cat /etc/rc.local #!/bin/sh # # This ...

  7. spring 配置属性的详细信息

    摘要(这篇文章讲的红,蓝说这话节) 字面值 字面值:可用字符串表示的值,能够通过<value>元素标签或value属性进行注入 基本数据类型及其封装类.String等类型都能够採取字面值注 ...

  8. Hadoop入门进阶步步高(五)-搭建Hadoop集群

    五.搭建Hadoop集群 上面的步骤,确认了单机能够运行Hadoop的伪分布运行,真正的分布式运行无非也就是多几台slave机器而已,配置方面的有一点点差别,配置起来就很easy了. 1.准备三台se ...

  9. chrome主页被篡改为360该溶液的导航

    昨天,安装游戏后,,发现chrome该主页被篡改为360导航. 进入chrome设置更改主页,再次启动chrome或360导航,后来头发今天chrome快捷方式目标再加上一堆的属性后面360网站导航, ...

  10. 【C语言探索之旅】 第二部分第九课: 实战"悬挂小人"游戏 答案

    内容简介 1.课程大纲 2.第二部分第九课: 实战"悬挂小人"游戏 答案 3.第二部分第十课预告: 安全的文本输入 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题, ...