首页 > 代码库 > 《ASP.NET MVC 4 实战》学习笔记 7:Ajax(上)

《ASP.NET MVC 4 实战》学习笔记 7:Ajax(上)

一、jQuery的Ajax:

1.使用jQuery形成Ajax请求:

1)新建AjaxExamples项目,添加CustomAjax控制器:

namespace AjaxExamples.Controllers{    public class CustomAjaxController : Controller    {        public ActionResult Index()        {            return View();        }        public ActionResult PrivacyPolicy()        {            return PartialView();        }    }}

 2)添加自定义jQuery代码:

$(document).ready(function () {    $(‘#privacyLink‘).click(function (event) {        event.preventDefault();        var url = $(this).attr(‘href‘);        $(‘#privacy‘).load(url);    });});

3)添加PrivacyPolicy部分视图:

<h2>保密策略</h2>要保密哦~~

4)添加Index视图:

@Html.ActionLink("显示保密策略", "PrivacyPolicy", null, new {id="privacyLink"})<div id="privacy"></div><script type="text/javascript"        src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>   @*默认layout视图已经引入jQuery但是,运行报错,故再次引入*@<script type="text/javascript"        src="@Url.Content("~/Scripts/AjaxDemo.js")"></script>

如果用户禁用了javascript上述页面将会转向PrivacyPolicy页面,但是由于PrivacyPolicy动作返回的是部分视图所以很不美观,要解决此问题可以修改PrivacyPolicy动作:

public ActionResult PrivacyPolicy()        {            if (Request.IsAjaxRequest())//检查是否Ajax调用            {                return PartialView();            }            return View();        }

2.使用Ajax提交表单数据:

1)引入AddComment动作:

namespace AjaxExamples.Controllers{    public class CustomAjaxController : Controller    {        private static List<string> _comments = new List<string>();//保存评论列表        public ActionResult Index()        {            return View(_comments);        }        public ActionResult PrivacyPolicy()        {            if (Request.IsAjaxRequest())//检查是否Ajax调用            {                return PartialView();            }            return View();        }        [HttpPost]        public ActionResult AddComment(string comment)        {            _comments.Add(comment);//保存新评论            if (Request.IsAjaxRequest())            {                ViewBag.Comment = comment;                return PartialView();//将评论发送给视图            }            return RedirectToAction("Index");        }    }}

2)添加AddComment部分视图:

<li>@ViewBag.Comment</li>

3)修改Index视图:

@model IEnumerable<string><ul id="comments">    @foreach (var comment in Model)    {        <li>@comment</li>    }</ul>@using (Html.BeginForm("AddComment", "CustomAjax", FormMethod.Post, new { id = "commentForm" })){    @Html.TextArea("Comment", new { rows = 5, cols = 50 })    <br />    <input type="submit" value="添加评论" />}<script type="text/javascript"        src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>   @*默认layout视图已经引入jQuery但是,运行报错,故再次引入*@<script type="text/javascript"        src="@Url.Content("~/Scripts/AjaxDemo.js")"></script>

4)修改AjaxDemo.js:

$(document).ready(function () {    $(‘#commentForm‘).submit(function (event) {        event.preventDefault();        var data = http://www.mamicode.com/$(this).serialize();//将表单序列化成字符串        var url = $(this).attr(‘action‘);        $.post(url, data, function (response) {            $(‘#comments‘).append(response);//将结果追加到评论列表        });    });});

 二、ASP.NET MVC的Ajax辅助器:

1.Ajax.ActionLink:

1)为项目添加jquery.unobtrusive-ajax.js:在程序管理包管理器控制台输入Install-Package Microsoft.jQuery.Unobtrusive.Ajax –version 3.0.0

2)修改Index视图:

@Ajax.ActionLink("显示保密策略", "PrivacyPolicy", new AjaxOptions{InsertionMode = InsertionMode.Replace, UpdateTargetId = "privacy"})<div id="privacy"></div><script type="text/javascript"        src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>   @*默认layout视图已经引入jQuery但是,运行报错,故再次引入*@<script type="text/javascript"        src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>

 启动调试查看页面中生成的HTML如下:

<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#privacy" href="/CustomAjax/PrivacyPolicy">显示保密策略</a>

data-ajax标签属性用来指示超链接异步执行,data-ajax-mode和data-ajax-update对应AjaxOptions对象。

当页面加载时jquery.unobtrusive-ajax中的脚本将找出所有带有data-ajax标签属性的链接,并附加一个点击事件。同样,如果浏览器禁用javascript该链接所表现的功能如同一个常规的超链接。

2.Ajax.BeginForm:

修改Index视图:

<ul id="comments"></ul>@using (Ajax.BeginForm("AddComment", new AjaxOptions { UpdateTargetId = "comments", InsertionMode = InsertionMode.InsertAfter })){    @Html.TextArea("Comment",new {rows=5,cols=50})    <br />    <input type="submit" value="添加评论" />}<script type="text/javascript"        src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>   @*默认layout视图已经引入jQuery但是,运行报错,故再次引入*@<script type="text/javascript"        src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>

3.Ajax选项:

4.与ASP.NET MVC早期版本的差别:

虽然自第一版本起Ajax辅助器已经是ASP.NET MVC的部件了,但现在jQuery是默认的。在以前版本的框架中这些辅助器总是使用微软的Ajax库并且未以渐进式方式生成javascript。你可以在web.config文件的AppSettings部分将UnobtrusiveJavaScriptEnabled设置为false便会恢复到以前的行为。

现在如果调用Ajax.ActionLink会生成以下标记:

<a href="/CustomAjax/PrivacyPolicy" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: ‘privacy‘ });">显示保密策略</a>

它并未使用data-ajax标签属性,而是所有元数据均被放在onclick事件中。这也要求你引用MicrosoftAjax.js和MicrosoftMvcAjax.js脚本才能使其正常工作。由于在元素的onclick标签属性中直接包含了方法调用,这也打断了渐进式javascript原则。

如果你正在对ASP.NET MVC 早期版本的网站进行升级,为了保持向后兼容性你可能需要这种行为。但是在所有其他情况下,最好将UnobtrusiveJavaScriptEnabled设置为ture,因为它会形成更整洁的标记并且这也是微软未来的发展方向。

《ASP.NET MVC 4 实战》学习笔记 7:Ajax(上)