34-Ajax辅助方法
Ajax是Asynchronous JavaScript and XML的缩写,是目前非常热门的网页开发技术之一,利用Ajax开发技术可以帮助网站减少切换页面的机会、加快网页响应速度、降低网络下载流量,也能让用户经验变得更好,ASP.NET MVC内建了Ajax辅助方法,可以帮助开发人员快速且方便地做到许多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>
在预设的母版页面中,@Scripts.Render("~/bundles/jquery")就是载入项目里的“Scripts\jquery-1.8.2.js”文件。而Ajax功能并不是每一页都要使用,所以预设并没有载入,可以通过@RenderSection区域来载入jquery.unobtrusive-ajax.js文件。
如果需要在页面中使用ASP.NET MVC的Ajax辅助方法,那么可以在每个需要使用Ajax辅助方法的页面最下方加上以下这段@section语法:
@section Scripts {
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
}
1.使用Ajax超链接功能
使用Ajax辅助方法和使用HTML辅助方法非常类似,但Ajax辅助方法会比HTML辅助方法多出一个AjaxOptions类型参数,用来控制Ajax执行时的各种参数,稍后马上会提到这个部分。
我们先以输出超链接来做比较,在撰写View之前,先在HomeController里面新增一个GetTime动作方法,代码如下:
public ActionResult GetTime()
{
return Content(DateTime.Now.ToString("F"));
}
先前学过的Html.ActionLink辅助方法用来输出一个超链接,语法如下:
@Html.ActionLink("取得目前时间", "GetTime")
这段语法的HTML输出如下:
<a href="/Home/GetTime">取得目前时间</a>
当这个超链接被点击后,会链接到另一个/Home/GetTime页面,如果希望改用Ajax的方式动态地将/Home/GetTime网页的执行结果回传到目前网页的其中一个div里,那么可以改写成如下方式:
@Ajax.ActionLink("取得目前时间","GetTime",new AjaxOptions{UpdateTargetId="now"}) <div id="now"></div> @section Scripts {
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
}
这段代码的HTML输出如下:
<a data-ajax="true" data-ajax-mode="replace" data-ajax-update='#now" href="/Home/GetTime>取得目前时间</a> <div id="now"></div>
当网页开启后,单击“取得目前时间”超链接后,浏览器便会自动取得/Home/GetTime网页的完整内容,并将内容直接填入名为now的div区块里。
第一次使用Ajax辅助方法可能会觉得@Ajax.ActionLink输出的HTML怎么这么奇怪?连一行JavaScript都没有,只在<a>标签上加了几个data-*属性而已,而且功能竟然都还能正常执行。是的,这是一种JavaScript的撰写风格,称为“Unobtrusive JavaScript”,且ASP.NET MVC 4预设就是使用这种风格来执行各式Ajax功能。
这里有一点必须特别说明一下,就是通过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表单功能
在上一小节中,Ajax超链接是通过超链接启动Ajax功能,而使用Ajax表单功能也非常类似,例如,以下使用Html.BeginForm的辅助方法:
@using(Html.BeginForm()){
若改用Ajax辅助方法,可以改成以下语法:
@using(Ajax.BeginForm(new AjaxOptions{ UpdateTargetId="now"})){
完整代码如下:
@using (Ajax.BeginForm("GetTime",new AjaxOptions { UpdateTargetId = "now" }))
{
<input type="submit" value="取得当前时间" />
} <div id="now"></div> @section Scripts {
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
}
3.了解AjaxOptions类型
无论你使用Ajax.ActionLink或Ajax.BeginForm,都需要传入AjaxOptions类型的对象当参数,这个参数将决定ASP.NET MVC的Ajax如何运作。下表所示说明了AjaxOptions各属性所代表的意义。
Ajax属性名称 | 说明 |
Confirm | 执行Ajax之前会先跳出一个确认对话框 |
HttpMethod | 设定HTTP要求的方法(GET或POST) |
InsertionMode |
设定通过Ajax辅助方法取回数据时,要如何将数据新增至UpdateTargetId指定的元素中,有以下三种方法。 InsertionMode.Replace:取代UpdateTargetId的内容。(默认) InsertionMode.InsertBefore:在UpdateTargetId之前插入。 InsertionMode.InsertAfter:在UpdateTargetId之后插入。 |
LoadingElementId | 在Ajax尚未完成所有工作前显示的元素Id值 |
OnBegin | 设定开始时要执行的JavaScript函数名称 |
OnComplete | 设定结束时要执行的JavaScript函数名称 |
OnFailure | 设定失败时要执行的JavaScript函数名称 |
OnSuccess | 设定完成时要执行的JavaScript函数名称 |
UpdateTargetId | 设定回传值要显示在哪一个ID上 |
Url | 设定Ajax表单提交的Url |
当使用OnBegin、OnComplete、OnFailure、OnSuccess这四个属性时,如果指定的函数名称不存在于网页中,就会发生JavaScript错误,初学者很有可能因为这个错误找不到原因而放弃使用内建的Ajax辅助方法。
4.案例:留言管理系统中审核留言的应用
@{
var ajaxOptions = new AjaxOptions()
{
OnSuccess = "SetPassSuccess",
OnFailure = "SetPassFailure",
Confirm = "设置留言审核状态为'通过'?",
HttpMethod = "Post"
};
} @section scripts
{
@Scripts.Render("~/bundles/jqueryval")
<script>
function SetPassSuccess() {
alert('审核通过');
location.reload();
}
function SetPassFailure(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)
<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 }, ajaxOptions)<br />
<br />
</div>
}
以上为视图代码,控制器代码如下。
public ActionResult ConfirmPass(int id)
{
Message message = db.Messages.Find(id);
message.IsPass = "True"; db.SaveChanges(); return new HttpStatusCodeResult(System.Net.HttpStatusCode.OK);
}
34-Ajax辅助方法的更多相关文章
- Ajax辅助方法
目前为止,我们已经考察了如何编写客户端JavaScript代码,以发送并接受服务器的数据.然而,在使用ASP.NET MVC时,还有另一种方法可用来执行Ajax调用,这就是Ajax辅助方法. Ajax ...
- [MVC]Ajax辅助方法
在开始使用Ajax辅助方法前,必须在页面中载入jQuery以及jquery.unobtrusive-ajax.js文件才能正常执行. 为了让网站载入适当的JS函数库,必须先让Layout页面载入适当的 ...
- 表单和 HTML 辅助方法– ASP.NET MVC 4 系列
这里有一个疑问,诸如在文本编辑器中输入 HTML 元素如此简单的任务,也需要任何帮助吗?的确,输入标签名称是很容易的事,但是确保 HTML 页面链接中的 URL 指向正确的位置.表单元素 ...
- Ajax.ActionLink()方法的使用
第一句话都会这么去写:程序猿就是苦逼,除了开发还要会写博文!哎,今天就和大家一起讨论下Ajax的辅助方法ActionLink的使用,如果有讲的不好的地方或错的地方,请大家务必扔板砖,要投准哦,砸死我算 ...
- ASP.NET MVC 3 之表单和 HTML 辅助方法(摘抄)
——选自<ASP.NET MVC3 高级编程(第5章) 孙远帅 译> 第5章 表单和HTML辅助方法 本章内容简介: * 理解表单 * 如何利用HTML辅助方法 * 编辑和输入的辅助方法 ...
- ASP.NET MVC5 高级编程 第5章 表单和HTML辅助方法
参考资料<ASP.NET MVC5 高级编程>第5版 第5章 表单和HTML辅助方法 5.1 表单的使用 5.1.1 action 和 method 特性 默认情况下,表单发送的是 HTT ...
- ASP.NET MVC3学习心得-----表单和HTML辅助方法
5.1表单的使用 5.1.1 action和method的特性 表单是包含输入元素的容器,包含按钮.复选框.文本框等元素,表单的这些输入元素使得用户能够向页面中输入信息,并把输入信息提交给服务器.A ...
- ASP.NET MVC5高级编程 之 HTML辅助方法
Html属性调用HTML辅助方法,Url属性调用URL辅助方法,Ajax属性调用Ajax辅助方法. HTML辅助方法 1.Html.BeginForm @using (Html.BeginForm(& ...
- ASP.NET MVC5 学习系列之表单和HTML辅助方法
一.表单 (一)Action和Method特性 Action特性用以告知浏览器信息发往何处,因此,Action特性后面需要包含一个Url地址.这里的Url地址可以是相对的,也可以是绝对的.如下Form ...
随机推荐
- django cycle标签
django 模板系统 有很多标签,其中cycle我觉得不好理解,至少网上文档也不好理解. 这些标签可以通过渲染模板文件而获得我们预期的效果和文字,常用的有如下这些标签: 标签:{% 标签名 %}{% ...
- Struts2的标签库(三)——控制标签
Struts2的标签库(三) --控制标签 1.if/elseif/else标签 用于分支控制,取代JSP中的if语句,根据一个boolean(test属性的值)值判断是否进行下一步运算或者输出等. ...
- c++ stl string char* 向 string 转换的问题
请看下面代码 string AddString(const string& a,const string & b) { return a + b; } int _tmain(int a ...
- 异步设备IO 《windows核心编程》第10章学习
异步IO操作与同步操作区别: 在CreateFile里的FILE_FLAG_OVERLAPPED标志 异步操作函数LPOVERLAPPED参数 接收IO请求完成通知 触发设备内核对象 缺点:同一个设备 ...
- Django中的分页
直接看代码吧,还算比较简单: 先确认数据量有多少 根据页面显示数据的多少来分割数据,得到页面的开始数据和结束数据 根据开始和截止数据去切片数据,并且得到总共的页码数 根据一页显示多少页码和当前页码数, ...
- CG基础教程-陈惟老师十二讲笔记
转自 麽洋TinyOcean:http://www.douban.com/people/Tinyocean/notes?start=50&type=note 因为看了陈惟十二讲视频没有课件,边 ...
- flex布局注意点:
1.父元素display:flex之后成为伸缩容器,子元素(除了position:absolute或fixed)无论是display:block或者display:inline,都成为了伸缩项目.2. ...
- 关于Ubuntu中passwd、shadow、group等文件
在Ubuntu系统中,/etc目录下,有三个文件:passwd shadow group,可能我们已经在用了,但是没有注意到其详细. 这三个配置文件用于系统帐号管理,都是文本文件,可用vi等文本编辑器 ...
- Scrum Meeting---Two(2015-10-26)
这次会议主要有两个方面 一.讨论项目 经过我们团队的激烈讨论,我们团队决定专注于做二手交易这一块.即将之前决定要做的学习经验交流以及校园交由这两块删除. 二.后两天的任务规划 以下便是我们的任务规划: ...
- web设计经验<三>值得你深入了解的交互设计5大支柱
随着单页式设计和移动端的兴起,网页中的交互设计越来越重要了.为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解. 正如同我们在<交互设计最佳实践(卷1)>中所述,要做好交互设计 ...