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 Core MVC/WebApi基础系列 (一)
-
ASP.NET MVC实现功能:通过URL路由实现对多语言的支持
-
Asp.net中用 AJAX调用后台静态的方法总结
-
详解ASP.NET MVC 常用扩展点:过滤器、模型绑定
-
使用asp.net mvc,boostrap及knockout.js开发微信自定义菜单编辑工具(推荐)
-
ASP.NET MVC 微信JS-SDK认证
-
ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
-
灵活掌握Asp.net MVC中GridView的使用方法
-
ASP.NET MVC传送参数至服务端详解及实例
-
使用ASP.NET MVC引擎开发插件系统