博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax辅助方法
阅读量:4947 次
发布时间:2019-06-11

本文共 3964 字,大约阅读时间需要 13 分钟。

      目前为止,我们已经考察了如何编写客户端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)  

     因为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)大作业中的管理员审核留言页面

未通过审核的留言管理

@{ 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") }@foreach (var item in Model){
@Html.DisplayNameFor(model => model.Name): @Html.DisplayFor(modelItem => item.Name)    
@Html.DisplayNameFor(model => model.PostTime): @Html.DisplayFor(modelItem => item.PostTime)
@Html.DisplayNameFor(model => model.Content): @Html.DisplayFor(modelItem => item.Content)
@Ajax.ActionLink("通过审核", "ConfirmPass", new { id = item.Id }, ajaxOptions1) | @Ajax.ActionLink("删除留言", "Delete", new { id = item.Id }, ajaxOptions2)
}

(2)使用Ajax获取当前时间

public ActionResult GetTime()        {            return Content(DateTime.Now.ToString("F"));        }
@Ajax.ActionLink("取得目前时间","GetTime",new AjaxOptions{UpdateTargetId="now"})

      这里有一点必须特别说明一下,就是通过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元素中。

 

转载于:https://www.cnblogs.com/meetyy/p/4119094.html

你可能感兴趣的文章