一、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 = $(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，因为它会形成更整洁的标记并且这也是微软未来的发展方向。