利用ajax技术可以帮助网站减少切换页面的机会,加快网速响应速度,降低网络下载流量,也能让用户经验更好。aspnet mvc中内建了ajax的辅助方法,可以方便快速的做到许多ajax互动效果。
在使用ajax之前,要在页面先载入jq以及mvc4.0专案模板内附的jquery.unobtrusive-ajax.js文件才能正常执行,
为了让网站载入适当的js函数库,必须现在Layout页面载入适当的js文件,事实上在mvc4..0的网际网路专案模板中已经在_Layout.cshtml页面上加入了jq载入,可以开启主版页面的最下方看到
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts",required:false)
第一句的意思就是载入专案里的jquery-1.7.1.js文件,因为ajax功能并不是每一页都需要使用,所以预设并没有载入,可以通过主版页面预留的@RenderSection区域来载入jquery.unobtrusive-ajax.js文件
如果需要在页面中使用ajax辅助方法
那么在这个页面最上方加上以下这段@section语法
@section scripts{
}
使用ajax超链接功能
ajax辅助方法会比html辅助方法多出一个AjaxOptions类型的参数,用来控制Ajax执行时的各种参数,
public ActionResult GetTime(){
return Content(Datetime.Now.ToString(F""))
}
@Html.ActionLink("取得目前时间",“GetTime”)
输出
<标签a href="/Home/GetTime">取得目前时间</标签a>
当这个超链接被点击后,会链接到另一个/Home/GetTime页面,如果希望改用ajax的方式动态地将/Home/GetTime网页的执行结果回传到目前网页的其中一个div里,那么可以这样改写
@Ajax.ActionLink("取得目前时间",“GetTime”,new AjaxOptions{UpdateTargetId = "now"})
<标签div id="now"></标签div>
输出
<标签a data-ajx="true" data-ajax-mode="replace" data-ajax-update="#now" href="/Home/GetTime"> 取得目前时间</标签a>
<标签div id="now"></标签div>
开启网页之后,点击这个超链接,浏览器便会自动取得/Home/GetTime网页的完整内容,并填入now的div块中。
注意:
通过ajax远端取得网页内容的过程中,浏览器会为了让执行效率提升,会预设通过ajax取得的网页内容只要ajax调用网址没有改变,且远端的http没有包含缓存相关标头,那么浏览器不会再次发出ajax要求,以刚刚的为例。,当第一次点击取得时会回传当下的服务器时间,当第二次点选同一个网址,案例应该看到更新的时间才对,但是结果却永远没法更新,除非清空浏览器缓存,
如果需要ajax回传的数据必须及时更新,那么就必须调整你的Action方法定义,新增一个OutputCache属性,强迫浏览器不要缓存这一页的要求
[OutputCache(NoStore=true,Duration=0)]
public ActionResult GetTime(){
return Content(Datetime.Now.ToString(F""))
}
使用ajax表单功能
比如原本是
@using(Html.BeginForm()){
若要改成ajax
@using(Ajax.BeginForm(new AjaxOptions{ UpdateTargetId="now"}))
@Ajax.ActionLink执行流程
1,用户单点击超链接
2,对超链接上的href属性定义的Action网址发出HTTP要求
3,取回内容后再将内容填入AjaxOptions物件的UpdateTargetId属性所指定的id元素中
@Ajax.BeginForm执行流程
1,用户送出表单
2,对表单元素上的action属性的Action网址发出http要求,并将表单所有数据传过去,
3,取回内容后再将内容填入ajaxOptions物件的UpdateTargetId属性所指定的id元素中。
了解AjaxOptions类型
无论使用Ajax.ActionLink 或者Ajax.BeginForm,都需要传入AjaxOptions的物件当参数,这个参数将决定asp.net mvc的ajax如何运作。
AjaxOptions属性名称
Confirm执行ajax之前会跳出一个确认对话框
HttpMethod设定http的设定方法
InsertionMode设定通过Ajax的辅助方法取回数据时,要如何将数据新增至UpfateTargetId(缩写为UTI)指定的元素中,有以下三种:
InsertionMOde.Replace:取代UTI的内容(预设)
InsertionMOde.InsertBefore:在UTI之前插入
InsertionMOde.InsertAfter 在UTI之后插入
LoadingElementId 在ajax尚未完成所有工作前显示的元素id值
OnBegin设定开始时要执行的js函数名称
OnComplete设定结束时要执行的js函数名称
OnFailure设定失败时执行的
OnSuccess 设定完成时要执行的js函数名称
UpdateTargetId设定回传值要显示在哪一个id上
URL 设定ajax的请求网址
当使用OnBegin,OnComplete,OnFailure,OnSuccess 这四个属性时,如果指定的函数名称不存在网页中,就会发生js错误
实例:
@Ajax.ActionLink("删除数据",“GetTime”,new {controller="Home",id=3,new AjaxOptions{OnSuccess="Delete" ,Confirm="您确定要删除吗?", HttpMethod="POST",LoadingElementId="ajaxLoad"}})
<<span >标签script标签>
function Delete(data){
alert(data);
}
</</span>标签script标签>