Unobtrusive Ajax

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。

• 通过前面的ajaxOptions发起$.ajax()调用，完成Ajax请求。