Ajax辅助方法

目前为止，我们已经考察了如何编写客户端JavaScript代码，以发送并接受服务器的数据。然而，在使用ASP.NET MVC时，还有另一种方法可用来执行Ajax调用，这就是Ajax辅助方法。

Ajax是Asynchronous JavaScript and XML的缩写，是目前非常热门的网页开发技术之一，利用Ajax开发技术可以帮助网站减少切换页面的机会、加快网页响应速度、降低网络下载流量，也能让用户经验变得更好。ASP.NET MVC内建了Ajax辅助方法，可以帮助开发人员快速且方便地做到许多Ajax互动效果。

这些可用的辅助方法是AjaxHelper类的扩展方法，可以用来生成自动用Ajax发送并接受数据的标记，如下表所示。

辅助方法	描述
Ajax.ActionLink	创建一个发送到控制器动作的超链接，点击时触发Ajax请求。
Ajax.RouteLink	类似于Ajax.ActionLink，但生成的是一个发送到特定路由而不是控制器动作的链接。
Ajax.BeginForm	创建一个表单，它使用Ajax将其数据提交给一个特定的控制器动作。
Ajax.BeginRouteForm	类似于Ajax.eginForm，但创建的是一个将其数据提交给特定路由而不是控制器动作的表单。
Ajax.GlobalizationScript	创建一个HTML的script元素，它引用一个含有文化信息的脚本。
Ajax.JavaScriptStringEncode	对字符串进行编码，以确保在JavaScript中能安全使用。

1.使用Ajax的前提  

在开始使用Ajax辅助方法之前，必须要先在页面中载入jQuery以及ASP.NET MVC4项目模板内附的jquery.unobtrusive-ajax.js文件才能正常执行。

为了让网站载入适当的JavaScript函数库，必须先在Layout页面载入适当的JavaScript文件才行。事实上，在ASP.NET MVC4的Internet模板中已经在_Layout.cshtml页面中加上了jQuery载入，可以开启母版页面的最下方看到以下这段：

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

因为Ajax功能并不是每一页都需要使用，所以预设并没有载入，可以通过layout模板中的@RenderSection区域来载入jquery.unobtrusive-ajax.js文件。如果需要在页面中使用ASP.NET MVC的Ajax辅助方法，那么可以在每个需要使用Ajax辅助方法的页面最上方加上以下这段@section语法：

@section Scripts {
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
}

2.使用Ajax超链接功能Ajax.ActionLink()

在客户端创建一个超链接，当单击这个超链接时可以异步调用控制器中的方法。

public static string ActionLink(tis AjaxHelper ajaxelper, string linkText, string actionName, 
        object routeValues, AjaxOptions ajaxOptions);

使用Ajax辅助方法和使用HTML辅助方法非常类似，但Ajax辅助方法会比HTML辅助方法多出一个AjaxOptions类型参数，用来控制Ajax执行时的各种参数。可用的AjaxOptions选项如下表所示。

选项	描述
Confirm	等效于JavaScript中的return confirm(msg)，在单击该链接时先提示需要确认的信息
HttpMethod	指定使用Get或Post方式发送Http请求
InsertionMode	指定使用哪一种方式在指定的UpdateTargetId元素更新数据，可以有三种方式InsertAfter、InsertBefore、Replace。默认为Replace。
LoadingElementDuration	Loading元素显示的时间
LoadingElementId	可以指定在Http请求期间显示的Loading元素
OnBegin	在Http请求之前执行的javaScript方法
OnComplete	在Http请求结束时执行的方法
OnFailure	在Http请求失败时执行的方法
OnSuccess	在Http请求成功时执行的方法
UpdateTargetId	Http请求更新的页面元素
Url	Http请求的Url

（1）大作业中的管理员审核留言页面

<h2>未通过审核的留言管理</h2>

@{
    var ajaxOptions1 = new AjaxOptions()
    {
        OnSuccess = "SetPassSuccess",
        OnFailure = "SetPassFailure",
        Confirm = "设置留言审核状态为'通过'？",
        HttpMethod = "Post"
    };

    var ajaxOptions2 = new AjaxOptions()
    {
        OnSuccess = "DeleteSuccess",
        OnFailure = "DeleteFailure",
        Confirm = "确认要删除留言？",
        HttpMethod = "Post"
    };
}

@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        function SetPassSuccess() {
            alert('审核通过');
            location.reload();
        }
        function SetPassFailure(xhr) {
            alert('审核失败（HTTP状态代码：' + xhr.status + ')');
        }
        function DeleteSuccess() {
            alert('成功删除建议');
            location.reload();
        }
        function DeleteFailure(xhr) {
            alert('删除留言失败（HTTP状态代码：' + xhr.status + ')');
        }
    </script>
}

@foreach (var item in Model)
{
    <div class="box" style="border-bottom: 1px solid black;">
        <br />
        <b>@Html.DisplayNameFor(model => model.Name):</b>
        @Html.DisplayFor(modelItem => item.Name)&nbsp;&nbsp;&nbsp;&nbsp;
        <b>@Html.DisplayNameFor(model => model.PostTime):</b>
        @Html.DisplayFor(modelItem => item.PostTime)<br />
        <b>@Html.DisplayNameFor(model => model.Content):</b>
        @Html.DisplayFor(modelItem => item.Content)<br />
        <br />

        @Ajax.ActionLink("通过审核", "ConfirmPass", new { id = item.Id }, ajaxOptions1) |
        @Ajax.ActionLink("删除留言", "Delete", new { id = item.Id }, ajaxOptions2)

        <br />
        <br />
    </div>
}

（2）使用Ajax获取当前时间

public ActionResult GetTime()
        {
            return Content(DateTime.Now.ToString("F"));
        }

@Ajax.ActionLink("取得目前时间","GetTime",new AjaxOptions{UpdateTargetId="now"})

<div id="now"></div>

这里有一点必须特别说明一下，就是通过Ajax远端取得网页内容的过程。浏览器为了让执行效率提升，会预设通过Ajax取得的网页内容只要Ajax调用网址没有改变，且远端的HTTP没有包含缓存相关标头（Headers），那么浏览器就不会再次发出Ajax请求。以上述Ajax.ActionLink辅助方法输出的结果为例，当第一次点击取得/Home/GetTime时会回传当下的服务器时间，当第二次点击同一个网址，按理说应该看到内容更新才对，但结果却永远无法更新，除非你清空浏览器缓存。 如果你的Ajax回传的数据必须即时更新，那么，就必须调整你的Action方法定义，新增一个OutputCache属性（Attribute)，强迫浏览器不要缓存这一页的请求，范例如下：

        [OutputCache(NoStore=true,Duration=0)]
        public ActionResult GetTime()
        {
            return Content(DateTime.Now.ToString("F"));
        }

2.使用Ajax表单功能

@using(Ajax.BeginForm(new AjaxOptions{UpdateTargetId="now"}))

用户送出表单，对<form>表单元素上的action属性的Acion网址发出Http要求，并将表单所有数据传过去。取回内容后再将内容填入AjaxOptions的UpdateTargetId属性所指定的id元素中。