首页 > 代码库 > 《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(上)