MVC之Ajax如影随行
作者: 发布日期:2014-07-04 22:40:45
Tag标签:MVC之Ajax如影随行
一、Ajax的前世今生
我一直觉得google是一家牛逼的公司,为什么这样说呢?《舌尖上的中国》大家都看了,那些美食估计你是百看不厌,但是里边我觉得其实也有这样的一个哲学:关于食材,对于种食材的菜农来讲,可能它的价值就是卖到市场上而已;而对于大厨们来讲,却可以像变魔术一样将不起眼的食材变成美味佳肴。大厨们不拥有食材,但他们却可以恰到好处的搭配使用它们,这就是他们的精明之处。而google同样是IT界的大厨:java诞生了这么多年,却没有被充分利用,而google却用它搞出来了震惊世界的Android; HTML、XML、Javascript这些个东东都不是google发明的吧,但却是google却用它们发明了Ajax, google earth、google suggest以及gmail等ajax技术的广泛应用,向这个世界带来了ajax技术,从此ajax与web再也不能分离。这里也向我们程序猿提了个醒:如果不能把所学的各种技术转化为money或者生产力,那么一切都是扯淡!
精确的说,ajax并不能提高从服务器端下载数据的速度,而只是使这个等待不那么令人沮丧,这就是所谓的用户体验了,但就这一点就足以产生巨大的影响和震动,因为它已经革了c/s东东的命,它无疑是WEB时代的宠儿~
Ajax的给我们带来的好处大家基本上都深有体会,略表一二:
1、最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。
2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
缺点也有,但是瑕不掩瑜,所以还是要用!ASP.NET MVC作为微软的当家利器自然也要拥抱Ajax了,这里就说说他们之间那些事儿!
二、ASP.NET MVC之Ajax
这里不会用原生的Ajax的,其实我连说都不想说,土的掉渣,更别提那个微软自己的那个已经玩完的Ajax框架了,所以下面的Ajax都不是原生的。
1、基于AjaxHelper的AjaxMVC框架本身提供了AjaxHelper类用于Ajax异步请求,所以如果你想省事,就用这种方式吧~
AjaxHelper帮助器方法:
Helper method
Description
Ajax.ActionLink
Creates a hyperlink to a controller action that fires an Ajax request when clicked
Ajax.RouteLink
Similar to Ajax.ActionLink, but generates a link to a particular route instead of a named controller action
Ajax.BeginForm
Creates a form element that submits its data to a particular controller action using Ajax
Ajax.BeginRouteForm Similar to Ajax.BeginForm, but creates a form that sub- mits its data to a particular route instead of a named control- ler action
Ajax.GlobalizationScript Creates an HTML script element that references a script that contains culture information
Ajax.JavaScriptStringEncode Encodes a string to make sure that it can safely be used inside JavaScript
上面的方法貌似很多,但是实际开发中用到的就两个帮助器方法而已:
Ajax.ActionLink()和Ajax.BeginForm()
这里有个问题:怎样让项目知道我们用的是MVC自带的Ajax呢?
SO EASY:
A、在Web.config里边配置:
<add key="UnobtrusiveJavaScriptEnabled" value="true" />B、在页面中引用下面的js类库即可:
@section scripts{ <script type="text/javascript" src=" @Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script> }一般更为常见的是在布局页/Views/Shared/_Layout.cshtml 中引入,例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width" /> <title>@ViewBag.Title</title> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> </head> <body> @RenderBody() </body> </html>Ajax.ActionLink():
向客户端输出一个链接地址,当单击这个链接时可以Ajax调用Controller中的方法,Ajax.ActionLink()方法有许多重载,下面是其重载之一:
public static string ActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, object routeValues, AjaxOptions ajaxOptions);
linkText:是显示在客户端的文本
actionName:是Action的名字,默认情况下我们会使用当前的Controller。
routeValues:将传入到Controller中方法的参数
ajaxOptions:配置Ajax的一些选项
Confirm
获取或设置提交请求之前,显示在确认窗口中的消息。
HttpMethod
获取或设置 HTTP 请求方法(“Get”或“Post”)。
InsertionMode
获取或设置指定如何将响应插入目标 DOM 元素的模式。LoadingElementId
获取或设置加载 Ajax 函数时要显示的 HTML 元素的 id 特性。
OnBegin
获取或设置更新页面之前,恰好调用的 JavaScript 函数的名称。
OnComplete
获取或设置实例化响应数据之后但更新页面之前,要调用的 JavaScript 函数。
OnFailure
获取或设置页面更新失败时,要调用的 JavaScript 函数。
OnSuccess
获取或设置成功更新页面之后,要调用的 JavaScript 函数。
UpdateTargetId
获取或设置要使用服务器响应来更新的 DOM 元素的 ID。
Url
获取或设置要向其发送请求的 URL。