MVC3 学习笔记 之（ajax表单）

mvc 提供了一种ajax提交表单的方式。与普通表单不同的是，它是一个异步表单。

在开始使用之前，需要引用以下文件：

 <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

　　下面做了一个例子实现按姓名关键字查询列表。

页面代码：

 <script type="text/javascript">
     function searchSuccess(result) {
         alert("查询成功！返回结果是：\n\n" + result);
     }
 </script>
 @using (Ajax.BeginForm("SearchList", "Account", null, new AjaxOptions
 {
     InsertionMode = InsertionMode.Replace,     //插入模式
     HttpMethod = "GET",
     OnFailure = "",                            //失败调用函数
     OnBegin = "",                              //开始调用之前
     OnComplete = "",                           //调用成功之后
     OnSuccess = "searchSuccess",               //成功调用函数
     LoadingElementId = "ajax-loader",          //加载中元素ID
     UpdateTargetId = "searchresults"           //更新元素ID
 }))
 {
     <input type="text" name="queryString" />
     <input type="submit" value="查询" />
     <img id="ajax-loader" src="@Url.Content("~/Content/Images/ajax-loader.gif")" style="display:none" />
     <div id="searchresults">
     </div>
 }

　　这里可以不必指定OnSuccess参数，因为指定的InsertionMode和UpdateTargetId参数会自动更新匹配的元素。
当然，这需要在控制器中返回上下文或视图。

CS代码：

 public ActionResult SearchList(string queryString)
         {
             List<string> resultList = new List<string>();
             resultList.Add("张三");
             resultList.Add("李四");
             resultList.Add("王五");
             resultList.Add("赵六");
             resultList.Add("张一");
             resultList.Add("张二");
             var result = resultList.Where(e => e.Contains(queryString)).ToArray();
             return Content(string.Join("<br/>", result));
         }

　　这里通过关键字查询姓名列表并返回一个上下文。

页面效果：

　　 当然也可以返回其它格式（如Json字符串）。

页面代码：

 <script type="text/javascript">
     function searchSuccess(rs) {
         if (rs.success) {
             var html = "";
             for (var i in rs.result) {
                 html += rs.result[i].Name + "&nbsp;" + rs.result[i].Age + "&nbsp;" + rs.result[i].Height + "<br/>";
             }
             $("#searchresults").html(html);
         }
     }
 </script>
 @using (Ajax.BeginForm("SearchJson", "Account", null, new AjaxOptions
 {
     HttpMethod = "POST",
     OnSuccess = "searchSuccess",               //成功调用函数
     LoadingElementId = "ajax-loader",          //加载中元素ID
 }))
 {
     <input type="text" name="queryString" />
     <input type="submit" value="查询" />
     <img id="ajax-loader" src="@Url.Content("~/Content/Images/ajax-loader.gif")" style="display:none" />
     <div id="searchresults">
     </div>
 }

　　为了防止页面缓存，这里改用了POST的请求方式。成功时调用searchSuccess方法处理返回结果。

CS代码：

 public JsonResult SearchJson(string queryString)
         {
             Dictionary<string, Person> dt = new Dictionary<string, Person>();
             dt.Add("张三", new Person { Name = "张三", Age = , Height = 1.75 });
             dt.Add("李四", new Person { Name = "李四", Age = , Height = 1.72 });
             dt.Add("王五", new Person { Name = "王五", Age = , Height = 1.82 });
             dt.Add("赵六", new Person { Name = "赵六", Age = , Height = 1.65 });
             dt.Add("张一", new Person { Name = "张一", Age = , Height = 1.74 });
             dt.Add("张二", new Person { Name = "张二", Age = , Height = 1.77 });
             Hashtable ht = new Hashtable();
             ht.Add("success", true);
             ht.Add("result", dt.Where(e => e.Value.Name.Contains(queryString))
                 .ToDictionary(e => e.Key, e => e.Value));
             return Json(ht, JsonRequestBehavior.AllowGet);
         }

　　这里通过关键字查询，返回人员列表的Json对象。

页面效果：