Asp.Net MVC Unobtrusive Ajax

1.   unobtrusive javascript介绍

　　说到unobtrusive ajax，就要谈谈unobtrusivejavascript了，所谓unobtrusive javascript即为非侵入式javascript（即将js代码与html代码分离，方便阅读与维护），是目前在web开发领域推行的一种思想。

2.   在asp.net mvc中的应用

2.1 概述

         使用vs新建一个asp.net mvc项目就会在~/scripts/目录下面看到很多以unobtrusive结尾的javascript脚本文件，如：

 

　　今天的主角是asp.net mvc unobtrusive ajax，那么大家应该可以猜到主要还是jquery.unobtrusive-ajax.js和jquery.unobtrusive-ajax.min.js这两个文件。这就是asp.netmvc实现非侵入式ajax的主要手段，若要在项目中使用unobtrusive ajax，那么一定要用到这两个文件中的一个，至于具体用哪个就不多废话了。下面来看看unobtrusive ajax在asp.net mvc中的使用。

         asp.net mvc对beginform的使用提供了11个重载的版本，但是细细观察11个重载版本就会发现，这些重载*同点是有一个ajaxoptions类型的参数，除此之外ajax辅助方法的beginform和html辅助方法的beginform相同参数版本之间并无差别，而这个ajaxoptions就是asp.net mvc实现ajax方法依据。

　　  ajaxoptions的主要属性有：

 

         上表中对参数进行了分组和着色以示区分其在beginform中的作用：

• url和httpmethod算是ajax请求的基础了，指示了ajax请求的url路径及所采用的http方法；
• updatetargetid和insertionmode是对请求成功后回显的设置，正如上例所示的那样；
• onbegin、oncomplete、onfailure以及onsuccess四个属性则是对ajax请求过程javascript回调的设置，是具体的javascript语句或者是一个javascript函数；
• confirm则是在发起ajax请求前页面进行确认的消息，页面通过window.confirm显示确认信息；
• loadingelementduration和loadingelementid这两个则属于锦上添花的东西了，用于在请求过程中显示页面动态请求情况，比如一个‘loading…’的文字或者一个显示进度的图片。

         设置说明：

• url:默认为form的action，上面提到的jquery.unobtrusive-ajax.js两段代码中对其进行了设置，如果有设置data-ajax-url属性，则取data-ajax-url属性作为ajax请求的url，否则取<form>的action属性（如果是链接的话，则取的是<a>的href属性）。
• httpmethod：默认值为get，这部分的设置和ajaxoptions.url是相似的，对于form来说优先级依次为data-ajax-method属性，form.action，"get"，对于link来说就是"get"。
• updatetargetid：原则上应是需要更新的html元素的id（mvc的aajx辅助方法会自动在生成的data-ajax-update属性前面插入字符'#'，参看前面ajax.beginform生成的html代码），但是细细查看代码，你会发现此处可为多个html元素，只要第一个不加#，之后的依次加上即可，如updatetargetid ="div1,#div2, #div3"，可实现多个div同时更新，甚至于后面的可以是任何jquery支持的css selector。

2.2 示例

　　为了便于观察测试效果，在新建的mvc项目的homecontroller中增加如下action：

        public actionresult index()
        {
            return view();
        }

 
        public string s(string q)
        {
            return "the query string is : " + q;
        }

　　其中action ‘index’用于显示ajax操作页面，action ‘s’用来响应ajax请求结果。index页面的主要内容如下：

 1 @using (ajax.beginform(
 2     new ajaxoptions
 3     {
 4         url = "home/s",
 5         httpmethod = "get",
 6         updatetargetid = "searchresult",
 7         insertionmode = insertionmode.replace
 8     }))
 9 {
10     <input type="text" name="q" />
11     <input type="submit" value="查询" />
12 } 
13 
14 <div id="searchresult"></div>

 

　　其作用就是生成一个表单，提交这个表单的时候执行异步的ajax请求，并将请求结果回显到id为searchresult的div元素内。运行如下：

 

参考资料：

asp.net mvc unobtrusive ajax 原理剖析