ASP.NET MVC使用Ajax作为辅助解决方案

我们已经简单介绍了MVC如何做Jquery，因为如果我们使用Ajax，我们必须了解Jquery。在这个博客中，我们将对ASP.NET的MVC如何使用Ajax作为辅助方法有一个大致的了解。这个博客是我的读书笔记。如果那里写得不好，请你的朋友提出来，我们一起学习。1.准备(1)在MVC学习之初，我们需要介绍ASP.NET MVC框架中HTML的辅助方法，但是现在这样的文章很多，而且个人感觉很简单，所以没有写笔记，这里就不介绍了。(ASP中的HTML辅助方法。NET MVC框架，我们可以使用HTML辅助方法创建指向控制器操作的表单和链接，以及2)ASP。NET MVC框架还包含一组Ajax辅助方法，也可以用来创建指向控制器操作的表单和连接，但不同的是它们是异步的。当使用这些辅助方法时，我们不需要编写任何脚本代码来实现程序的异步。(3)在后台，这些Ajax辅助方法依赖于非侵入式MVC的Jquery扩展。如果使用这些辅助方法，就需要引入脚本文件jquery . include-Ajax . js。至于如何引用我在上一篇博客中说的话，代码就不贴在这里了。2.Ajax的ActionLink方法(1)在Razor视图中，可以通过Ajax属性访问AJAX辅助方法。与HTML辅助方法类似，Ajax属性上的大多数Ajax辅助方法都是扩展方法(AjaxHelper类型除外)。(2)2)Ajax属性的ActionLink方法可以创建一个具有异步行为的锚点标签。现在，我们可以修改微软发布的MVC3.0的MusicStore项目。没有这个项目的人可以添加一个地下小组，然后在小组中共享这个项目。在视图“视图/主页/索引. cshtml”中添加以下代码。复制的代码如下： div id=' daily dal ' @ Ajax . action link('点击我'，' daily dal '，new ajaxo options { updatetargetid=' daily dal '，insertionmode=insertionmode . replace，Httpmethod=' get ' })/div(3)action link方法的第一个参数指定连接文本，第二个参数是异步调用的操作名称，类似于同名的HTML辅助方法。HTML助手方法和Ajax助手方法的明显区别是AjaxOptions参数，它指定了发送请求和处理服务器返回结果的方法。这些参数还包括用于处理错误、显示加载元素和显示确认对话框的选项。为了得到服务器的响应，需要在控制器HomeController上增加一个DailyDeal操作，代码如下：复制代码如下：公众行动结果每日交易(){var album=get每日交易()；返回partial view(' _ dailydal '，相册)；}私人相册getdailydal(){ return storeDB。专辑.订购方(a=a .价格)。first()；}(4)Ajax操作连接的目标操作返回值为纯文本或HTML。以下Razor代码位于项目视图/主文件夹下的_ DailyDeal.cshtml文件中。

