ASP.NET MVC使用Ajax的辅助的解决方法
前言:前面我们已经简单的介绍过了mvc如何jquery,因为我们如果使用ajax的话必须要了解jquery,这篇博客我们将大致了解一下asp.net mvc如何使用ajax的辅助方法,此博客是我的读书笔记,如果那里写的不好,还请各位朋友提出来,我们共同学习。
1.准备工作
(1)在mvc刚开始学习的时候,我们就需要介绍asp.net mvc框架中的html的辅助方法,但是这类文章现在已经很多了,而且个人感觉很简单,所以没有写笔记,我在这里就不介绍了。
(2)asp.net mvc框架中的html辅助方法,我们可以使用html辅助方法创建表单和指向控制器操作的链接,在asp.net mvc框架中还包含一组ajax辅助方法,它们也可以用来创建表单和指向控制器操作的连接,但不同的是它们是异步进行的,当使用这些辅助方法时,不用编写任何脚本代码来实现程序的异步性。
(3)在后台,这些ajax辅助方法依赖非侵入式mvc的jquery扩展,如果使用这些辅助方法,就需要引入脚本文件jquery.unobtrusive-ajax.js,至于怎么引用我在上篇博客已经说过了,这里就不贴出代码了。
2.ajax的actionlink方法
(1)在razor视图中,ajax辅助方法可以通过ajax属性访问,和html辅助方法类似,ajax属性上的大部分ajax辅助方法都是扩展方法(除了ajaxhelper类型之外)。
(2)ajax属性的actionlink方法可以创建一个具有异步行为的锚标签。现在我们可以在微软发布的mvc3.0的musicstore项目上面进行修改,谁如果没有这个项目的话可以加地下的群,然后再群共享里面我共享了这个项目。在视图”views/home/index.cshtml”中添加下面的代码。
<div id="dailydeal">
@ajax.actionlink("点击我", "dailydeal", new ajaxoptions
{
updatetargetid="dailydeal",
insertionmode = insertionmode.replace,
httpmethod="get"
})
</div>
(3)actionlink方法的第一个参数指定了连接文本,第二个参数是要异步调用的操作的名称,类似于同名的html辅助方法。对于html辅助方法和ajax辅助方法,显著不同的是ajaxoptions参数,该参数指定了发送请求和处理服务器返回结果的方法,参数中还包括用来处理错误,显示加载元素,显示确认对话框等的选项。为了得到服务器的响应,需要在控制器homecontroller上添加一个dailydeal操作,代码如下:
public actionresult dailydeal()
{
var album = getdailydeal();
return partialview("_dailydeal", album);
}
private album getdailydeal()
{
return storedb.albums.orderby(a => a.price).first();
}
(4)ajax操作连接的目标操作的返回值是纯文本或html。下面的razor代码就在项目的views/home文件夹下的_dailydeal.cshtml文件中。
注解:ajax.actionlink生成的内容能够获得服务器的响应,并可以直接将新内容移植到页面中,这时为什么呢?下面我们就介绍一下异步操作连接的工作原理。
3.html5特性
(1)如果我们查看actionlink方法渲染的标记,我们会看到如下代码:
<a data-ajax="true" data-ajax-method="get" data-ajax-mode="replace" data-ajax-update="#dailydeal" href="/home/dailydeal">点击我</a>
(2)非侵入式javascript的显著特点就是在html中不包含任何javascript代码,也就是说在html中看不到脚本代码,如果仔细看的话就会发现actionlink中指定的所有设置被编码成了html元素的特性,并且这些编码的大多数特性都有data-前缀,通常称之为data-特性。
(3)html 5规范为私有应用程序保留了data-特性,换句话说,web浏览器不会尝试解释data-特性的内容,因此可以放心的把自己的数据交给它,这些数据不会影响页面的显示或者渲染。
(4)向应用程序中添加jquery.unobtrusive-ajax文件的目的是查找特定的data-特性,然后操纵元素使其表现出不同的行为。
(5)所有的asp.net mvc ajax特性都使用data-特性。
4.ajax表单
(1)下面我们实现另外一种情形,要在音乐商店的首页为用户添加一个查找艺术家的功能,因为需要用户的输入,所以必须在页面上面放一个form标签,但这不是一个普通的标签,而是一个异步表单。下面这段代码我们看一下:
@using (ajax.beginform("artistsearch", "home", new ajaxoptions
{
insertionmode = insertionmode.replace,
httpmethod = "get",
onfailure = "searchfailed",
loadingelementid = "ajax-loader",
updatetargetid = "searchresults",
}))
{
<input type="text" name="q" />
<input type="submit" value="search" />
<img id="ajax-loader" src="@url.content("~/content/images/ajax-loader.gif")" style="display:none" />
}
(2)再要渲染的表单中,当用户单击提交按钮时,浏览器就会向控制器homecontroller的artistsearch操作发送异步get请求,注意上面的代码已经指定了loadingelementid作为其中的一个选项,当执行异步请求时,客户端框架会自动的显示这个元素,通常情况下,在这个元素内部会出现一个具有动画效果的微调框,来告知用户后台正在进行一些处理,此外,还有一个onfailure选项,这些选项包括许多参数,可以设置它们以捕获来自ajax请求的各种客户端事件,如onbegin,oncomplete,onsuccess和onfailure等,可以给这些参数赋予一个javascript函数的名称,当事件触发时,调用该函数,上面的代码就为onfailure指定了一个javascript函数,代码如下:
<script type="text/javascript">
function searchfailed() {
$("#searchresults").html("对不起,查询有问题");
}
</script>
(3)如果服务器代码返回一个错误,就意味着ajax辅助方法都执行失败了,此时,你可能想捕获onfailure事件,如果用户单击”search”按钮而页面没有反应,我们可能就会感到困惑,跟前面代码所做的一样,可以显示一个错误提示信息,至少让他们知道我们已经尽力了。
(4)辅助方法beginform的输出类似于辅助方法actionlink,最后,当用户单击提交按钮提交表单的时候,服务器会接受到一个ajax请求,并可能以任意格式的内容作出响应,当客户端收到来自服务器端的响应时,非侵入式脚本就会将相应的内容放入dom中。
(5)对于这个例子,控制器操作需要查询数据库并且渲染一个分部视图,此外,操作还要返回纯文本,但同时又想把艺术家放到一个列表中,因此,在homecontroler中写入如下的方法代码:
public actionresult artistsearch(string q)
{
var artists = getartists(q);
return partialview(artists);
}
private list<artist> getartists(string q)
{
return storedb.artists.where(a => a.name.contains(q)).tolist();
}
(6)该分部视图利用模型构建列表,它位于项目的views/home文件夹下的视图artistsearch.cshtml。
@model ienumerable<mvcmusicstore.models.artist>
@{
layout = null;
}
<!doctype html>
<html>
<head>
<title>artistsearch</title>
</head>
<body>
<div id="searchresults">
<ul>
@foreach (var item in model)
{
<li>@item.name</li>
}
</ul>
</div>
</body>
</html>
5.web.config文件里的ajax设置
(1)默认情况下,非侵入式javascript和客户端验证在asp.net mvc应用程序中是启用的,然后,我们可以通过web.config文件中的设置改变这些行为,如果打开新应用程序根目录下的web.config文件,就会看到下面的appsettings配置节点:
<appsettings>
<add key="webpages:version" value="1.0.0.0"/>
<add key="clientvalidationenabled" value="true"/>
<add key="unobtrusivejavascriptenabled" value="true"/>
</appsettings>
(2)如果想在整个应用程序中禁用这两个特性中的任意特性,只需要将响应特性的value值修改为false即可,另外,还可以逐视图是的控制这些设置,html辅助方法enableclientvalidation和enableunobtrusivejavascript在一个具体视图中重写了这些配置设置。
(3)由于现有的自定义脚本都是依赖与microsoft ajax库而不是jquery库,因此禁用这些特性的主要原因是维护应用程序的向后兼容性。
注:下篇mvc的博客我们将把注意力转向asp.net mvc框架的另外一个内置ajax特性-对客户端验证的支持。
作者:韩迎龙
出处:http://www.cnblogs.com/hanyinglong
上一篇: python进阶_浅谈面向对象进阶
推荐阅读
-
ASP.NET MVC使用Ajax的辅助的解决方法
-
使用asp.net的pageDataSource中时索引问题解决方法
-
ASP.NET MVC中解析淘宝网页出现乱码问题的解决方法
-
使用ASP.NET MVC 4 Async Action+jQuery实现消息通知机制的实现代码
-
基于asp.net下使用jquery实现ajax的解决方法
-
ASP.NET MVC使用Ajax的辅助的解决方法
-
使用asp.net的pageDataSource中时索引问题解决方法
-
ASP.NET MVC中解析淘宝网页出现乱码问题的解决方法
-
基于asp.net下使用jquery实现ajax的解决方法
-
asp.net updatepanel 导致JS不能加载,而无法使用的解决方法