Asp.Net MVC4系列--进阶篇之AJAX

本章将开始介绍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

@foreach (var p in Model) { }
FirstLastRole
@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

@Html.Action("GetPeoplePartial", new {selectedRole= Model })
FirstLastRole
@using(Ajax.BeginForm("GetPeoplePartial",ajaxOpts)) {
@Html.DropDownList("selectedRole", new SelectList( new []{"All"}.Concat(Enum.GetNames(typeof(Role)))))
}


运行:


F12->Network 查看请求


可以看到,initiator 为XMLHttpRequest ,验证了请求确实是Ajax。

分析Obstrusivejavascript 工作原理



这是MVC Framework生成的form tag,对于unobsrutive javascript 来说,他关心的是data-ajax=”true”和data-ajax开头的attribute,首先找到所有data-ajax=”true”的form,然后根据data-ajax-mode找到data-ajax-update的id(注意,unobstrusivejs 基于Jquery,需要加#)完成局部刷新。

Ajax Options

以下列出一些常用的AjaxOptions :

Confirm

发起请求前弹出确认框,指定确认框的文字

HttpMethod

请求类型:POST,GET,PUT,DELETE等等

InsertionMode

Replace,Before,After, 默认为Replace

LoadingElementId

请求发出后,收到Server回应前弹出一个loading的div,这里指定div id

LoadingElementDuration

设置loading Div最多显示多少秒

UpdateTargetId

要局部更新的container id

Url

发请求的url

Loading 和Confirmation

现在稍作改动,给例子加一个Confirmation和loading

准备loading的div和css

Css:



仅作为演示,我hard-code了loading div的位置,实际项目中需要调整

Html:



在AjaxOption中指定Id

var ajaxOpts = new AjaxOptions {
UpdateTargetId = "tableBody" ,
Confirm = "Sure?",
LoadingElementDuration = 2000,
LoadingElementId = "loading"
};


在Controller中模拟一个长时间的任务

Sleep 3秒

private void MockLongTimeProcessing()
        {
            Thread.Sleep(3000);
        }


在partialview中调用一下

public PartialViewResult GetPeoplePartial(string selectedRole ="All")
        {
            MockLongTimeProcessing();
...
}


运行,查看效果:


Ajax链接

Ajax链接的生成很简单。

稍作改动,看一下ajax链接的使用方法,在View(AjaxList.cshtml)中添加:

@foreach (string role in Enum.GetNames(typeof(Role))) { }


这样就可以了,其实就是调用Ajax.ActionLink函数,设置链接的文字,Action,以及参数,最后一个是AjaxOption,我们用的是前面一个demo的。

添加对Json的支持

改动Controller

和前面的步骤一样,添加两个Action,一个是服务第一次加载页面的 请求,我们返回View,一个是Ajax过来的,我们需要返回JsonResult:

    public ActionResult  JsonList()
        {
            return View("JsonList");
        }
        public JsonResult GetPeopleJson(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 Json(data,JsonRequestBehavior.AllowGet);
        }

添加View:

JsonList.cshtml

@using MVCAjax.Models
@model string
@{
ViewBag.Title = "GetPeople";
var ajaxOpts = new AjaxOptions {
UpdateTargetId = "tableBody",
 
};
}
<script type="text/javascript">
    function processData(data) {
        var target =$("#tableBody");
        target.empty();
        for (var i = 0; i " + person.FirstName +""
            + person.LastName +"" + person.Role +"");
        }
    }
</script>

Get Json List

@Html.Action("GetPeoplePartial", new {selectedRole = Model })
FirstLastRole
@foreach (string role in Enum.GetNames(typeof(Role))) { }


为了简便演示,仅仅展示Json部分,笔者拿掉了Loading和Confirm的部分。

代码分析

代码的核心在于OnSuccess = "processData" 。

当Ajax请求成功时,指向processData函数,在这个函数里面,我们拿到id(JqueryId)为#tableBody的表单,清空,手动拼html,并用jquery添加到这个html control中。这部分可以优化,可以选择handlebar.js,knockout.js 等js template。

在table body中调用了@Html.Action("GetPeoplePartial",new {selectedRole = Model }),和前面的原因一样,为了第一次加载时显示出所有人员列表。

另外,AjaxOptions中还有其他Callback类型;

OnBegin : 发请求前

OnFailure :请求失败

OnSuccess :请求成功

OnComplete :请求完毕