注意：Ajax生成的内容。ActionLink可以得到服务器的响应，新的内容可以直接移植到页面上。为什么呢？下面我们来介绍一下异步操作连接的工作原理。3.HTML5特性(1)如果我们查看ActionLink方法呈现的标记，我们将看到以下代码：a data-Ajax=' true ' data-Ajax-method=' get ' data-Ajax-mode=' replace ' data-Ajax-update=' # dailydal ' href='/home/dailydal '单击me /a(2)。非侵入式JavaScript的显著特点是在HTML中不包含任何JavaScript代码，也就是说在HTML中看不到任何脚本代码。如果你仔细观察，你会发现ActionLink中指定的所有设置都被编码到HTML元素的特征中，这些编码的特征大多有数据前缀，通常称为数据特征。(HTML5规范保留了私有应用程序的数据特性。换句话说，网络浏览器不会试图解释数据特征的内容，因此它可以安全地移交自己的数据，这不会影响页面的显示或呈现。(4)向应用程序中添加jquery . include-Ajax文件的目的是找到特定的数据特征，然后操纵元素来显示不同的行为。(5)所有ASP.NET MVC Ajax特性都使用数据特性。4.Ajax表单(1)接下来，我们实现另一种情况。我们想在音乐商店的首页增加寻找艺术家的功能。因为需要用户输入，所以我们必须在页面顶部放置一个表单标签，但这不是一个普通的标签，而是一个异步表单。我们来看看下面的代码：复制的代码如下： @ using(Ajax . beg inform(' artistsearch '，' home '，new Ajax options { insertionmode=insertionmode . replace，http方法=' get '，OnFailure='searchFailed '，loadingelementtid=' Ajax-loader '，UpdateTargetId='searchresults '，}){ input type=' text ' name=' q '/input type=' submit ' value=' Search '/img id=' Ajax-results ')内容(' ~/Content/Images/Ajax-loader . gif ')' style=' display : none '/}(2)在要再次呈现的表单中，当用户单击提交按钮时，浏览器将向控制器HomeController的ArtistSearch操作发送异步GET请求。请注意，上面的代码已经将LoadingElementId指定为选项之一。当执行异步请求时，客户端框架将自动显示该元素。通常，在这个元素中会出现一个带有动画效果的微调框，通知用户一些处理正在后台进行。此外，还有一个OnFailure选项，其中包括许多参数。它们可以设置为从Ajax请求中捕获各种客户端事件，如OnBegin、OnComplete、OnSuccess和OnFailure等。这些参数可以被赋予一个JavaScript函数的名称。当事件被触发时，函数被调用，上面的代码为OnFailure指定了一个JavaScript函数。代码如下：脚本类型=' text/JavaScript '函数搜索失败(){$ ('# searchresults ')。html(‘对不起，查询有问题’)；}/script(3)如果服务器代码返回错误，则表示所有AJAX辅助方法都没有执行成功。此时，您可能想要捕获OnFailure事件。如果用户点击“搜索”按钮，页面没有响应，我们可能会感到困惑。就像前面的代码一样，可以显示一条错误消息，至少让他们知道我们已经尽力了。(4)辅助方法BeginForm的输出类似于辅助方法ActionLink。最后，当用户单击提交按钮提交表单时，服务器将收到一个Ajax请求，并可能以任何格式做出响应。当客户端收到服务器的响应时，非侵入式脚本会将相应的内容放入Dom。

(5)对于这个例子，控制器操作需要查询数据库并呈现部分视图。此外，操作还需要返回纯文本，但同时，它希望将艺术家放在列表中。因此，在HomeControler中编写了以下方法代码：复制代码如下：公开行动结果艺术家搜索(字符串q){ var artists=get artists(q)；返回PartialView(艺术家)；} private ListArtist GetArtists(字符串q){return storeDB。艺术家。其中(a=a.Name.Contains(q))。to list()；}(6)局部视图使用模型构建一个列表，该列表位于项目的view/Home文件夹下的view ArtistSearch.cshtml中。复制的代码如下： @ model ienumerablevsicstore . models . artist @ { layout=null；}!DOCTYPE html 5 . web.config文件中的html html html head title art search/title/head dydiv id=' search results ' ul @ foreach(Model){li@item.Name/li}/ul/div/body/AJAX设置中的var项目)默认情况下，在ASP.NET MVC应用程序中启用了非侵入式JavaScript和客户端身份验证，然后我们可以通过web . config文件中的设置来更改这些行为。如果我们在新应用程序的根目录下打开web.config文件，可以看到如下appSettings配置节点：appsettings addkey='网页：版本'值=' 1 . 0 . 0 . 0 '/addkey=' client validationenabled '值=' true'/Add key='不引人注目的javascriptenabled '值=' true '/appSettings(2)如果要在整个应用程序中禁用这两个功能中的任何一个，只需要将response功能的值更改为false即可。此外，您可以逐个视图地控制这些设置。HTML辅助方法EnableClientValidation和EnableUnobtrusiveJavaScript在具体的视图中重写这些配置设置。(3)由于现有的自定义脚本依赖于Microsoft AJAX库而不是Jquery库，所以禁用这些功能的主要原因是为了保持应用程序的向后兼容性。注意：在下一篇MVC博客中，我们将把注意力转向ASP中MVC框架的另一个内置的AJAX特性。NET-支持客户端身份验证。作者：韩应龙来源：http://www.cnblogs.com/hanyinglong.