MVC3 学习笔记 之（ajax表单）

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

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

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

View Code

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

页面代码：

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

View Code

 

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

CS代码：

 1 public ActionResult SearchList(string queryString)
 2         {
 3             List<string> resultList = new List<string>();
 4             resultList.Add("张三");
 5             resultList.Add("李四");
 6             resultList.Add("王五");
 7             resultList.Add("赵六");
 8             resultList.Add("张一");
 9             resultList.Add("张二");
10             var result = resultList.Where(e => e.Contains(queryString)).ToArray();
11             return Content(string.Join("<br/>", result));
12         }

View Code

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

页面效果：

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

页面代码：

 1 <script type="text/javascript">
 2     function searchSuccess(rs) {
 3         if (rs.success) {
 4             var html = "";
 5             for (var i in rs.result) {
 6                 html += rs.result[i].Name + "&nbsp;" + rs.result[i].Age + "&nbsp;" + rs.result[i].Height + "<br/>";
 7             }
 8             $("#searchresults").html(html);
 9         }
10     }
11 </script>
12 @using (Ajax.BeginForm("SearchJson", "Account", null, new AjaxOptions
13 {
14     HttpMethod = "POST",
15     OnSuccess = "searchSuccess",               //成功调用函数
16     LoadingElementId = "ajax-loader",          //加载中元素ID
17 }))
18 { 
19     <input type="text" name="queryString" />
20     <input type="submit" value="查询" />
21     <img id="ajax-loader" src="@Url.Content("~/Content/Images/ajax-loader.gif")" style="display:none" />
22     <div id="searchresults">
23     </div>
24 }

View Code

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

CS代码：

 1 public JsonResult SearchJson(string queryString)
 2         {
 3             Dictionary<string, Person> dt = new Dictionary<string, Person>();
 4             dt.Add("张三", new Person { Name = "张三", Age = 18, Height = 1.75 });
 5             dt.Add("李四", new Person { Name = "李四", Age = 19, Height = 1.72 });
 6             dt.Add("王五", new Person { Name = "王五", Age = 20, Height = 1.82 });
 7             dt.Add("赵六", new Person { Name = "赵六", Age = 16, Height = 1.65 });
 8             dt.Add("张一", new Person { Name = "张一", Age = 23, Height = 1.74 });
 9             dt.Add("张二", new Person { Name = "张二", Age = 22, Height = 1.77 });
10             Hashtable ht = new Hashtable();
11             ht.Add("success", true);
12             ht.Add("result", dt.Where(e => e.Value.Name.Contains(queryString))
13                 .ToDictionary(e => e.Key, e => e.Value));
14             return Json(ht, JsonRequestBehavior.AllowGet);
15         }

View Code

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

页面效果：

 

 

转载于:https://www.cnblogs.com/chenjiale/p/3475014.html