ASP.NET MVC使用Ajax的辅助的解决方法
前言:前面我们已经简单的介绍过了MVC如何Jquery,因为我们如果使用Ajax的话必须要了解Jquery,这篇博客我们将大致了解一下ASP.NET MVC如何使用Ajax的辅助方法,此博客是我的读书笔记,如果那里写的不好,还请各位朋友提出来,我们共同学习。 复制代码 代码如下: <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生成的内容能够获得服务器的响应,并可以直接将新内容移植到页面中,这时为什么呢?下面我们就介绍一下异步操作连接的工作原理。 复制代码 代码如下: @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特性-对客户端验证的支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- asp.net-mvc-3 – 当两个网格位于同一页面时进行排序
- asp.net – 我的URL中的这些随机字符是什么?它们是如何实现
- 深蓝词库转换1.6发布
- asp.net-web-api – Ajax Post:405方法不允许
- asp.net-mvc – 编译错误“无法在Web部署项目中加载类型’S
- asp.net-mvc – mvc 4 beginform with route name
- asp.net-mvc – 用于表行的Asp.Net MVC WebGrid帮助器自定义
- asp.Net MVC视图模型在帖子上是空的
- asp.net 4路由不工作在iis 7
- asp.net – 实体框架5在保存时停止运行T4模板文件
- asp.net-mvc – 没有ViewContext的Url表单操作
- ASP.NET身份两个因素不起作用 – Cookie问题?
- asp.net-mvc – 使用没有主键的查找在dbSet中查找
- asp.net-mvc – 使用Automapper将字符串映射到枚
- asp.net-mvc – EF上下文管理
- asp.net – 在安全连接(HTTPS)中使用与SignalR的
- 一步步开发自己的博客 番外篇(7、异步记录日志
- .net – 如何将包含日期的字符串转换为其他格式?
- asp.net-mvc – 强大的html帮助程序,具有不同的g
- entity-framework-4 – 在多层体系结构中使用Aut