使用jquery.unobtrusive-ajax实现无刷新查询以及优化改进

jquery.unobtrusive-ajax是微软的一个js文件。和MVC配合使用，可以实现无刷新提交。

主要原理就是通过post方法提交数据后，返回的一般是PartialView或者View，然后把返回的这块东西，替换或者插入到当前网页的某个DOM中去。

比如有如下的一个需求，当输入ID后，按search后自动填满其他的格子。

那么设计的时候，先设计一个PartialView。

如下：

1. partial.cshtml  
2. @model  MvcApplication1.Models.PersonModel  
3. <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 
4. <div id="div1"> 
5. @*此处说明返回后的html是替换div1的*@  
6.     @using (Ajax.BeginForm("Search", "Test", new AjaxOptions { UpdateTargetId = "div1", InsertionModeInsertionMode = InsertionMode.Replace }))   
7.     {    
8.         <b>ID:</b> @Html.TextBoxFor(m =>m.id)<br /> 
9.         <b>name:</b> @Html.TextBoxFor(m => m.name)<br /> 
10.         <b>age:</b> @Html.TextBoxFor(m => m.age)<br /> 
11.         <b>gender:</b> @Html.CheckBoxFor(m => m.gender)<br /> 
12.         <p> 
13.             <input type="submit" value="search" /> 
14.         </p>    
15.     }  
16. </div> 
17.  

Index.cshtml 超简单

 

1. <h2>index</h2> 
2. @{  
3.     Html.RenderPartial("partial");  
4. }  
5.  

 

TestController.cs

1. public ActionResult Search( MvcApplication1.Models.PersonModel model)  
2.          {  
3. ModelState.Remove("age");  
4.             ModelState.Remove("name");  
5.             ModelState.Remove("gender");//必须的，不然界面上文本框的值不变  
6.             if (model.id == 1)  
7.             {  
8.                 model.name = "zhangsan";  
9.                 model.age = 21;  
10.                 model.gender = true;  
11.             }  
12.             else if (model.id == 2)  
13.             {  
14.                 model.name = "lisi";  
15.                 model.age = 30;  
16.                 model.gender = false;  
17.             }  
18.             else 
19.             {  
20.                 int tmp = model.id;  
21.                 model = new Models.PersonModel();  
22.                 model.id = tmp;  
23.             }  
24.             return PartialView("partial", model);  
25.         } 

如上的那些代码

当点击提交，controller中action方法会返回整个PartialView，然后替换原始网页中的那部分。

整个方法效率不是很高，如果整个PartialView页面内容很多，那么返回的东西就会很多。因此，最好的做法是单纯的返回一个json，然后通过json来解析值。因此，重点是写一个通用的js方法，处理json。

此处对上面这个例子，增加一个radio框，使得演示的效果更全面。

代码如下：

partial.cshtml

---

1. @model  MvcApplication1.Models.PersonModel  
2. <div id="div1"> 
3.     @using (Html.BeginForm("Search", "Test"))  
4.     {    
5.         <b>ID:</b> @Html.TextBoxFor(m => m.id)<br /> 
6.         <b>name:</b> @Html.TextBoxFor(m => m.name)<br /> 
7.         <b>age:</b> @Html.TextBoxFor(m => m.age)<br /> 
8.         <b>gender:</b> @Html.CheckBoxFor(m => m.gender)<br /> 
9. <b>city:</b>  <b>上海</b> @Html.RadioButtonFor(m => m.city, "上海", new { @id = "radio1" }) <b>北京</b> @Html.RadioButtonFor(m =&gt; m.city, "北京", new { @id = "radio2" })<br /> 
10.         <p> 
11.             <input id="sub" type="button" value="search" /> 
12.         </p>    
13.     }  
14. </div> 
15.  
16. <script type="text/javascript"> 
17.     $(function () {  
18.         //搜索  
19.         $("#sub").click(function () {  
20.             var form = $(this).parents("form");  
21.             $.ajax({  
22.                 type: 'POST',  
23.                 url: $(form).attr("action"),  
24.                 data: $(form).serializeArray(),  
25.                 success: function (result) {  
26.                 processJson(result);  
27.                 },  
28.                 dataType: "json",  
29.                 error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); }  
30.             });  
31.         });  
32.     })  
33.  
34. //此处处理json返回值。  
35.     function processJson(model) {  
36.         for (var key in model) {  
37.             if ($("#" + key).is(":checkbox")) {  
38.                 $("#" + key).attr("checked", model[key]);  
39.             }  
40.             else if ($("input[name='" + key + "']").eq(0).is(":radio")) {//对radio的元素要特殊处理。  
41.                 $("input[name='" + key + "']").attr("checked", false);  
42.              $("input[name='" + key + "'][value='" + model[key] + "']").attr("checked", true);  
43.  
44.             } else {  
45.                 $("#" + key).val(model[key]);  
46.             }  
47.         }  
48.     }  
49. </script> 
50.  

TestController.cs

---

1. public ActionResult Search(MvcApplication1.Models.PersonModel model)  
2.         {  
3.             //ModelState.Remove("age");  
4.             //ModelState.Remove("name");  
5.             //ModelState.Remove("gender");  
6.             if (model.id == 1)  
7.             {  
8.                 model.name = "zhangsan";  
9.                 model.age = 21;  
10.                 model.gender = true;  
11.                 model.city = "上海";  
12.             }  
13.             else if (model.id == 2)  
14.             {  
15.                 model.name = "lisi";  
16.                 model.age = 30;  
17.                 model.gender = false;  
18.                 model.city = "北京";  
19.             }  
20.             else 
21.             {  
22.                 int tmp = model.id;  
23.                 model = new Models.PersonModel();  
24.                 model.id = tmp;  
25.             }  
26.  
27. return Json(model);  
28.         } 

以上代码，无需用到jquery.unobtrusive-ajax类库。通过jquery自带的ajax方法，提交到controller的action方法。然后返回值是json，这就大大的缩小的返回内容。通过页面上javascript方法，处理json，并回填到页面。