Unobtrusive JavaScript in ASP.NET MVC 3javascript

最新推荐文章于 2018-04-19 15:01:00 发布

chaoxidawang

最新推荐文章于 2018-04-19 15:01:00 发布

阅读量412

点赞数

分类专栏： javascript 文章标签： javascript mvc asp.net string jquery ajax

javascript 专栏收录该内容

188 篇文章 0 订阅

订阅专栏

unobtrusive javascript 是什么?

测试

以上的代码分别是 mvc 3 在“关闭”和“开启” unobtrusive javascript 后生成的 ajax.actionlink。

那 unobtrusive javascript到底是什么呢?简单地来说,就是一种代码分离的思想,把行为层和表现层分离开。

具体的可以查看维基百科下对unobtrusive javascript的解释。

unobtrusive javascriptin asp.net mvc 3

unobtrusive javascript 的好处显而易见,但是如何在mvc3使用unobtrusive javascript呢?

1、引用相应的javascript文件

这四个文件包含在 mvc 3 的 scripts 文件夹中,直接引用即可。

值得注意的是:jquery.unobtrusive-ajax.min.js 和 jquery.validate.unobtrusive.min.js 是两个用来让 jquery 支持 unobtrusive javascript 的库。

在 jquery 官网上看不到,打开后发现,原来是微软自己写的。

另外,以前用来实现 mvc ajax 和客户端验证的三个文件 microsoftajax, microsoftmvcajax.js, microsoftmvcvalidation.js 不需要再引用了。

原因就是因为,微软在 mvc 3 使用 jquery 来实现 ajax 了,而上面两个 javascript 库就相当于是两个 adapter（适配器）

2、开启 unobtrusive javascript

mvc3中的web.config文件中默认多了两个配置项

这里是一个全局设置,你可以打开或者关闭。

另外,你也可以在任何一个 action 或 controller 中执行以下代码,灵活地进行控制,来处理一些特殊的 action 或 controller。

htmlhelper.clientvalidationenabled = true;

htmlhelper.unobtrusivejavascriptenabled = true;

3、如果不需要用 unobtrusive javascript 呢?

如果不需要用的话根据上面的方法关闭即可。

但是要注意一点!这时候,如果你需要用 ajax 或者客户端验证,务必引用mvc3以前版本中的三个 javascript文件:microsoftajax, microsoftmvcajax.js, microsoftmvcvalidation.js

否则就不能实现ajax 和客户端验证了。

unobtrusive ajax in asp.net mvc 3

原文:《unobtrusive ajax in asp.net mvc 3》

关于 ajaxoptions

mvc 中 ajaxhelper 的扩展方法,提供了一系列的 ajax 方法,例如:actionlink routelink, beginform, beginrouteform 等。它们的使用方法和 htmlhelper很像,主要的区别就在于 ajaxhelper 有一个 ajaxoptions 参数。

public class ajaxoptions {

public string confirm { get; set; }

public string httpmethod { get; set; }

public insertionmode insertionmode { get; set; }

public int loadingelementduration { get; set; }

public string loadingelementid { get; set; }

public string onbegin { get; set; }

public string oncomplete { get; set; }

public string onfailure { get; set; }

public string onsuccess { get; set; }

public string updatetargetid { get; set; }

public string url { get; set; }

}

这些属性会告诉 mvc 如何生成你的 ajax 代码。

传统的生成方式

当 unobtrusive 模式被关闭的时候,mvc 会把代码写在你的 《unobtrusive client validation in asp.net mvc 3》

传统的生成方式

一下是 mvc 数据验证框架下对于 model 的描述(这部分不变)

public class validationmodel {

[required]

public string firstname { get; set; }

[required, stringlength(60)]

public string lastname { get; set; }

[range(1, 130)]

public int age { get; set; }

}

当开启客户端验证后:(具体开启方法和 unobtrusive javascript 大同小异,请看第二部分)

firstname

lastname

age

当 unobtrusive javascript 关闭后,你会看到以上代码(和 mvc 2 中相同)。

你会发现在后面多了一段 javascript 代码,而这里,便是对表单验证的核心。

依赖于 unobtrusive javascript 的生成方式

开启 unobtrusive javascript 后,代码完全改变了

firstname

lastname

age

其中最大的改变就是下面的 javascript 代码消失了,转而变为 html 5 的各种属性。

属性是如何生成的

当表单中的一项在后端代码中有数据验证的时候,mvc 会现在它的属性中加上data-val="true",并且讲所有规则以 data-val-rulename="message" 的形式,加在属性上。

如果想使用默认的客户端验证信息,你只要把属性值留空,那么客户端验证会自动生成形如 data-val-rulename-paramname="paramvalue" 的属性。

桥接 html 和 jquery : 适配器

写一个客户端验证有两个步骤:1、为 jquery 验证编写验证规则,2、在 html 代码中加上属性,并且使用适配器转换为对应的 jquery 验证规则。(这个在非 mvc 中也适用)

你可以调用 jquery.validator.unobtrusive.adapters. 来编写适配规则。

这里有三个方法能帮助你注册三种很常规的适配器。(addbool, addsingleval, and addminmax)

具体的方法大家可以看一下原文,因为 jquery.validate.unobtrusive.min.js 已经把这些适配规则都写好了,所以不加以阐述了,如果想了解原理的话可以去看一下~

ending

最后,还不太了解 mvc 数据验证的朋友可以看一下我的另一篇文章:

深入浅出 mvc 数据验证 2.0 [附演示源码]

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/