本章将开始介绍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
First Last Role
@p.FirstName
@p.LastName
@p.Role
}
@using (Html.BeginForm()) {
@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")
{
IEnumerable data = _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。