本章将开始介绍MVC中Ajax的使用
以一个非Ajax版本开始
Controller
public class PeopleController : Controller { private readonly Person[] _personData = { new Person {FirstName = "Iori",LastName = "Lan", Role = Role.Admin}, new Person {FirstName = "Edwin", LastName= "Sanderson", Role = Role.Admin}, new Person {FirstName = "John",LastName = "Griffyth", Role = Role.User}, new Person {FirstName = "Tik",LastName = "Smith", Role = Role.User}, new Person {FirstName = "Anne",LastName = "Jones", Role = Role.Guest} }; public ActionResult Index() { return View("List"); } public ActionResult GetPeople() { return View("List",_personData); } [HttpPost] public ActionResult GetPeople(string selectedRole) { if (selectedRole == null || selectedRole == "All") { returnView("List",_personData); } var selected = (Role)Enum.Parse(typeof(Role), selectedRole); return View("List",_personData.Where(p => p.Role ==selected)); } }
Model
public class Person { public string FirstName { get; set; } public string LastName { get; set; } public Role Role { get; set; } } public enum Role { Admin, User, Guest }
View
@{ Layout = null; } @using MVCAjax.Models @model IEnumerable@{ ViewBag.Title = "GetPeople"; } Get People
@using (Html.BeginForm()) {
@foreach (var p in Model) { First Last Role } @p.FirstName @p.LastName @p.Role @Html.DropDownList("selectedRole",new SelectList( new []{"All"}.Concat(Enum.GetNames(typeof(Role)))))}
测试:
验证请求类型
在IE中打开F12->Network ,我们可以看到请求的发起者是click操作,因为不是xmlHttpRequest,因而不是ajax请求
使用Ajax重构代码
配置Unobstrusiveajax
打开web.config
确保这一行在appconfig节点中:
打开App_Start/BundleConfig.cs,确保已添加(默认已添加):
bundles.Add(newScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));
原因:我们需要的是jquery.1.7.1.js 和jquery.unobstrucsive-ajax.min.js,这两个包已经包含了,在layout中render就可以了。
打开_layout.cshtml
在
中render 这两个包:
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval")
注意:在View确保没有把@{layout=null},否则layout没有应用导致没有renderbundle,以致于无法render需要的script。
Controller 添加Action:
public ActionResult AjaxGetPeople() { return View("AjaxList"); } public PartialViewResult GetPeoplePartial(string selectedRole = "All") { IEnumerabledata = _personData; if(selectedRole != "All") { var selected = (Role)Enum.Parse(typeof(Role), selectedRole); data =_personData.Where(p => p.Role == selected); } return PartialView("PeoplePartialList",data); }
添加PartialViewPeoplePartialList.cshtml :
@using MVCAjax.Models @model IEnumerable@foreach (Person p in Model) { } @p.FirstName @p.LastName @p.Role
添加View: AjaxList.cshtml :
@using MVCAjax.Models @model string @{ ViewBag.Title = "GetPeople"; var ajaxOpts = new AjaxOptions { UpdateTargetId = "tableBody" }; }Get People
First | Last | Role |
---|
@Html.DropDownList("selectedRole", new SelectList(
new []{"All"}.Concat(Enum.GetNames(typeof(Role)))))
}
运行:
F12->Network 查看请求
可以看到,initiator 为XMLHttpRequest ,验证了请求确实是Ajax。