Unobtrusive Ajax
Ajax
Ajax 是Asynchronous JavaScript and XML(异步JavaScript与XML)的缩写。其XML部分并不如它往常那样意义重大,但其异步部分却使 Ajax 十分有用。这是在后台请求服务器数据,而不必重载Web页面的一种模型。
Unobtrusive Ajax
Unobtrusive Ajax 是在 Web 页面使用 JavaScript 的一种通用方式。这个术语没有明确的定义,但它有如下基本的原则(来自维基百科):
1.行为(JavaScript 代码)与 Web 页面的结构(Html 标记)和表现(CSS样式)分离。
2.JavaScript 最佳实现,解决JavaScript语言本身存在的传统问题(如缺乏可扩展性和开发人员编码风格不一致性)。
3.解决浏览器兼容性问题。
ASP.NET Unobtrusive Ajax
准备
1.配置根目录下的 Web.config 文件,在 configuration/appSettings 节点下的 UnobtrusiveJavaScriptEnabled 值设为 true
... <configuration> <appSettings> ... <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings> </configuration> ...
2.首先要引入相关JS
<script src="~/Jquery/jquery-1.8.0.min.js"></script>
<script src="~/Jquery/jquery.unobtrusive-ajax.min.js"></script>
创建Ajax表单
MVC框架支持Ajax表单的核心在于Ajax.BeginForm辅助方法, 它可以接受一个AjaxOptions对象作为其参数。 笔者喜欢在试图的开始处, 以Razor代码块的形式创建AjaxOptions对象, 但如果你愿意, 也可以在调用Ajax.BegionForm时, 内联地创建它们。
@{ ViewBag.Title = "GetPeople"; AjaxOptions ajaxOpts = new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "tableBody", OnSuccess = "OnSuccess" }; } <h2>GetPeople</h2> <table border="1"> <thead><tr><th>UserName</th><th>Sex</th><th>Age</th></tr></thead> <tbody id="tableBody"> </tbody> </table> <hr /> @using (Ajax.BeginForm("GetPeopleData", "User", ajaxOpts, new { @id = "PerpleForm", @class = "form-PerpleForm " })) { <div> <input type="text" name="UserName" /> </div> <button type="submit" id="subId">Submit</button> }
System.Web.Mvc.Ajax 命名空间中的 AjaxOptions 类定义了一组属性, 能够用来配置如何形成发送给服务器的异步请求,以及对取回的数据做那些处理
属性 | 描述 |
---|---|
Confirm | 在形成Ajax请求之前,设置显示给用户的确认窗口中的消息 |
HttpMethod | 设置用来形成请求的HTTP方法(必须是GET或POST) |
InsertionMode | 指定从服务器接受的内容以何种方式插入到HTML。三种选择被表示成InsertionMode枚举中的值:InsertAfter、 InsertBefore 和Replace(默认值) |
LoadingElementId | 指定HTML 元素的ID, 这是执行Ajax 请求期间要显示的HTML元素 |
LoadingElementDuration | 指定动画的持续时间, 用于显露由LoadingElementId指定的元素 |
UpdateTargetId | 指定HTML元素的ID, 从服务器接收的内容将被插入到该元素中 |
Url | 设置所请求的服务器端 URL |
OnBegin | 获取或设置要在更新页面之前立即调用的 JavaScript 函数的名称。 |
OnComplete | 获取或设置在实例化响应数据之后但在更新页面之前,要调用的 JavaScript 函数。 |
OnFailure | 获取或设置在页面更新失败时要调用的 JavaScript 函数。 |
OnSuccess | 获取或设置在成功更新页面之后要调用的 JavaScript 函数。 |
理解Unobtrusive Ajax 工作原理
<form action="/User/GetPeopleData?Length=4" class="form-PerpleForm " data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-success="OnSuccess" data-ajax-update="#tableBody" id="PerpleForm" method="post"> </form>
通过jQuery发起一个Ajax请求的过程,ASP.NET MVC实现Unobtrusive Ajax则是基于jQuery的,你一定猜到了,这个过程的核心就是一次 ·$.ajax()的调用 ·,
$.ajax()的调用其实也就是准备一个ajaxOptions.
ASP.NET MVC完成这一过程的核心有两步:
-
截获<form>的submit事件,并获取Ajax.BeginForm中设置AjaxOptions属性(这些属性分别对应类似data-ajax-*的html5属性),并通过这些属性设定$.ajax()调用所需的ajaxOptions。