威尼斯人线上娱乐

MVC怎样使用Ajax的救助方法,高端编制程序

7 7月 , 2019  

前言:前面大家早已简单的介绍过了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帮忙方法,它们也得以用来创造表单和指向调整器操作的总是,但分裂的是它们是异步实行的,当使用这一个帮扶方法时,不用编写任何脚本代码来促成程序的异步性。

忙不是理由,好久没更新,懒惰了众多。谢谢各位(@春華秋實、@三桂)敦促小编更新排版结构,O2DS敬上。

忙不是理由,好久没更新,懒惰了成都百货上千。感激各位(@春華秋實、@三桂)敦促笔者更新排版结构,O2DS敬上。

  (3)在后台,那个Ajax帮助方法注重非侵入式MVC的Jquery扩大,假如运用这个援救方法,就必要引进脚本文件jquery.unobtrusive-ajax.js,至于怎么援用笔者在上篇博客已经说过了,这里就不贴出代码了。
2.Ajax的ActionLink方法

索引 jQuery

索引
**
jQuery**

  (1)在Razor视图中,AJAX扶助方法能够经过Ajax属性访谈,和HTML帮忙方法类似,Ajax属性上的大部Ajax帮衬方法都以扩大方法(除了AjaxHelper类型之外)。

  • jQuery特点

  • 不唐突JavaScript

  • 使用jQuery

  • jQuery特点

  • 不唐突JavaScript

  • 使用jQuery

  (2)Ajax属性的ActionLink方法能够创立三个具有异步行为的锚标签。未来我们得以在微软发表的MVC3.0的MusicStore项目方面举办修改,什么人要是未有这些类型的话能够加私行的群,然后再群分享里面笔者分享了那么些类型。在视图”Views/Home/Index.cshtml”中增加上面包车型地铁代码。

AJAX助手

AJAX助手

1 <div id="dailydeal">  2     @Ajax.ActionLink("点击我", "DailyDeal", new AjaxOptions  3     {  4       UpdateTargetId="dailydeal",  5       InsertionMode = InsertionMode.Replace,  6       HttpMethod="Get"  7     })  8 </div>
  • AJAX
    ActionLinks

  • HTML5属性

  • AJAX表单

  • AJAX ActionLinks

  • HTML5属性

  • AJAX表单

  (3)ActionLink方法的率先个参数钦命了三回九转文本,第四个参数是要异步调用的操作的称号,类似于同名的HTML辅助方法。对于HTML帮助方法和Ajax扶助方法,明显区别的是AjaxOptions参数,该参数钦定了发送乞求和拍卖服务器再次来到结果的办法,参数中还包涵用来管理错误,展现加载元素,显示确认对话框等的选项。为了拿走服务器的响应,供给在调整器HomeController上增加一个DailyDeal操作,代码如下:

客户端验证

客户端验证

1      public ActionResult DailyDeal()  2   {  3     var album = GetDailyDeal();  4     return PartialView("_DailyDeal", album);  5   }  6   private Album GetDailyDeal()  7   {  8     return storeDB.Albums.OrderBy(a => a.Price).First();  9   }
  • 自定义表达
  • 自定义表明

  (4)Ajax操作连接的指标操作的再次来到值是纯文本或HTML。上边包车型大巴Razor代码就在档次的Views/Home文件夹下的_DailyDeal.cshtml文件中。
  威尼斯人线上娱乐 1

独立帮手

单身助手

  注明:Ajax.ActionLink生成的剧情约能源够获得服务器的响应,并能够直接将新内容移植到页面中,那时为啥呢?上面我们就介绍一下异步操作连接的职业规律。
3.HTML5特性
  (1)假使大家查看ActionLink方法渲染的标志,大家拜访到如下代码:
    <a data-ajax=”true” data-ajax-method=”Get”
data-ajax-mode=”replace” data-ajax-update=”#dailydeal”
>点击我</a>

  • jQuery
    UI

  • JSON和jQuery模板

  • jQuery UI

  • JSON和jQuery模板

  (2)非侵入式JavaScript的显明特点就是在HTML中不富含其余JavaScript代码,也便是说在HTML中看不到脚本代码,要是留神看的话就能意识ActionLink中钦点的具有安装被编码成了HTML成分的特点,何况那一个编码的绝大大多风味都有data-前缀,平日可以称作data-特性。
  (3)HTML
5正式为个人应用程序保留了data-性子,换句话说,web浏览器不会尝试解释data-特性的剧情,因而得以放心的把温馨的多少交由它,这个数量不会耳熏目染页面的体现或然渲染。

改善AJAX性能

改善AJAX性能

  (4)向应用程序中增多jquery.unobtrusive-ajax文件的目标是寻找特定的data-个性,然后垄断(monopoly)成分使其表现出差别的一举一动。
  (5)全体的ASP.NET MVC AJAX天性都利用data-个性。
4.Ajax表单

  • 使用内容分发网络(CDN)

  • 剧本优化

  • 运用内容分发网络(CDN)

  • 剧本优化

  (1)上边大家完毕其它一种情景,要在音乐公司的首页为用户拉长二个搜寻歌唱家的法力,因为供给用户的输入,所以必须在页面上面放一个form标签,但那不是三个平淡无奇的竹签,而是七个异步表单。上边这段代码大家看一下:
  

小结

小结

 1 @using (Ajax.BeginForm("ArtistSearch", "Home", new AjaxOptions   2   {   3     InsertionMode = InsertionMode.Replace,   4     HttpMethod = "GET",   5     OnFailure = "searchFailed",   6     LoadingElementId = "ajax-loader",   7     UpdateTargetId = "searchresults",   8   }))   9   {  10     <input type="text" name="q" />  11     <input type="submit" value="Search" />  12     <img id="ajax-loader" src="@Url.Content("~/Content/Images/ajax-loader.gif")" style="display:none" />  13   }


  (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”开关而页面没有影响,我们大概就能够以为到纳闷,前面边代码所做的均等,能够体现三个指鹿为马提醒音信,至少让他们领略大家已经尽力了。

  • 富有你想驾驭的jQuery
  • AJAX Helper
  • 深刻摸底客户端验证
  • 使用jQuery插件
  • 怀有你想清楚的jQuery
  • AJAX Helper
  • 深切领悟客户端验证
  • 使用jQuery插件

  (4)援助方法BeginForm的输出靠近于援助方法ActionLink,最终,当用户单击提交开关提交表单的时候,服务器会接受到二个Ajax诉求,并恐怕以放肆格式的剧情作出响应,当客户端收到来自服务器端的响应时,非侵入式脚本就能够将相应的剧情归入Dom中。

今昔很少见有Web应用不选拔AJAX才具的。AJAX是Asynchronous JavaScript and
XML的缩写。在实行中,AJAX主见采纳任何技艺来创设最棒用户体验的Web应用程序。在实际上利用中,使用到了一部分异步通讯,然后再响应时,再援助一些幽默的动画和颜料的扭转。假如您可感到用户提供更加好的应用程序的用户体验,让她们得以更急忙的行事,他们会愈发爱您!

现行比比较少见有Web应用不选择AJAX技术的。AJAX是Asynchronous JavaScript and
XML的缩写。在实行中,AJAX主张采纳一切技艺来创设最好用户体验的Web应用程序。在实际应用中,使用到了部分异步通讯,然后再响应时,再帮助一些妙不可言的卡通片和颜料的变化。假设你可感觉用户提供更加好的应用程序的用户体验,让他们能够更连忙的做事,他们会更为爱您!

  (5)对于那一个例子,调节器操作需求查询数据库况且渲染一个总局视图,另外,操作还要回来纯文本,但同一时候又想把乐师放到八个列表中,由此,在HomeControler中写入如下的艺术代码:

ASP.NET MVC
3是一个当代的Web框架,像每多个当代的Web框架一样,从一开端就能够有支撑AJAX的职务。其帮助AJAX的主干来自于jQuery的JavaScript库。全部ASP.NET
MVC3的AJAX功用都是创建并增加自jQuery的职能。

ASP.NET MVC
3是二个今世的Web框架,像每二个当代的Web框架同样,从一齐初就能有支撑AJAX的任务。其帮助AJAX的中坚来自于jQuery的JavaScript库。全体ASP.NET
MVC3的AJAX功用都以营造并扩展自jQuery的魔法。

 1  public ActionResult ArtistSearch(string q)   2   {   3     var artists = GetArtists(q);   4     return PartialView(artists);   5   }   6    7   private List<Artist> GetArtists(string q)   8   {   9     return storeDB.Artists.Where(a => a.Name.Contains(q)).ToList();  10   }

要想驾驭ASP.NET MVC3中的AJAX功用怎么选用,就必须先从jQuery起初初步。

要想明白ASP.NET MVC3中的AJAX功效怎么使用,就必须先从jQuery发轫动手。

 

jQuery

jQuery

  (6)该根据地视图利用模型创设列表,它投身项指标Views/Home文件夹下的视图ArtistSearch.cshtml。

jQuery的口号是“少写,多做”,口号完美的叙述了jQuery的心得。API简洁,然则功用庞大,库自个儿灵活而轻量级。最关键的是,jQuery协理全数今世浏览器(满含IE、Firefox、Safari、Opera和Chrome),并逃匿了成都百货上千分化样的接口(和错误),您恐怕会遇见针对差别的浏览器提供分化的API而提供不一样的代码。使用jQuery,不仅仅写更加少的代码,并能在越来越短的流年内实现工作,并且也能确定保障头发始终维持在头顶上。

jQuery的口号是“少写,多做”,口号完美的陈诉了jQuery的体会。API简洁,不过功用庞大,库本人灵活而轻量级。最要紧的是,jQuery支持具有今世浏览器(包蕴IE、Firefox、Safari、Opera和Chrome),并掩饰了累累不等同的接口(和不当),您也许会遇见针对差别的浏览器提供不一样的API而提供不一样的代码。使用jQuery,不唯有写越来越少的代码,并能在更加短的光阴内完毕工作,何况也能担保头发始终维持在头顶上。

 1 @model IEnumerable<MvcMusicStore.Models.Artist>   2   @{   3     Layout = null;   4   }   5   <!DOCTYPE html>   6   <html>   7     <head>   8     <title>ArtistSearch</title>   9     </head>  10     <body>  11       <div id="searchresults">  12         <ul>  13           @foreach (var item in Model)  14             {  15               <li>@item.Name</li>  16             }  17         </ul>  18       </div>  19     </body>  20   </html>

jQuery是眼前最风靡的JavaScript库之一,况兼依旧依然一个开源项目。在jQuery.com网址上你能够找到并下载最新版本的库、文书档案和插件。你可以在ASP.NET
MVC应用程序中找到jQuery。微软辅助jQuery,当您创设三个新的MVC项目时,ASP.NET
MVC项目模板会将您所需的jQuery文件放置在Scripts文件夹。

jQuery是眼前最流行的JavaScript库之一,何况依旧照旧三个开源项目。在jQuery.com网址上你能够找到并下载最新版本的库、文书档案和插件。你能够在ASP.NET
MVC应用程序中找到jQuery。微软援救jQuery,当您创建三个新的MVC项目时,ASP.NET
MVC项目模板会将您所需的jQuery文件放置在Scripts文件夹。

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>

在本章中,你会看出在MVC框架中采用jQuery来落到实处客户端验证和异步央浼等功效。在大家深切驾驭ASP.NET
MVC底层作用之前,让大家来急迅浏览下jQuery的最底层成效。

在本章中,你拜谒到在MVC框架中选择jQuery来兑现客户端验证和异步央求等效率。在大家深切驾驭ASP.NET
MVC底层功能在此以前,让我们来急速浏览下jQuery的最底层作用。

  (2)假若想在全部应用程序中禁止使用这两本性状中的任意个性,只必要将响应天性的value值修改为false就能够,其它,还是能够逐视图是的主宰这一个设置,HTML扶助方法EnableClientValidation和EnableUnobtrusiveJavaScript在一个有血有肉视图中重写了那一个安排安装。
  (3)由于现成的自定义脚本都是借助与Microsoft
AJAX库并不是Jquery库,因而禁止使用这么些特色的第一原因是爱抚应用程序的向后包容性。

jQuery特点

jQuery特点

  注:下篇MVC的博客大家将把集中力转向ASP.NET
MVC框架的其余多个停放AJAX本性-对客户端验证的支撑。

jQuery专长查找、遍历和操作HTML文书档案内的HTML成分。一旦您找到贰个成分,使用jQuery能够很轻松的操作成分的事件管理程序,成分动画以及和任何因素实行AJAX交互。本节将从jQuery函数初始来寻觅jQuery的作用。

jQuery长于查找、遍历和操作HTML文书档案内的HTML成分。一旦你找到八个成分,使用jQuery可以很轻松的操作成分的事件管理程序,成分动画以及和别的因素实行AJAX交互。本节将从jQuery函数起头来寻找jQuery的职能。

    相信本人,你正是下一个神蹟!

jQuery函数

jQuery函数


jQuery函数是指标,你能够透过那个目的来访谈jQuery的法力。开荒人士在始发选用jQuery时会为此而倍感困惑。认为疑心也一律是因为函数(jQuery)的小名$符号(因为这么能够在调用jQuery效能时方可大大方方削减字符输入)。更让人疑惑的是$机遇还行放肆层次的参数,而依据此测算出您企图调用的功用。上面是部分jQuery函数代码的出人头地使用方法:

jQuery函数是目的,你能够透过那个目的来拜候jQuery的机能。开采职员在始发采取jQuery时会为此而认为困惑。感觉疑心也同等是因为函数(jQuery)的外号$符号(因为如此能够在调用jQuery成效时能够大大方方减去字符输入)。更让人质疑的是$机遇基本上能用大肆档期的顺序的参数,而依靠此测算出您筹划调用的功能。上面是一对jQuery函数代码的头名使用格局:

$(function () {
  $(“#album-list img”).mouseover(function () {
    $(this).animate({ height: ‘+=25’, width: ‘+=25’ })
      .animate({ height: ‘-=25’, width: ‘-=25’ });
  });
});
$(function () {    $(“#album-list img”).mouseover(function () {      $(this).animate({ height: ‘+=25’, width: ‘+=25’ })        .animate({ height: ‘-=25’, width: ‘-=25’ });    });  });

代码的首先行调用了jQuery函数($),传递给无名氏JavaScript函数叁个参数。

代码的首先行调用了jQuery函数($),传递给无名氏JavaScript函数二个参数。

$(function () {
  $(“#album-list img”).mouseover(function () {
    $(this).animate({ height: ‘+=25’, width: ‘+=25’ })
      .animate({ height: ‘-=25’, width: ‘-=25’ });
  });
});
$(function () {    $(“#album-list img”).mouseover(function () {      $(this).animate({ height: ‘+=25’, width: ‘+=25’ })        .animate({ height: ‘-=25’, width: ‘-=25’ });    });  });

jQuery会假定你提供了一个方法,并在浏览器从服务器端加载成功HTML(DOM)音讯并树立完毕文书档案对象模型时立时实行。因为在这年,你就足以安枕而卧而完善的实行DOM有关的剧本了。

jQuery会假定你提供了贰个艺术,并在浏览器从劳动器端加载成功HTML(DOM)信息并确立达成文书档案对象模型时立时推行。因为在今年,你就足以安枕无忧而完善的执行DOM有关的脚本了。

其次行代码向jQuery函数字传送递了字符串参数“#album-list img”:

其次行代码向jQuery函数字传送递了字符串参数“#album-list img”:

$(function () {
  $(“#album-list img”).mouseover(function () {
    $(this).animate({ height: ‘+=25’, width: ‘+=25’ })
      .animate({ height: ‘-=25’, width: ‘-=25’ });
  });
});
$(function () {    $(“#album-list img”).mouseover(function () {      $(this).animate({ height: ‘+=25’, width: ‘+=25’ })        .animate({ height: ‘-=25’, width: ‘-=25’ });    });  });

jQuery将会把那个字符串调用解释为接纳器。选用器会告诉jQuery应该在DOM中寻觅三个怎么的因素。你能够拿走那么些成分的属性值,class的值,相对地方,以及其余音信。第二行的选拔器告诉jQuery在那几个因素的范围内找寻全部ID值为“album-list”的img元素。

jQuery将会把那几个字符串调用解释为选取器。选用器会告诉jQuery应该在DOM中追寻一个什么样的元素。你能够博得这些成分的属性值,class的值,相对地点,以及别的音讯。第二行的选取器告诉jQuery在这么些成分的限制内寻觅全部ID值为“album-list”的img成分。

入采纳器实践到位时,它会回来相配到的贰个或四个要素的靶子。你能够透过jQuery的一对外加的章程来调用操作包装的群集中具有的要素。例如,可以为具备通过选用器相称到的图样增加鼠标悬停事件管理程序。

当采取器试行到位时,它会回到相配到的三个或四个因素的对象。你能够经过jQuery的有个别外加的章程来调用操作包装的会集中具有的因素。譬如,可感到具有通过选取器相称到的图形增多鼠标悬停事件管理程序。

jQuery利用很好的利用了JavaScript的函数编制程序的力量。你会意识能够将和睦创建的函数作为参数字传送递给jQuery的章程。比方,定义mouseover方法,假设不与onmouseover事件相关联,无论如何浏览器都不会知晓该怎么去接触这么些格局。为了在事变触发时触发,你需求为事件传递管理的函数代码:

jQuery利用很好的使用了JavaScript的函数编制程序的力量。你会意识可以将自个儿创办的函数作为参数传递给jQuery的不二秘籍。举例,定义mouseover方法,如若不与onmouseover事件相关联,无论怎么着浏览器都不会清楚该怎么去接触那几个艺术。为了在事件触发时触发,你必要为事件传递管理的函数代码:

$(function () {
  $(“#album-list img”).mouseover(function () {
    $(this).animate({ height: ‘+=25’, width: ‘+=25’ })
      .animate({ height: ‘-=25’, width: ‘-=25’ });
  });
});
$(function () {    $(“#album-list img”).mouseover(function () {      $(this).animate({ height: ‘+=25’, width: ‘+=25’ })        .animate({ height: ‘-=25’, width: ‘-=25’ });    });  });

眼下的例证中,当触发成分的mouseover事件时会施行animates方法。而出发当前卡通的那些因素被援用为this(出发事件的成分)关键字。请留意,代码是透过向jQuery方法中传递this关键字($(this))获取的那一个因素。jQuery的参数视为那个因素的引用然后经过jQuery方法开始展览打包并再次回到这一个因素。

日前的例证中,当触发成分的mouseover事件时会施行animates方法。而出发当前卡通的那么些因素被引用为this(出发事件的成分)关键字。请留心,代码是经过向jQuery方法中传递this关键字($(this))获取的那些成分。jQuery的参数视为那个因素的引用然后通过jQuery方法开始展览打包并赶回那几个成分。

假使jQuery重返了包装好的因素,你能够像上边同样是运用与animate类似的章程举办支配那个成分。在演示代码中,使图片的拉伸(宽和高都追加25像素),然后降低一些(使图片宽和高各缩减25像素)。

假如jQuery重回了包装好的要素,你能够像下面同样是使用与animate类似的秘诀实行支配那些因素。在演示代码中,使图片的拉伸(宽和高都扩张25像素),然后收缩一些(使图片宽和高各缩减25像素)。

试行这段代码时,当用户将鼠标移动到图片上时,他们会看出个神秘的唤起效率,图片先松开通晓后又过来了,这种是应用程序必须求使用的吧?不!不过轻便的效应以及鲜亮的模样,你的用户会喜欢的。

实践这段代码时,当用户将鼠标移动到图片上时,他们会看到个神秘的提示功能,图片先放手了解后又大张旗鼓了,这种是应用程序必定要动用的呢?不!然而轻便的功能以及鲜亮的面容,你的用户会喜欢的。

透过本章的剧情,你会看出更加多更为实际的效应特色。首先,让我们留心看看你所急需利用到的jQuery作用。

通过本章的开始和结果,你会看到更加多更为实际的作用特色。首先,让大家紧凑看看您所急需利用到的jQuery功效。

jQuery选择器

jQuery选择器

慎选器会依据你传入jQuery函数的字符串作为标准在DOM中找找可相称的要素。在前一部分,选择器使用“#album-list
img”来查找图片标志。你也能够动用层叠样式表(CSS)的不二秘诀来寻觅成分。jQuery接纳器语法派生自CSS
3.0采纳器。表8-第11中学陈列了独具jQuery选择器帮衬的代码方式。

挑选器会依照你传入jQuery函数的字符串作为基准在DOM中找出可协作的成分。在前一部分,选用器使用“#album-list
img”来寻找图片标识。你也能够选择层叠样式表(CSS)的方法来搜寻成分。jQuery选择器语法派生自CSS
3.0接纳器。表8-第11中学陈列了具备jQuery选拔器帮助的代码情势。

示例

含意

${"header"}

查找id为"header"的元素。

${".editor-label"}

查找所有类名为“.editor-label”的元素。

${"div"}

查找所有的<div>元素。

${"#header div"}

查找id为“header”的<div>元素。

${"#header >div"}

查找id为“header”节点的所有<div>子元素。

${"a:even"}

查找查找所有奇偶的锚点元素。

示例

含意

${"header"}

查找id为"header"的元素。

${".editor-label"}

查找所有类名为“.editor-label”的元素。

${"div"}

查找所有的<div>元素。

${"#header div"}

查找id为“header”的<div>元素。

${"#header >div"}

查找id为“header”节点的所有<div>子元素。

${"a:even"}

查找查找所有奇偶的锚点元素。

表中的末了一行体现了jQuery像CSS同样协助伪类。使用这几个伪类能够采取到偶数或奇数的因素,访谈链接你能够查阅到多个整机的CSS选拔器列表:

MVC怎样使用Ajax的救助方法,高端编制程序。表中的最后一行体现了jQuery像CSS一样扶助伪类。使用那个伪类能够选用到偶数或奇数的要素,访谈链接你能够查看到四个全部的CSS选用器列表:

jQuery事件

jQuery事件

jQuery的另一个钢铁正是为订阅DOM中的事件提供API。固然您也得以选用字符串在通用绑定中钦定使用事件的称号,jQuery依旧提供了一部分广大的光阴,如click、blur和submit等事件专项使用方法。如前所示,你可感到jQuery传递个函数告诉它事件发生时该做怎么样。函数能够是无名氏的,就像您在“jQuery函数”一节中所看到的例证,只怕你能够内定函数的称号来作为事件管理程序,举个例子下边包车型客车代码:

jQuery的另贰个烈性正是为订阅DOM中的事件提供API。即便您也足以动用字符串在通用绑定中钦点使用事件的称号,jQuery依然提供了有个别广阔的时刻,如click、blur和submit等事件专项使用方法。如前所示,你可以为jQuery传递个函数告诉它事件产生时该做哪些。函数能够是佚名的,就好像您在“jQuery函数”一节中所看到的例证,只怕您能够内定函数的称号来作为事件管理程序,比方上面的代码:

$(“#album-list img”).mouseover(function () {
  animateElement($(this));
});

function animateElement(element) {
  element.animate({ height: ‘+=25’, width: ‘+=25’ })
    .animate({ height: ‘-=25’, width: ‘-=25’ });
}
$(“#album-list img”).mouseover(function () {    animateElement($(this));  });    function animateElement(element) {    element.animate({ height: ‘+=25’, width: ‘+=25’ })      .animate({ height: ‘-=25’, width: ‘-=25’ });  }

当您要采取DOM成分或开始展览事件管理时,jQuery能够特别轻易的操作页面上的因素。你能够读取或设置属性值,增多或删除成分的CSS类以及别的越来越多操作。上面包车型地铁代码是当用户将鼠标移动到链接元素上时,增添或删除CSS的高亮类。当用户在页面上移步鼠标到锚点标识时会有分歧的展现(若是你已经更动了高亮样式)。

当您要选拔DOM成分或进行事件处理时,jQuery能够非常轻松的操作页面上的因素。你可以读取或安装属性值,加多或删除成分的CSS类以及任何越多操作。下边包车型客车代码是当用户将鼠标移动到链接成分上时,增多或删除CSS的高亮类。当用户在页面上运动鼠标到锚点标识时会有例外的来得(借使你早就成形了高亮样式)。

$(“a”).mouseover(function () {
  $(this).addClass(“highlight”);
}).mouseout(function () {
  $(this).removeClass(“highlight”);
});
$(“a”).mouseover(function () {    $(this).addClass(“highlight”);  }).mouseout(function () {    $(this).removeClass(“highlight”);  });

有关后面包车型地铁代码有局地风趣的思想政治工作:

有关后面包车型地铁代码有一点点风趣的事务:

具有jQuery方法都会扭转二个包裹集,如悬停的主意,也会重返一样的jQuery的包装集。那表示你能够接二连三调用jQuery方法而不须求再度选择那一个因素。大家将以此名为方法链接。

具备jQuery方法都会转换一个包裹集,如悬停的办法,也会回来同样的jQuery的包装集。这意味着你能够继续调用jQuery方法而没有须求再一次选取这么些因素。大家将那个称呼方法链接。

在jQuery中差不离你能够看来有着的广阔操作。设置mouseover和mouseout的国有操作方法,你可以在内部切换区别的样式类。你能够运用部分jQuery的连忙格局和结尾的代码片段将其重写为如下情势:

在jQuery中大致你能够见见全体的大面积操作。设置mouseover和mouseout的集体操作方法,你能够在中间切换差异的样式类。你可以行使一些jQuery的火速格局和最后的代码片段将其重写为如下情势:

$(“a”).hover(function () {
  $(this).toggleClass(“highlight”);
});
$(“a”).hover(function () {    $(this).toggleClass(“highlight”);  });

万般有本事的三行代码啊——这就是jQuery的能够之处。

多多有力量的三行代码啊——那正是jQuery的不错之处。

jQuery和AJAX

jQuery和AJAX

jQuery能够将你供给的具有内容通过异步央浼的章程发送回你的Web服务器。你能够倡导POST乞求、GET央求或jQuery央浼在成就时(或发生错误时)公告你。你能够应用jQuery发送和接收XML数据(AJAX中X代表XML),然而在本章中,你拜谒到你会看出HTML片段数据,文本或JavaScript
Object Notation(JSON)等格式。jQuery使得AJAX更为轻易。

jQuery能够将您必要的具备剧情通过异步央求的格局发送回你的Web服务器。你可以发起POST央求、GET央浼或jQuery诉求在成就时(或发生错误时)公告你。你能够使用jQuery发送和接收XML数据(AJAX中X代表XML),可是在本章中,你拜候到您拜候到HTML片段数据,文本或JavaScript
Object Notation(JSON)等格式。jQuery使得AJAX更为轻便。

事实上,jQuery改造了Web开拓人士编写脚本代码的方法,让众多职业变的更加的轻易。

实际,jQuery改换了Web开拓职员编写脚本代码的主意,让好些个专门的工作变的尤为轻松。

不唐突的JavaScript

不唐突的JavaScript

在jQuery还尚未出现的时候,Web流行将JavaScript代码和HTML放在同贰个文本中。甚至还把JavaScript代码当成是HTML成分的习性嵌入在那之中。就像是同下边包车型大巴onclick管理程序:

在jQuery还从未出现的时候,Web流行将JavaScript代码和HTML放在同一个文件中。以致还把JavaScript代码当成是HTML成分的属性嵌入个中。就犹如下边的onclick管理程序:

<div onclick=”JavaScript:alert(‘click’);”>Testing, testing</div>
<div onclick=”JavaScript:alert(‘click’);”>Testing, testing</div>

大概你在方今里面也曾经在停放标志中写过JavaScript,因为及时也再未有何更简便易行的不二等秘书诀能够捕获点击事件。嵌入JavaScript代码固然能够干活,然而代码会变得特别混乱。jQuery的产出退换了这种情状,因为你能够选拔其它一种越发美丽的点子来找到成分和破获点击事件。今后您能够从HTML的品质中移除JavaScript了。事实上,你完全能够将JavaScript代码从HTML中移除出去。

莫不你在那段日子里面也曾在放权标志中写过JavaScript,因为及时也再未有何更简明的秘诀能够捕获点击事件。嵌入JavaScript代码即便能够干活,可是代码会变得那么些混乱。jQuery的产出转移了这种状态,因为你能够运用其它一种越发美貌的不二秘籍来找到成分和破获点击事件。今后你能够从HTML的性格中移除JavaScript了。事实上,你一丝一毫能够将JavaScript代码从HTML中移除出去。

不唐突的JavaScript的机能是保持JavaScript代码与HTML标志分离。将装有你须求运用的台本代码打包到.js文件中。若是你查看源代码,将不会看出其他JavaScript代码。就算是HTML渲染代码视图,你也不拜谒到别的JavaScript在中间。而这么些页面独一是用剧本的符号,你会看出贰个或多少个<script>标志援引了JavaScript文件。

不唐突的JavaScript的意义是保持JavaScript代码与HTML标志分离。将全数你须求选择的本子代码打包到.js文件中。若是你查看源代码,将不会看出别的JavaScript代码。固然是HTML渲染代码视图,你也不会看到任何JavaScript在其间。而以此页面独一是用剧本的暗号,你会看出三个或三个<script>标志援用了JavaScript文件。

您也许相当慢就能够意识不唐突JavaScript的魅力,因为它一样遵循和推崇MVC的设计方式。保持呈现标识使其与JavaScript所控制的行事相分离。不唐突JavaScript还也会有别的的益处。JavaScript代码存款和储蓄在单独的公文中,浏览器只要求下载壹次就可以缓存在本地,那样也可能有益于网址的品质提高。

您只怕急迅就能够发觉不唐突JavaScript的魔力,因为它同样遵从和推崇MVC的设计方式。保持突显标识使其与JavaScript所决定的表现相分离。不唐突JavaScript还会有其余的功利。JavaScript代码存款和储蓄在单身的文书中,浏览器只需求下载一回就可以缓存在本土,那样也可以有益网站的属性提高。

不冒犯,JavaScript允许你的网站使用“稳步充实”的国策来更新内容。而慢慢加多则是提供内容的一种重大方法。独有当您的道具或浏览器能够支撑脚本以及样式表的功能,那时技能够成立特别先进的剧情,举例动画。维基百科对于日渐充实的政策有二个那四个好的概述:

不冒犯,JavaScript允许你的网址选择“稳步扩充”的政策来更新内容。而逐级充实则是提供内容的一种首要艺术。独有当你的装置或浏览器能够支撑脚本以及样式表的功力,那时技巧够创设特别先进的内容,比方动画。维基百科对于日益增添的国策有一个老大好的概述:

ASP.NET MVC3
须求不唐突的JavaScript。并不是在做类似于客户端验证的成效时在视图中写JavaScript代码,或是框架将代码附着到HTML的习性中。使用jQuery框架能够很实惠的找到和分解元数据,然后利用外界关系的本子文件为成分附加行为。谢谢不唐突的JavaScript提供的AJAX成效使ASP.NET
MVC能够支撑“逐步抓实”。要是用户的浏览器并不帮助脚本,您的网址也照例会健康专业(不过也许她不会动用到“好用”的效果与利益,比如客户端验证)。

ASP.NET MVC3
要求不唐突的JavaScript。并不是在做类似于客户端验证的功力时在视图中写JavaScript代码,或是框架将代码附着到HTML的性质中。使用jQuery框架能够很有益于的找到和解说元数据,然后使用外界关系的脚本文件为因素附加行为。多谢不唐突的JavaScript提供的AJAX功效使ASP.NET
MVC能够协理“稳步巩固”。如若用户的浏览器并不帮助脚本,您的网址也照旧会符合规律干活(可是只怕他不会选取到“好用”的功能,举例客户端验证)。

接下去让大家商量一下如jQuery在MVC应用程序中只要为动作加上不唐突的JavaScript。

接下去让大家钻探一下如jQuery在MVC应用程序中只要为动作加上不唐突的JavaScript。

使用jQuery

使用jQuery

在Visual Studio中采纳ASP.NET
MVC模板创造二个新品类时,项目模板会为您创建你所急需的jQuery。各样新品类中都会包括贰个Scripts文件夹来放置.js文件,如图8-1所示:

在Visual Studio中选取ASP.NET
MVC模板创造贰个新品类时,项目模板会为您创建你所急需的jQuery。各个新品类中都会蕴藏三个Scripts文件夹来放置.js文件,如图8-1所示:

威尼斯人线上娱乐 2

威尼斯人线上娱乐 3

jQuery库的主导文件被命名称为jquery-<版本>.js,在图片中当前jQuery的本子是1.4.4。当您展开这些文件时,你会意识那一个文件中的代码可读,何况还隐含相关的代码注释。

jQuery库的主导文件被取名叫jquery-<版本>.js,在图纸中当前jQuery的版本是1.4.4。当你展开这么些文件时,你会开掘那些文件中的代码可读,而且还包涵相关的代码注释。

留心,这里还富含一个jquery-<版本>.min.js文件。那些是多个减去版本的JavaScript,当中“.min”是用来区分未压缩版本的(平日压缩版本会小于暗许版本的二分一)。它不包涵其余不供给的空格字符,未有注释,局地变量名称也被浓缩为三个字符长度。假若您展开二个减小过的公文,你会发觉一大堆比可读的JavaScript代码。你能够将核减过的JavaScript给您认为是大家的JavaScript程序猿。问她,他感到那几个代码能做什么样?

只顾,这里还包涵一个jquery-<版本>.min.js文件。这些是二个减去版本的JavaScript,个中“.min”是用来分别未压缩版本的(经常压缩版本会小于私下认可版本的八分之四)。它不分包其余不须要的空格字符,未有注释,局地变量名称也被降低为一个字符长度。尽管你展开多少个回降过的文本,你会开掘一大堆比可读的JavaScript代码。你能够将滑坡过的JavaScript给你认为是专家的JavaScript程序猿。问他,他感到这一个代码能做哪些?

减去后的文书与未压缩文件在客户端推行的作用是同等的。但是,因为压缩使文件变小,浏览器从服务器下载的字节数收缩了,加载和平运动转的速度也更加快。MVC应用程序在默许布局视图模板(_Layout.cshtml)中已经使用脚本标识援用了jQuery的压缩版本:

减去后的文本与未压缩文件在客户端施行的功力是平等的。但是,因为压缩使文件变小,浏览器从服务器下载的字节数减弱了,加载和平运动行的速度也更加快。MVC应用程序在暗许布局视图模板(_Layout.cshtml)中早就采取脚本标志引用了jQuery的压缩版本:

<script src=”@Url.Content(“~/Scripts/jquery-1.4.4.min.js”)” type=”text/JavaScript”>
</script>
<script src=”@Url.Content(“~/Scripts/jquery-1.4.4.min.js”)” type=”text/JavaScript”>  </script>

在布局视图旅长上边的脚本标志放置在你的号子之前,接下去你就足以起来利用jQuery了。

在布局视图中将下面的本子标志放置在你的标识从前,接下去你就足以起来应用jQuery了。

自定义脚本

自定义脚本

当你写自定义JavaScript代码时,你能够在本子目录中新建文件,并将代码保存到新文件中(除非您想在视图中写嵌入式脚本代码,不过假使你如此你就能够失去25
Karma
Points【译者注:作者真不知道那是哪些,不过参照他事他说加以考察google有贰个页面应该是某种等值货币之类的计量单位?】)。举例,你能够从本章初阶的将持有的代码都放置到脚本目录的MusicScripts.js文件中。MusicScripts.js文件内容如下:

当你写自定义JavaScript代码时,你能够在本子目录中新建文件,并将代码保存到新文件中(除非您想在视图中写嵌入式脚本代码,可是假设你如此你就能够失去25
Karma
Points【译者注:小编真不知道那是哪些,不过参谋google有一个页面应该是某种等值货币之类的计量单位?】)。举个例子,你能够从本章初阶的将享有的代码都放置到脚本目录的MusicScripts.js文件中。MusicScripts.js文件内容如下:

/// <reference path=”jquery-1.4.4.js” />
$(function () {
  $(“#album-list img”).mouseover(function () {
    $(this).animate({ height: ‘+=25’, width: ‘+=25’ })
      .animate({ height: ‘-=25’, width: ‘-=25’ });
  });
});
/// <reference path=”jquery-1.4.4.js” />  $(function () {    $(“#album-list img”).mouseover(function () {      $(this).animate({ height: ‘+=25’, width: ‘+=25’ })        .animate({ height: ‘-=25’, width: ‘-=25’ });    });  });

最上端讲明掉的援用代码并不会在运营时对台本发生其余影响。参照他事他说加以考察的独一指标就让Visual
Studio知道您会使用到jQuery并由Visual Studio提供jQuery
API的代码提自动唤醒。

最上端疏解掉的引用代码并不会在运作时对台本产生其余影响。参考的独一指标就让Visual
Studio知道您会动用到jQuery并由Visual Studio提供jQuery
API的代码提自动提醒。

要为应用程序增多MusicScript.js就要求其他一个剧本标志。脚本标识必须出现在jQuery脚本标志之后,因为MusicScripts.js会应用到jQuery,而浏览器会依赖脚本在文书档案中出现的依次进行加载。假如您的台本富含了百分百应用程序都会接纳到的成效,你能够将其加在_Layout视图的jQuery脚本标识之后。在这么些例子中,你只需求在应用程序的首页使用到这一个剧本,全数你能够在HomeChontroller的Index视图中增多它(视图引擎会在加载完jQuery脚本标识之后就起来渲染页面包车型客车body部分)。

要为应用程序增多MusicScript.js就须要别的七个本子标识。脚本标志必须出现在jQuery脚本标志之后,因为MusicScripts.js会应用到jQuery,而浏览器会凭借脚本在文书档案中冒出的一一举行加载。固然你的脚本包罗了全体应用程序都会使用到的机能,你能够将其加在_Layout视图的jQuery脚本标识之后。在这么些事例中,你只必要在应用程序的首页使用到那个本子,全数你能够在HomeChontroller的Index视图中增多它(视图引擎会在加载完jQuery脚本标识之后就起来渲染页面包车型地铁body部分)。

<div id=”promotion”>
</div>


<script src=”@Url.Content(“~/Scripts/MoviesScripts.js”)” type=”text/JavaScript”>
</script>

<h3><em>Fresh</em> off the grill</h3>
<div id=”promotion”>  </div>

  <script src=”@Url.Content(“~/Scripts/MoviesScripts.js”)” type=”text/JavaScript”>  </script>    <h3><em>Fresh</em> off the grill</h3>

剧本配置节点

剧本配置节点

另一种嵌入脚本的章程,能够利用Razor视图中的暗中认可脚本节点将脚本输出到视图中。在布局视图中,你能够挑选渲染五个名称为scripts的节点:

另一种嵌入脚本的办法,能够利用Razor视图中的私下认可脚本节点将脚本输出到视图中。在布局视图中,你能够选择渲染一个名称为scripts的节点:

<head>
  <title>@ViewBag.Title</title>
  <link href=”@Url.Content(“~/Content/Site.css”)” rel=”stylesheet”
    type=”text/css” />
  <script src=”@Url.Content(“~/Scripts/jquery-1.4.4.min.js”)”
    type=”text/JavaScript”></script>
  @RenderSection(“scripts”, required:false);
</head>
<head>    <title>@ViewBag.Title</title>    <link href=”@Url.Content(“~/Content/Site.css”)” rel=”stylesheet”      type=”text/css” />    <script src=”@Url.Content(“~/Scripts/jquery-1.4.4.min.js”)”      type=”text/JavaScript”></script>    @RenderSection(“scripts”, required:false);  </head>

在其他内容视图中,你能够使用脚本配置节点在视图的底部注入脚本:

在其余内容视图中,你能够行使脚本配置节点在视图的头顶注入脚本:

@section scripts{
  <script src=”@Url.Content(“~/Scripts/MusicScripts.js”)”
    type=”text/JavaScript”></script>
}
@section scripts{    <script src=”@Url.Content(“~/Scripts/MusicScripts.js”)”      type=”text/JavaScript”></script>  }

使用节点配置能够准确的主宰所需的脚本以及要包蕴的顺序。

行使节点配置能够正确的主宰所需的脚本以及要蕴涵的逐个。

任何一些脚本

另外部分脚本

在本子文件夹中还大概有别的的.js脚本是做哪些的?

在剧本文件夹中还也可以有其余的.js脚本是做什么的?

为了jQuery的大旨库文件以外,脚本文件夹中还带有五个jQuery插件——jQuery
UI和jQuery验证。那么些都感觉jQuery核心库额外增添的机能,你将会在本章中使用到这多少个插件。请留心那多个插件也可能有缩减版本的文本。

为了jQuery的核心库文件以外,脚本文件夹中还蕴藏多少个jQuery插件——jQuery
UI和jQuery验证。这么些都认为jQuery大旨库额外增添的效果,你将会在本章中应用到那多少个插件。请稳重那三个插件也是有缩减版本的公文。

你还有恐怕会找到名称中包蕴“vsdoc”的文书。这么些文件能为Visual
Studio提供越来越好的电动感应,你平素都不供给一向引用这个文件或将它们发送到客户端。当你在自定义的台本文件中援用到这一个文件,Visual
Studio会自动找到这么些文件。

您还或许会找到名称中满含“vsdoc”的文件。这一个文件能为Visual
Studio提供更加好的自行感应,你从来都没有必要直接援用那个文件或将它们发送到客户端。当您在自定义的剧本文件中援用到那么些文件,Visual
Studio会自动找到那个文件。

“不唐突”那一个单词是在不唐突脚本与jQuery在MVC框架中组成是由微软提议的。在ASP.NET
MVC框架中使用到AJAX成效你会用到这一个文件,你会在本章看到假若利用那一个本子文件。

“不唐突”那几个单词是在不唐突脚本与jQuery在MVC框架中结成是由微软提议的。在ASP.NET
MVC框架中应用到AJAX成效你会用到这几个文件,你会在本章看到假使运用那么些本子文件。

在文书夹中有成都百货上千事先由微软创建的微软AJAX库(比方MicrosoftAJAX.js)。由于ASP.NET
MVC
3应用程序只依赖于jQuery,所以您能够安全的从应用程序中除去那么些文件,它们扶助为了向后优异而已。

在文件夹中有相当多事先由微软创立的微软AJAX库(比如MicrosoftAJAX.js)。由于ASP.NET
MVC
3应用程序只依附于jQuery,所以你能够安枕无忧的从应用程序中去除那些文件,它们帮衬为了向后万分而已。

今昔早就清楚了jQuery是如何,以及怎么着在应用程序中引用脚本,接下去,看看在MVC框架中如若选择AJAX效用。

昨日已经了然了jQuery是哪些,以及哪些在应用程序中引用脚本,接下去,看看在MVC框架中一旦使用AJAX功能。

AJAX Helper

AJAX Helper

今昔大家来探视ASP.NET MVC中的HTML Helper。你能够选择HTML
Helper创立表单或许指向调整器动作的链接。一样在ASP.NET
MVC中也设有贰个AJAX Helper。AJAX
Helper也足以创建表单和针对调控器动作的链接,只但是它们都以异步操作的。当您利用那一个Helper时,你无需编写制定任何脚本代码或做任何异步操作。AJAX的背后,是jQuery在MVC中不唐突的扩充。使用Helper你须求接纳到jquery.unobtrusive-AJAX脚本。即使您要求在应用程序中运用到此功效,那么你就能够在布局视图文件中援用这几个文件(包蕴jQuery)。

到现在大家来寻访ASP.NET MVC中的HTML Helper。你能够应用HTML
Helper成立表单可能指向调整器动作的链接。同样在ASP.NET
MVC中也设有三个AJAX Helper。AJAX
Helper也能够创立表单和针对性调控器动作的链接,只不过它们都以异步操作的。当您选用那个Helper时,你不须要编写制定任何脚本代码或做另外异步操作。AJAX的私行,是jQuery在MVC中不唐突的扩展。使用Helper你须要运用到jquery.unobtrusive-AJAX脚本。若是您须求在应用程序中利用到此功用,那么你就足以在布局视图像和文字件中援用那几个文件(富含jQuery)。

<script src=”@Url.Content(“~/Scripts/jquery-1.4.4.min.js”)”
type=”text/JavaScript”></script>


<script src=”@Url.Content(“~/Scripts/Scripts/jquery.unobtrusive-AJAX.min.js”)”
type=”text/JavaScript”></script>

@RenderSection(“scripts”, required:false);
<script src=”@Url.Content(“~/Scripts/jquery-1.4.4.min.js”)”  type=”text/JavaScript”></script>

  <script src=”@Url.Content(“~/Scripts/Scripts/jquery.unobtrusive-AJAX.min.js”)”  type=”text/JavaScript”></script>    @RenderSection(“scripts”, required:false);

AJAX ActionLinks

AJAX ActionLinks

在Razor视图中您可以像HTML Helper同样使用AJAX
Helper使用各个扩展方法来操作AJAX。AJAX的ActionLink方法能够创制三个异步链接标志。试想一下,你要在MVC的音乐公司的页面上增多多个“每一天交易”的链接。问用户们点击链接时,你不期待他们跳转浏览多少个新页面,而是在现存页面上出示专辑的详细细节。

在Razor视图中您能够像HTML Helper同样使用AJAX
Helper使用种种扩张方法来操作AJAX。AJAX的ActionLink方法能够创制多少个异步链接标志。试想一下,你要在MVC的音乐集团的页面上增添多个“天天交易”的链接。问用户们点击链接时,你不指望她们跳转浏览一个新页面,而是在现成页面上海展览中心示专辑的详实细节。

万一想做到那点,你能够在Views/Home/Index.cshtml视图中已存在的专辑列表尾部增加上边包车型客车代码:

借使想做到那一点,你能够在Views/Home/Index.cshtml视图中已存在的特辑列表底部增加上面包车型客车代码:

<div id=”dailydeal”>
@AJAX.ActionLink(“Click here to see today’s special!”,
“DailyDeal”,
new AJAXOptions{
  UpdateTargetId=”dailydeal”,
  InsertionMode=InsertionMode.Replace,
  HttpMethod=”GET”
})
</div>
<div id=”dailydeal”>  @AJAX.ActionLink(“Click here to see today’s special!”,  “DailyDeal”,  new AJAXOptions{    UpdateTargetId=”dailydeal”,    InsertionMode=InsertionMode.Replace,    HttpMethod=”GET”  })  </div>

ActionLink的措施第一个参数钦命是钦点链接的公文,第叁个参数是你要调用的动作的称谓。像HTML
Helper中的同名方法一致,AJAX
ActionLink中有分裂的重载,你能够流传调整器名称、路由以及HTML属性值。但是也是有贰个两样的AJAXOptions参数。那几个准备参数是精通尽管发送央浼,以及服务器会怎么样回到结果。选项中也设有错误管理,展现加载的成分,以及显示确认对话框等。在这种情形下,你能够钦命使用服务器重返结果替换ID为“dailydeal”的成分的开始和结果,接下去你须求在HomeController调控器中加多DailyDeal动作来响应央求:

ActionLink的艺术第二个参数钦命是钦赐链接的公文,第二个参数是你要调用的动作的称呼。像HTML
Helper中的同名方法一致,AJAX
ActionLink中有例外的重载,你能够流传调节器名称、路由以及HTML属性值。不过也可以有贰个不如的AJAXOptions参数。这一个企图参数是清楚借使发送供给,以及服务器会什么回到结果。选项中也存在错误管理,显示加载的成分,以及呈现确认对话框等。在这种景况下,你能够钦赐使用服务器再次来到结果替换ID为“dailydeal”的要素的剧情,接下去你须求在HomeController调整器中增加DailyDeal动作来响应乞求:

public ActionResult DailyDeal()
{
  var album = GetDailyDeal();
  return PartialView(“_DailyDeal”, album);
}

private Album GetDailyDeal()
{
  return storeDB.Albums
    .OrderBy(a => a.Price)
    .First();
}
public ActionResult DailyDeal()  {    var album = GetDailyDeal();    return PartialView(“_DailyDeal”, album);  }    private Album GetDailyDeal()  {    return storeDB.Albums      .OrderBy(a => a.Price)      .First();  }

点击AJAX链接会从指标链接中回到响应的公文或HTML片段。在那些例子中,将会为你回来HTML总部视图。请将下边包车型地铁代码加多到品种的Views/Home文件夹的_DailyDeal.cshtml文件中:

点击AJAX链接会从指标链接中回到响应的文本或HTML片段。在这几个例子中,将会为您回到HTML根据地视图。请将上边包车型大巴代码增多到项指标Views/Home文件夹的_DailyDeal.cshtml文件中:

@model MvcMusicStore.Models.Album
<p>
  <img alt=”@Model.Title” src=”@Model.AlbumArtUrl” />
</p>
<div id=”album-details”>
  <p>
    <em>Artist:</em>
    @Model.Artist.Name
  </p>
  <p>
    <em>Price:</em>
    @String.Format(”{0:F}”, Model.Price)
  </p>
  <p class=”button”>
    @Html.ActionLink(”Add to cart”, ”AddToCart”,
      ”ShoppingCart”, new { id = Model.AlbumId }, ””)
  </p>
</div>
@model MvcMusicStore.Models.Album  <p>    <img alt=”@Model.Title” src=”@Model.AlbumArtUrl” />  </p>  <div id=”album-details”>    <p>      <em>Artist:</em>      @Model.Artist.Name    </p>    <p>      <em>Price:</em>      @String.Format(”{0:F}”, Model.Price)    </p>    <p class=”button”>      @Html.ActionLink(”Add to cart”, ”AddToCart”,        ”ShoppingCart”, new { id = Model.AlbumId }, ””)    </p>  </div>

今昔当用户点击链接时,三个异步乞求就能被发送到HomeController的DailyDeal动作上。一旦触及操作,动作就能够重返二个HTML片段,脚本在后台运转中会获取到那么些HTML片段并替换掉DOM中dailydeal元素的内容。在用户点击此前,网址首页的平底如图8-2所示。

目前当用户点击链接时,一个异步恳求就可以被发送到HomeController的DailyDeal动作上。一旦触及操作,动作就能够回来三个HTML片段,脚本在后台运营中会获取到这几个HTML片段并替换掉DOM中dailydeal成分的源委。在用户点击在此之前,网址首页的最底层如图8-2所示。

威尼斯人线上娱乐 4

威尼斯人线上娱乐 5

图8-2

图8-2

在用户点击之后,那一个页面(该页面并从未刷新)就改成了图8-3。

在用户点击之后,那几个页面(该页面并未刷新)就产生了图8-3。

威尼斯人线上娱乐 6

威尼斯人线上娱乐 7

图8-3

图8-3

AJAX.ActionLink生成的链接是假设从服务器上赢得内容并在响应完结今后进展沟通的啊?在下一节,大家会深入精晓异步链接是一旦工作的。

AJAX.ActionLink生成的链接是一旦从服务器上获取内容并在响应达成今后举办轮换的吗?在下一节,我们会深深摸底异步链接是只要职业的。

唤醒:假如您想看到动作中的代码,能够利用NuGet来设置Wrox.ProMvc3.AJAX.ActionLink包。包中包罗了MVC音乐公司的多少访谈类,所以最佳将包出席到工程中来,一旦您安装好了包,你就会在/ActionLink中看出新的首页。

提示:若是你想见到动作中的代码,能够行使NuGet来安装Wrox.ProMvc3.AJAX.ActionLink包。包中涵盖了MVC音乐集团的数码访谈类,所以最棒将包参预到工程中来,一旦你安装好了包,你就能够在/ActionLink中看到新的首页。

HTML5属性

HTML5属性

投入你查看渲染实现的链接的源代码,你将拜会到如下内容:

参与你查看渲染完毕的链接的源代码,你将会看出如下内容:

<a data-AJAX=”true” data-AJAX-method=”GET” data-AJAX-mode=”replace”
  data-AJAX-update=”#dailydeal” href=”/Home/DailyDeal”>
  Click here to see today&#39;s special!
</a>
<a data-AJAX=”true” data-AJAX-method=”GET” data-AJAX-mode=”replace”    data-AJAX-update=”#dailydeal” href=”/Home/DailyDeal”>    Click here to see today&#39;s special!  </a>

不唐突的JavaScript的特点正是不会在HTML中看到其余JavaScript代码,並且一定不会有别的脚本代码。假若您精心察看,你会在针对动作的链接上阅览HTML元素有经过编码并包括data-前缀的属性。

不唐突的JavaScript的风味正是不会在HTML中看出别的JavaScript代码,并且肯定不会有其余脚本代码。若是您留心观看,你会在针对动作的链接上观望HTML成分有通过编码并含有data-前缀的品质。

HTML5正经允许使用data-属性为个体应用程序保持状态。换句话说,Web浏览器是不会尝试去解释这一个属性的剧情,所以你能够行使这一个属性随机存款和储蓄本身的数码而不会潜濡默化页面包车型客车体现或渲染。Data-属性以至能够在HTML5专门的学问发布前的浏览器中也足以平时专门的学业。譬喻,Internet
Explorer
6会直接忽略掉它不可能解析的性质,所以data-属性在旧版本的IE浏览器中是截然安全。

HTML5标准允许利用data-属性为个人应用程序保持状态。换句话说,Web浏览器是不会尝试去解释这几个属性的剧情,所以您能够利用这个属性随机存款和储蓄本人的数额而不会影响页面包车型客车展现或渲染。Data-属性以致足以在HTML5行业内部发布前的浏览器中也得以健康干活。比方,Internet
Explorer
6会一贯忽略掉它无法深入分析的质量,所以data-属性在旧版本的IE浏览器中是全然安全。

在应用程序中增添jquery.unobtrusive-AJAX文件的目的正是寻觅data-属性,然后操纵成分的作为。如您所知jQuery能够很轻巧的找到成分,所以您能够设想下不唐突JavaScript文件中央银行使如下代码查找成分:

在应用程序中加多jquery.unobtrusive-AJAX文件的目标正是寻觅data-属性,然后操纵成分的一坐一起。如您所知jQuery能够很轻便的找到成分,所以您能够设想下不唐突JavaScript文件中运用如下代码查找元素:

$(function () {
  $(“a[data-AJAX]=true”). // do something
});
$(function () {    $(“a[data-AJAX]=true”). // do something  });

这段代码表示jQuery要探寻全部data-AJAX属性为true的链接,data-AJAX属性表示近日以此因素须求异步行为。一旦将于规定这么些因素为异步成分,不唐突脚本就能去读取成分的别样装置项(如替换情势、更新指标或HTTP方法)和修改成分相应的作为(平常接纳jQuery事件举办回调,也利用jQuery来发送要求)。全体的ASP.NET
MVC AJAX作用都要动用到data-属性。

这段代码表示jQuery要寻觅全数data-AJAX属性为true的链接,data-AJAX属性表示最近那些因素要求异步行为。一旦将于规定这么些因素为异步成分,不唐突脚本就能够去读取成分的别的装置项(如替换方式、更新目的或HTTP方法)和改变元素相应的表现(平时采取jQuery事件实行回调,也选取jQuery来发送伏乞)。全部的ASP.NET
MVC AJAX功用都要利用到data-属性。

在下一节中,我们来拜谒:异步表单。

在下一节中,大家来看看:异步表单。

AJAX表单

AJAX表单

让大家来设想别的三个有关音乐公司首页的使用场景,你想为用户提供三个搜寻美术师的作用。因为要求用户输入内容,全体必须在页面上停放多个表单标识,不过它并不止是个表单而是——异步表单。

让我们来设想其他三个关于音乐集团首页的应用场景,你想为用户提供八个找寻书法大师的功用。因为要求用户输入内容,全体必须在页面上停放二个表单标志,不过它并不仅是个表单而是——异步表单。

@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”/>
}
@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”/>  }

表单显示之后,当用户点击提交开关,浏览器就能够对HomeController的ArtistSearch动作发起三个异步GET诉求。请留意AJAXOptions中的LoadingElementId参数,当步入异步哀求进度时,客户端框架就会自行呈现该因素。常常,你要求在要素中放入叁个动画,让用户通晓后台正在有职业进展。别的,请小心这里还会有叁个OnFailure选项,以及与该选项相似的一对参数,你能够由此安装来捕获各类客户端的AJAX诉求事件(OnBegin、OnComplete、OnSuccess和OnFailure)。你可感觉这个参数设置JavaScript函数名称,以便在事件爆发时调用。在此为OnFailure事件内定了四个名字为“searchFailed”的函数,在运行时只要超过寻找败北就为实行该函数(你能够将此函数置于MusicScripts.js):

表单显示之后,当用户点击提交按钮,浏览器就能对HomeController的ArtistSearch动作发起二个异步GET诉求。请留意AJAXOptions中的LoadingElementId参数,当进入异步诉求进度时,客户端框架就能够自行展现该因素。经常,你必要在要素中放入二个动画,让用户精晓后台正在有专门的学问展开。其余,请小心这里还会有一个OnFailure选项,以及与该选项相似的一对参数,你能够因而安装来捕获种种客户端的AJAX诉求事件(OnBegin、OnComplete、OnSuccess和OnFailure)。你可以为那些参数设置JavaScript函数名称,以便在事件发生时调用。在此为OnFailure事件内定了八个名字为“searchFailed”的函数,在运营时只要赶过找出战败就为试行该函数(你能够将此函数置于MusicScripts.js):

function searchFailed() {
  $(“#searchresults”).html(“Sorry, there was a problem with the search.”);
}
function searchFailed() {    $(“#searchresults”).html(“Sorry, there was a problem with the search.”);  }

你要求记挂怎么去管理onFailure事件,假诺用户在点击寻找按键,而后台服务器代码重临了二回错误,而页面未申报任何内容,用户会感觉很纳闷。至少呈现出错误的剧情,以便告诉他们你曾经操作了。

你供给思虑怎么着去管理onFailure事件,如若用户在点击找出按键,而后台服务器代码重返了三回错误,而页面未申报任何内容,用户会认为很疑惑。至少展现出荒唐的剧情,以便告诉她们你已经操作了。

BeginForm Helper的一言一动看起来有一点像ActionLink
Helper。最终,当用户点击提交开关提交表单时,将会发起三个AJAX须要到服务器,服务器可以回应大肆格式的剧情。在客户端接收到响应时,不唐突脚本将会把响应内容放置到DOM中。在那个例子中,你将会交替掉ID为searchresults的因素。

BeginForm Helper的行事看起来有一点像ActionLink
Helper。最终,当用户点击提交按键提交表单时,将会发起四个AJAX央浼到服务器,服务器能够回应放肆格式的剧情。在客户端接收到响应时,不唐突脚本将会把响应内容放置到DOM中。在那些例子中,你将会交替掉ID为searchresults的因素。

在这几个事例中,控制器的动作供给查询数据库中的内容并出示到分公司视图中,你可以回到纯文本内容,不过你供给将乐师的作为一个列表由动作表未来总局视图中:

在这些事例中,调节器的动作须要查询数据库中的内容并展现到总部视图中,你能够回到纯文本内容,可是你要求将美术大师的作为三个列表由动作表现在分局视图中:

public ActionResult ArtistSearch(string q)
{
  var artists = GetArtists(q);
  return PartialView(artists);
}

private List<Artist> GetArtists(string searchString)
{
  return storeDB.Artists
    .Where(a => a.Name.Contains(searchString))
    .ToList();
}
public ActionResult ArtistSearch(string q)  {    var artists = GetArtists(q);    return PartialView(artists);  }
  private List<Artist> GetArtists(string searchString)  {    return storeDB.Artists      .Where(a => a.Name.Contains(searchString))      .ToList();  }

笔者们需求为分公司视图获取模型并建设构造列表:在项目标Views/Home文件夹中开创名字为ArtistSearch.cshtml的视图:

我们供给为总局视图获取模型并确立列表:在档案的次序的Views/Home文件夹中开创名称叫ArtistSearch.cshtml的视图:

@model IEnumerable<MvcMusicStore.Models.Artist>
<div id=”searchresults”>
  <ul>
  @foreach (var item in Model) {
    <li>@item.Name</li>
  }
  </ul>
</div>
@model IEnumerable<MvcMusicStore.Models.Artist>  <div id=”searchresults”>    <ul>    @foreach (var item in Model) {      <li>@item.Name</li>    }    </ul>  </div>

唤醒:你能够在大团结的MVC音乐公司项目中增加代码,通过NuGET来设置Wrox.ProMvc3.AJAX.AJAXForm包并张开“/AJAXForm”就能够看看这一个新首页了。

提示:你能够在本人的MVC音乐公司项目中加多代码,通过NuGET来安装Wrox.ProMvc3.AJAX.AJAXForm包并展开“/AJAXForm”就能够见见那个新首页了。

在本章的后面部分,笔者恶魔你将会回来搜索表单为它增加一些附加的功效。以往我们供给聚集精力来看别的一项ASP.NET
MVC框架内置的AJAX作用——客户端验证。

在本章的后面部分,笔者恶魔你将会返回寻觅表单为它增添一些附加的功效。未来大家供给集中精力来看另外一项ASP.NET
MVC框架内置的AJAX功能——客户端验证。

客户端验证

威尼斯人线上娱乐,客户端验证

MVC框架默许就辅助数据注释属性的客户端验证。就好像那一个事例,你能够看来Album类的Title和Price属性:

MVC框架暗中认可就协助数据注释属性的客户端验证。就像这些例子,你可以观望Album类的Title和Price属性:

[Required(ErrorMessage = “An Album Title is required”)]
[StringLength(160)]
public string Title { get; set; }
[Required(ErrorMessage = “Price is required”)]
[Range(0.01, 100.00,
ErrorMessage = “Price must be between 0.01 and 100.00”)]
public decimal Price { get; set; }
[Required(ErrorMessage = “An Album Title is required”)]  [StringLength(160)]  public string Title { get; set; }  [Required(ErrorMessage = “Price is required”)]  [Range(0.01, 100.00,  ErrorMessage = “Price must be between 0.01 and 100.00”)]  public decimal Price { get; set; }

这一个属性要求多少注释来标记那多少个是必填项或概念这些性格的长度或值范围。ASP.NET
MVC会通过模型粘合剂来触发属性的客户端验证,而客户端验证信赖于jQuery验证插件。

那几个属性需求多少注释来标记那个是必填项或概念那脾性格的尺寸或值范围。ASP.NET
MVC会通过模型粘合剂来触发属性的客户端验证,而客户端验证依赖于jQuery验证插件。

jQuery验证

jQuery验证

如前所述,jQuery的验证插件(jquery.validate)暗中同意存放在MVC3应用程序的Scripts文件夹中。如若你期望启用客户端验证功效就必要在将其参与到脚本标识中。在StoreManager文件夹的创导或笔记视图中,你将会见到如下代码:

如前所述,jQuery的表达插件(jquery.validate)暗许存放在MVC3应用程序的Scripts文件夹中。假若您愿意启用客户端验证功用就需求在将其插足到脚本标识中。在StoreManager文件夹的创立或笔记视图中,你将会看出如下代码:

<script src=”@Url.Content(“~/Scripts/jquery.validate.min.js”)”
type=”text/JavaScript”></script>

<script src=”@Url.Content(“~/Scripts/jquery.validate.unobtrusive.min.js”)”
type=”text/JavaScript”></script>
<script src=”@Url.Content(“~/Scripts/jquery.validate.min.js”)”  type=”text/JavaScript”></script>    <script src=”@Url.Content(“~/Scripts/jquery.validate.unobtrusive.min.js”)”  type=”text/JavaScript”></script>

率先个暗记是加载压缩过的jQuery验证插件,jQuery的认证插件已经与具备事件联系(如提交或获得大旨等事件),并在事变触发时推行客户端验证准绳,插件还提供了一整套默许的辨证准则。

第八个旗号是加载压缩过的jQuery验证插件,jQuery的注明插件已经与具备事件联系(如提交或获得主题等事件),并在事变触发时施行客户端验证法规,插件还提供了一整套暗中同意的辨证法规。

Web.config中的AJAX设置

默认情况下,不唐突JavaScript和客户端验证在ASP.NET MVC应用程序中默认是启用的。尽管如此,你还是可以通过Web.config中的appSettings来配置其行为。如果你打开应用程序根目录中的Web.config文件,将会看到appSettings配置项:

<appSettings>

<add key=”ClientValidationEnabled” value=”true”/>

<add key=”UnobtrusiveJavaScriptEnabled” value=”true”/>

</appSettings>

如果你想将整个应用程序的功能关闭,你可以将设置更改为false。此外,你也可以他哦在视图的基础上进行设置。在某个视图中,使用HTML Helper来设置EnableClientValidation和EnableUnobtrusiveJavaScript选项来覆盖配置项中的设置。

禁用功能选项主要是为了兼容与其相依赖的Microsoft AJAX库,而不是jQuery库或自定义脚本。

Web.config中的AJAX设置

默认情况下,不唐突JavaScript和客户端验证在ASP.NET MVC应用程序中默认是启用的。尽管如此,你还是可以通过Web.config中的appSettings来配置其行为。如果你打开应用程序根目录中的Web.config文件,将会看到appSettings配置项:

<appSettings>

<add key=”ClientValidationEnabled” value=”true”/>

<add key=”UnobtrusiveJavaScriptEnabled” value=”true”/>

</appSettings>

如果你想将整个应用程序的功能关闭,你可以将设置更改为false。此外,你也可以他哦在视图的基础上进行设置。在某个视图中,使用HTML Helper来设置EnableClientValidation和EnableUnobtrusiveJavaScript选项来覆盖配置项中的设置。

禁用功能选项主要是为了兼容与其相依赖的Microsoft AJAX库,而不是jQuery库或自定义脚本。

第四个脚本标签包涵了jQuery验证的微软不唐突适配器。那个本子文件的源代码是MVC框架创造用来为jQuery验证适配(调换)验证元数据的(那样jQuery就会驾驭该做什么样了)。元数据是从哪来的?首先,你还记得是何许为专辑创立编辑视图的啊?在Shared文件夹的专辑编辑模板中你需求为视图嵌入EditorForModel类。模板代码如下:

其次个脚本标签包罗了jQuery验证的微软不唐突适配器。那些剧本文件的源代码是MVC框架创立用来为jQuery验证适配(转变)验证元数据的(那样jQuery就能够知晓该做如何了)。元数据是从哪来的?首先,你还记得是怎样为专辑成立编辑视图的啊?在Shared文件夹的专辑编辑模板中您供给为视图嵌入EditorForModel类。模板代码如下:

<p>
  @Html.LabelFor(model => model.Title)
  @Html.TextBoxFor(model => model.Title)
  @Html.ValidationMessageFor(model => model.Title)
</p>
<p>
  @Html.LabelFor(model => model.Price)
  @Html.TextBoxFor(model => model.Price)
  @Html.ValidationMessageFor(model => model.Price)
</p>
<p>    @Html.LabelFor(model => model.Title)    @Html.TextBoxFor(model => model.Title)    @Html.ValidationMessageFor(model => model.Title)  </p>  <p>    @Html.LabelFor(model => model.Price)    @Html.TextBoxFor(model => model.Price)    @Html.ValidationMessageFor(model => model.Price)  </p>

在这里TextBoxFor是非同一般,Helper会为模型创设基于元数据的输入。当TextBoxFor看到验证元数据,如价格和题指标Required和StringLength注释,它们会被表以后HTML中。上面是生成Title属性的符号:

在这里TextBoxFor是非同一般,Helper会为模型营造基于元数据的输入。当TextBoxFor看到验证元数据,如价格和标题标Required和StringLength注释,它们会被表今后HTML中。上面是生成Title属性的符号:

<input
data-val=”true”
data-val-length=”The field Title must be a string with a maximum length of 160.”
data-val-length-max=”160” data-val-required=”An Album Title is required”
id=”Title” name=”Title” type=”text” value=”Greatest Hits” />
<input  data-val=”true”  data-val-length=”The field Title must be a string with a maximum length of 160.”  data-val-length-max=”160” data-val-required=”An Album Title is required”  id=”Title” name=”Title” type=”text” value=”Greatest Hits” />

在此间您又贰遍放到了data-属性,jquery.validate.unobtrusive脚本会利用元数据找到须要声明的要素(从data-val=true初阶),并将jQuery验证插件与成分依照接口连接然后依据元数听大人阐明法则实行验证。jQuery验证会在历次案件或关节事件时被触发,并在错误时霎时给用户发起举报。验证插件也会在交付表单时证实错误,那也表示你无需在服务器须要时独立管理错误。

在那边您又叁次看到了data-属性,jquery.validate.unobtrusive脚本会利用元数据找到必要申明的要素(从data-val=true伊始),并将jQuery验证插件与成分根据接口连接然后依照元数听大人申明法则实践验证。jQuery验证会在历次案件或关节事件时被触发,并在错误时立时给用户发起举报。验证插件也会在交付表单时证实错误,那也意味你不须要在服务器乞请时独自管理错误。

要更进一竿驾驭办事中的细节,就看下一节,自定义客户端验证方案。

要更进一竿询问工作中的细节,就看下一节,自定义客户端验证方案。

自定义表明

自定义表明

在第六章,你选取上面包车型大巴代码,利用马克斯WordsAttribute属性来讲飞鹤个字符串中有所的单词数量:

在第六章,你选择上面包车型大巴代码,利用马克斯WordsAttribute属性来证实二个字符串中存有的单词数量:

public class MaxWordsAttribute : ValidationAttribute
{
  public MaxWordsAttribute(int maxWords)
    :base(“Too many words in {0}”)
  {
    MaxWords = maxWords;
  }

  public int MaxWords { get; set; }

  protected override ValidationResult IsValid(object value,
    ValidationContext validationContext)
  {
    if (value != null)
    {
      var wordCount = value.ToString().Split(‘‘).Length;
      if (wordCount > MaxWords)
      {
        return new ValidationResult(
          FormatErrorMessage(validationContext.DisplayName)
        );
      }
    }
    return ValidationResult.Success;
  }
}
public class MaxWordsAttribute : ValidationAttribute  {    public MaxWordsAttribute(int maxWords)      :base(“Too many words in {0}”)    {      MaxWords = maxWords;    }
    public int MaxWords { get; set; }
    protected override ValidationResult IsValid(object value,
    ValidationContext validationContext)    {      if (value != null)      {        var wordCount = value.ToString().Split(‘‘).Length;        if (wordCount > MaxWords)        {          return new ValidationResult(            FormatErrorMessage(validationContext.DisplayName)          );        }      }      return ValidationResult.Success;    }  }

你能够应用上边这段代码的品质,可是该属性只提供了服务器端的表达扶助:

您能够应用下边这段代码的本性,但是该属性只提供了劳动器端的表达协助:

[Required(ErrorMessage = “An Album Title is required”)]
[StringLength(160)]
[MaxWords(10)]
public string Title { get; set; }
[Required(ErrorMessage = “An Album Title is required”)]  [StringLength(160)]  [MaxWords(10)]  public string Title { get; set; }

为了匡助客户端验证,在下章大家交涉谈为您的性情完结三个接口。

为了帮衬客户端验证,在下章咱们议和论为你的性质完毕八个接口。

IClientValidatable

IClientValidatable

IClientValidatable接口定义了叁个格局:GetClientValidationRules。MVC会在注明那几个指标时意识那么些接口,他会调用GetClientValidationRules来搜寻到三个ModelClientValidationRule对象的数组。那几个指标会将元数据、准则通过框架发送到客户端。

IClientValidatable接口定义了三个措施:GetClientValidationRules。MVC会在表明那么些目的时意识这一个接口,他会调用GetClientValidationRules来查找到一个ModelClientValidationRule对象的数组。那么些指标会将元数据、准绳通过框架发送到客户端。

您能够用上边包车型地铁代码来促成自定义验证器的接口:

你能够用下边包车型大巴代码来兑现自定义验证器的接口:

public class MaxWordsAttribute : ValidationAttribute,
IClientValidatable
{
…
  public IEnumerable<ModelClientValidationRule> GetClientValidationRules(
    ModelMetadata metadata, ControllerContext context)
  {
    var rule = new ModelClientValidationRule();
    rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
    rule.ValidationParameters.Add(“wordcount”, WordCount);
    rule.ValidationType = “maxwords”;
    yield return rule;
  }
}
public class MaxWordsAttribute : ValidationAttribute,  IClientValidatable  {  …    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(      ModelMetadata metadata, ControllerContext context)    {      var rule = new ModelClientValidationRule();      rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());      rule.ValidationParameters.Add(“wordcount”, WordCount);      rule.ValidationType = “maxwords”;      yield return rule;    }  }

您必要明确有稍许新闻须要在客户端实行表达:

您须求确定有个别许音讯需求在客户端进行认证:

  • 假使证实失败,须求呈现怎么错误新闻;
  • 同意使用多少个字;
  • 再有一段JavaScript代码的标记;
  • 只要证实战败,必要彰显怎么错误音讯;
  • 允许使用多少个字;
  • 再有一段JavaScript代码的标志;

请细心,假诺您需求在客户端触发三体系型的求证,你能够同期重临四个法规。

请小心,就算你必要在客户端触发各个类型的注明,你能够而且再次回到五个准则。

代码会从法规的ErrorMessage属性中抽出错误消息。那样可让服务器的错误音信与客户端的错误消息完全合作。ValidationParameters会集能够容纳你所急需的客户端参数,比方允许的最大字符数等。你能够把额外的参数放置到那么些群集中,不但要注意它们的名号,必须符合客户端脚本中的名称。最终,在ValidationType属性会标志你须求在客户端上利用JavaScript代码。

代码会从法则的ErrorMessage属性中抽出错误消息。那样可让服务器的错误音讯与客户端的错误消息完全协作。ValidationParameters集结能够兼容你所须求的客户端参数,比如允许的最大字符数等。你能够把额外的参数放置到那一个集结中,不但要注意它们的称号,必须符合客户端脚本中的名称。最终,在ValidationType属性会标记你须要在客户端上采纳JavaScript代码。

MVC框架须求从GetClientValidationRules方法来获得法则,并系列化后装置到客户端data-属性中:

MVC框架供给从GetClientValidationRules方法来获得准则,并类别化后安装到客户端data-属性中:

<input
data-val=”true”
data-val-length=”The field Title must be a string with a maximum length of 160.”
data-val-length-max=”160”
data-val-maxwords=”Too many words in Title”
data-val-maxwords-wordcount=”10”
data-val-required=”An Album Title is required” id=”Title” name=”Title”
type=”text” value=”For Those About To Rock We Salute You” />
<input  data-val=”true”  data-val-length=”The field Title must be a string with a maximum length of 160.”  data-val-length-max=”160”  data-val-maxwords=”Too many words in Title”  data-val-maxwords-wordcount=”10”  data-val-required=”An Album Title is required” id=”Title” name=”Title”  type=”text” value=”For Those About To Rock We Salute You” />

请留神,maxwords是什么将属性名对应到马克斯WordsAttribute属性上的,是因为你在ValidationType属性中装置了maxwords的文书(必须注意,验证的类别和具有验证参数名必须小写,因为命名必须符合HTML属性准则)。

请留神,maxwords是何等将属性名对应到MaxWordsAttribute属性上的,是因为你在ValidationType属性中安装了maxwords的文书(必须注意,验证的档案的次序和兼具验证参数名必须小写,因为命名必须符合HTML属性准绳)。

今昔,你曾经颇具了客户端上的元数据,可是你仍然要编制一些本子代码来进行验证逻辑。

以后,你早已具备了客户端上的元数据,不过你还是要编写制定一些本子代码来实践验证逻辑。

自定义表明脚本代码

自定义表明脚本代码

万幸的是,你不供给为客户端data-属性中的元数据而编辑任何代码,然则,还是需求在验证中填入两端代码:

幸好的是,你无需为客户端data-属性中的元数据而编制任何代码,可是,还是必要在证实中填入两端代码:

  • 适配器:适配器是为着相称MVC框架的不唐突扩充部分所必要的元数据,不唐突扩张需求将data-属性中的元数据通过适配转变来为jQuery验证可以知道的值;
  • 本身的印证法则:那在jQuery中被称呼验证器。
  • 适配器:适配器是为着相配MVC框架的不唐突扩张部分所急需的元数据,不唐突扩大要求将data-属性中的元数据经过适配转变来为jQuery验证能够知晓的值;
  • 自己的表明准绳:这在jQuery中被堪称验证器。

那么些代码都存储同叁个本子文件中,那时如若你想将代码存入由“自定义脚本”一节所成立的MusicScripts.js文件中。在这种景况下,你供给确认保证MusicScript.js文件会在表达脚本载入之后再开展加载。如下使用脚本配置成分实行创办:

这么些代码都存款和储蓄同叁个本子文件中,那时假诺你想将代码存入由“自定义脚本”一节所创制的MusicScripts.js文件中。在这种气象下,你要求确定保证MusicScript.js文件会在认证脚本载入之后再举行加载。如下使用脚本配置成分进行创办:

@section scripts
{
  <script src=”@Url.Content(“~/Scripts/jquery.validate.min.js”)”
    type=”text/JavaScript”></script>
  <script
    src=”@Url.Content(“~/Scripts/jquery.validate.unobtrusive.min.js”)”
    type=”text/JavaScript”></script>
  <script src=”@Url.Content(“~/Scripts/MusicScripts.js”)” type=”
    text/JavaScript”>
  </script>
}
@section scripts  {    <script src=”@Url.Content(“~/Scripts/jquery.validate.min.js”)”      type=”text/JavaScript”></script>    <script      src=”@Url.Content(“~/Scripts/jquery.validate.unobtrusive.min.js”)”      type=”text/JavaScript”></script>    <script src=”@Url.Content(“~/Scripts/MusicScripts.js”)” type=”      text/JavaScript”>    </script>  }

将那么些引用代码参与到MusicScripts.js中,可以为您提供你必要的代码提示功效:

将那些援用代码参预到MusicScripts.js中,可感到您提供您供给的代码提示功能:

/// <reference path=”jquery-1.4.4.js” />
/// <reference path=”jquery.validate.js” />
/// <reference path=”jquery.validate.unobtrusive.js” />
/// <reference path=”jquery-1.4.4.js” />  /// <reference path=”jquery.validate.js” />  /// <reference path=”jquery.validate.unobtrusive.js” />

先是局地代码是落到实处适配器的,MVC框架的不唐突验证增加会在jQuery.validator.unobtrusive.adapters对象中存款和储蓄全体适配器。你能够采取适配器对象公开的API来扩张新的适配器,如表8-2所示:

率先有的代码是贯彻适配器的,MVC框架的不唐突验证增加会在jQuery.validator.unobtrusive.adapters对象中储存全数适配器。你能够行使适配器对象公开的API来扩大新的适配器,如表8-2所示:

表8-2:适配器方法

表8-2:适配器方法

名称

描述

addBool

为验证器的规则创建一个“开”或“关”适配器。这个方法没有额外的参数。

addSingleVal

为验证器的规则创建一个从元数据匹配单个参数的适配器。

addMinMax

创建一个适配器映射到一组验证规则上,做一个最小值或一个最大值对比检查。或者同时对最大值、最小值一起进行数据规则检查。

add

创建一个与前面提供类型不能匹配的适配器,它需要额外的参数或额外的设置代码。

名称

描述

addBool

为验证器的规则创建一个“开”或“关”适配器。这个方法没有额外的参数。

addSingleVal

为验证器的规则创建一个从元数据匹配单个参数的适配器。

addMinMax

创建一个适配器映射到一组验证规则上,做一个最小值或一个最大值对比检查。或者同时对最大值、最小值一起进行数据规则检查。

add

创建一个与前面提供类型不能匹配的适配器,它需要额外的参数或额外的设置代码。

在证实最大值的事态下,你能够采纳addSingleVal或AddMin马克斯方法(或add,因为它能够兑现任何动静)。假若你无需检查最小值的话,就能够运用addSingleVal的API,如下代码:

在注脚最大值的状态下,你能够采用addSingleVal或AddMin马克斯方法(或add,因为它能够兑现任何情形)。要是你不须要检查最小值的话,就能够运用addSingleVal的API,如下代码:

/// <reference path=”jquery-1.4.4.js” />
/// <reference path=”jquery.validate.js” />
/// <reference path=”jquery.validate.unobtrusive.js” />
$.validator.unobtrusive.adapters.addSingleVal(“maxwords”, “wordcount”);
/// <reference path=”jquery-1.4.4.js” />  /// <reference path=”jquery.validate.js” />  /// <reference path=”jquery.validate.unobtrusive.js” />  $.validator.unobtrusive.adapters.addSingleVal(“maxwords”, “wordcount”);

先是个参数是适配器的名称,必须与服务器端设置法则的ValidationProperty的值同样。首个参数是用来找寻元数据的参数名称。请小心,无需在参数名中动用data-前缀;这里的参数供给与您在劳务器端设置的ValidationParameters集结中的参数名相相称。

先是个参数是适配器的名号,必须与劳务器端设置准绳的ValidationProperty的值一样。第一个参数是用来搜索元数据的参数名称。请留心,没有需求在参数名中应用data-前缀;这里的参数须要与您在劳动器端设置的ValidationParameters集结中的参数名相相称。

适配器绝比较较简单,它首要目的便是为不唐突扩展定位并识别元数据。有了适当的适配器,就能够写验证。

适配器绝对比较轻松,它最主要指标正是为不唐突扩充定位并识别元数据。有了适当的适配器,就足以写验证。

装有验证器都在jQuery.validator对象中,与适配器对象同样,新验证器也是透过验证指标的API来增多的。该方法名是“addMethod”:

具有验证器都在jQuery.validator对象中,与适配器对象同样,新验证器也是通过验证指标的API来增添的。该方法名是“addMethod”:

$.validator.addMethod(“maxwords”, function (value, element, maxwords) {
  if (value) {
    if (value.split(‘‘).length > maxwords) {
      return false;
    }
  }
  return true;
});
$.validator.addMethod(“maxwords”, function (value, element, maxwords) {    if (value) {      if (value.split(‘‘).length > maxwords) {        return false;      }    }    return true;  });

以此办法需求提供多个参数:

本条格局需求提供多少个参数:

  • 验证器名称,根据常规应与适配器名称相相配(和服务器上的ValidationType属性相般配);
  • 评释发生时所需调用的函数。
  • 验证器名称,根据常规应与适配器名称相相配(和服务器上的ValidationType属性相相配);
  • 注解发生时所需调用的函数。

验证函数会接受多少个参数,能够重返真(验证通过)或假(验证败北):

验证函数会接受七个参数,能够再次来到真(验证通过)或假(验证失利):

  • 主意的第四个参数将涵盖输入的值(举个例子专辑的标题);
  • 措施的第4个参数是输入元素,它满含验证所需的值(在那么些事例中并不曾提供对应的新闻);
  • 办法的第多个参数是多少个包罗全部验证参数的多寡,在那几个事例中,只含有了一个证实参数(字符串的最大尺寸)。
  • 方法的首先个参数将涵盖输入的值(举个例子专辑的题目);
  • 办法的第三个参数是输入成分,它含有验证所需的值(在这一个事例中并从未提供对应的音信);
  • 格局的第八个参数是多个包罗全体验证参数的多少,在这一个事例中,只含有了二个表明参数(字符串的最大尺寸)。

固然ASP.NET MVC中的AJAX
Helper提供了大气职能,但任何生态系统要求更加多的jQuery扩大。在下一节中特意探讨这么些核心。

就算ASP.NET MVC中的AJAX
Helper提供了汪洋功能,但整整生态系统必要越来越多的jQuery扩张。在下一节中特意商讨那一个主旨。

单身帮手

单独帮手

如若在浏览器中做客,你会看到有许多的jQuery扩展。这一个扩张大多是面向图形方面包车型地铁也可能有无数连锁地方的事体(动画方面)。恐怕其余类似于日期选取器或Gird的插件。

假使在浏览器中访谈

利用jQuery插件常常需求下载、解压插件并将那一个插件增加到你的类型中。一些jQuery插件能够透过NuGet获得包并轻便到场到您的项目中。插件至少须要贰个JavaScript文件,比较多面向UI的插件或许还亟需附带图像以及样式表文件。

运用jQuery插件平时须要下载、解压插件并将这个插件增加到你的类型中。一些jQuery插件能够通过NuGet获得包并轻易出席到您的项目中。插件至少须求贰个JavaScript文件,多数面向UI的插件大概还亟需附带图像以及样式表文件。

每种ASP.NET
MVC项目更动时都会有三个插件:jQuery验证(你以前使用过的)和jQuery
UI(你今后要来看的)。

每种ASP.NET
MVC项目更改时都会有多个插件:jQuery验证(你前边使用过的)和jQuery
UI(你今后要观望标)。

jQuery UI

jQuery UI

jQuery
UI是jQuery的三个插件,包括效果和Widgets。像全数插件同样,它与jQuery紧聚焦成并增加了jQuery的API。下边回到本章早先的非常例子中——专辑市廛的专栏封面动画代码:

jQuery
UI是jQuery的三个插件,包涵效果和Widgets。像具备插件同样,它与jQuery紧集中成并扩张了jQuery的API。下边回到本章伊始的极度例子中——专辑商店的特辑封面动画代码:

$(function () {
  $(“#album-list img”).mouseover(function () {
    $(this).animate({ height: ‘+=25’, width: ‘+=25’ })
    .animate({ height: ‘-=25’, width: ‘-=25’ });
  });
});
$(function () {    $(“#album-list img”).mouseover(function () {      $(this).animate({ height: ‘+=25’, width: ‘+=25’ })      .animate({ height: ‘-=25’, width: ‘-=25’ });    });  });

利用jQuery
UI来替代专辑封面反转的动画.第一步,你须求在应用程序的布局视图红加多jQuery
UI的脚本引用标签:

行使jQuery
UI来代替专辑封面反转的动画.第一步,你供给在应用程序的布局视图红增添jQuery
UI的台本援引标签:

<script src=”@Url.Content(“~/Scripts/jquery-1.4.4.min.js”)”
type=”text/JavaScript”></script>

<script src=”@Url.Content(“~/Scripts/jquery.unobtrusive-AJAX.min.js”)”
type=”text/JavaScript”></script>

<script src=”@Url.Content(“~/Scripts/jquery-ui.min.js”)”
type=”text/JavaScript”></script>
<script src=”@Url.Content(“~/Scripts/jquery-1.4.4.min.js”)”  type=”text/JavaScript”></script>
  <script src=”@Url.Content(“~/Scripts/jquery.unobtrusive-AJAX.min.js”)”  type=”text/JavaScript”></script>
  <script src=”@Url.Content(“~/Scripts/jquery-ui.min.js”)”  type=”text/JavaScript”></script>

今后,你能够将mouseover事件管理程序改为上面包车型大巴代码:

明天,你能够将mouseover事件管理程序改为上面包车型客车代码:

$(function () {
  $(“#album-list img”).mouseover(function () {
    $(this).effect(“bounce”);
  });
});
$(function () {    $(“#album-list img”).mouseover(function () {      $(this).effect(“bounce”);    });  });

 当用户选拔鼠标滑过专辑时,封面图片会在相当的短的时日内反转。正如您看看的,你能够应用jQuery再次回到的包装集来施行UI扩张插件的议程,那么些点子还提供了第1个“可选”参数,它同意你通过参数来调动行为。

 当用户使用鼠标滑过专辑时,封面图片会在极短的时刻内反转。正如您见到的,你能够行使jQuery再次来到的包裹集来施行UI扩张插件的主意,那一个格局还提供了第二个“可选”参数,它同意你通过参数来调动行为。

$(this).effect(“bounce”, { time: 3, distance: 40 });

$(this).effect(“bounce”, { time: 3, distance: 40 });

你能够由此翻阅jQuery.com插件频道的文书档案来打听这么些可选值(以及它们的暗许值)。在jQuery
UI中还包涵explode,fade,shake和pulsate等职能。

您能够透过阅读jQuery.com插件频道的文书档案来通晓那几个可选值(以及它们的暗中认可值)。在jQuery
UI中还包罗explode,fade,shake和pulsate等功用。

可选项!可选项!无处不在!

“可选项”参数会始终贯穿jQuery和jQuery插件。某些方法可能会需要6、7个不同的参数(如时间、距离、方向或模式等),你可以传递一个对象,通过对象的属性来设置参数。在前一个例子中,需要设置的只有时间和距离。该文档会始终告诉你有哪些可用的参数,并且每个参数的默认值是什么。你构造的对象只需要属性和要设置的参数相对应就好了!

可选项!可选项!无处不在!

“可选项”参数会始终贯穿jQuery和jQuery插件。某些方法可能会需要6、7个不同的参数(如时间、距离、方向或模式等),你可以传递一个对象,通过对象的属性来设置参数。在前一个例子中,需要设置的只有时间和距离。该文档会始终告诉你有哪些可用的参数,并且每个参数的默认值是什么。你构造的对象只需要属性和要设置的参数相对应就好了!

jQuery
UI能做的不只是特效或引发眼球。该插件还蕴藏像西玛ion、autocomplete,按键,日期选用器,对话框,进度条,滑动条或tabs。下一节咱们会做二个活动完结的例证。

jQuery
UI能做的不不过特效或引发眼球。该插件还蕴藏像SANTANAion、autocomplete,开关,日期选拔器,对话框,进度条,滑动条或tabs。下一节大家会做一个自动完毕的例子。

jQuery UI自动完成

jQuery UI自动实现

用作二个widget,AutoComplete须求能够一定在显示屏的新用户界面成分上。这几个元素必要在颜色、字体大小、背景和局地超人细节方面与用户分界面包车型客车其余因素保持一致。jQuery
UI依赖于核心来提供体现细节。jQuery
UI的宗旨包括样式表和图片文件。每一个新成立的MVC项目标Content文件夹中都会有叁个base的核心,这么些大旨会含有样式表(jQuery-ui.css)和images文件夹中的.png文件。

作为三个widget,AutoComplete须求能够固定在显示器的新用户分界面成分上。这些因素要求在颜色、字体大小、背景和有个别优秀细节方面与用户界面的任何因素保持一致。jQuery
UI信赖于主旨来提供显示细节。jQuery
UI的主旨富含样式表和图表文件。每一种新创制的MVC项指标Content文件夹中都会有一个base的主题,那一个核心会包罗样式表(jQuery-ui.css)和images文件夹中的.png文件。

在运用AutoComplete在此以前,你供给安装应用程序的布局视图包罗base宗旨的样式表新闻:

在行使AutoComplete此前,你须求安装应用程序的布局视图包括base宗旨的样式表音信:

<link href=”@Url.Content(“~/Content/Site.css”)” rel=”stylesheet”
type=”text/css” />

<link href=”@Url.Content(“~/Content/themes/base/jquery-ui.css”)”
rel=”stylesheet”)”type=”text/css” />

<script src=”@Url.Content(“~/Scripts/jquery-1.4.4.min.js”)”
type=”text/JavaScript”></script>

<script src=”@Url.Content(“~/Scripts/jquery.unobtrusive-AJAX.min.js”)”
type=”text/JavaScript”></script>

<script src=”@Url.Content(“~/Scripts/jquery-ui.min.js”)”
type=”text/JavaScript”></script>
<link href=”@Url.Content(“~/Content/Site.css”)” rel=”stylesheet”  type=”text/css” />    <link href=”@Url.Content(“~/Content/themes/base/jquery-ui.css”)”  rel=”stylesheet”)”type=”text/css” />    <script src=”@Url.Content(“~/Scripts/jquery-1.4.4.min.js”)”  type=”text/JavaScript”></script>    <script src=”@Url.Content(“~/Scripts/jquery.unobtrusive-AJAX.min.js”)”  type=”text/JavaScript”></script>    <script src=”@Url.Content(“~/Scripts/jquery-ui.min.js”)”  type=”text/JavaScript”></script>

固然你不爱好jQuery内置的私下认可宗旨,你能够透过拜谒

如果您抵触jQuery内置的暗许核心,你能够经过访谈

增添作为

加上行为

第一,你是不是还记得在本章前边部分“歌唱家寻觅”功用中央银行使“AJAX表单”的现象?你须求选择JavaScript找到输入节点并绑定jQuery自动完结的行为。使用这几个效率的方式之一正是用MVC框架的data-属性:

率先,你是还是不是还记得在本章尾巴部分“音乐家寻找”作用中运用“AJAX表单”的场地

<input type=”text” name=”q”
data-autocomplete-source=”@Url.Action(“QuickSearch”, “Home”)” />

透过动用jQuery查找节点的data-autocomplete-source属性,那将会报告你这些因素要四个AutoComplete的作为,并未有AutoComplete部件制订四个数据源,能够让它用那一个来寻觅候选人。AutoComplete通过点名U牧马人L获取远程数据源(获取一个对象数组)并缓存在内部存款和储蓄器中会比较轻巧消耗内部存款和储蓄器。调整每一次从远程数据源获取美学家的数量,发送合理的数据量到客户端。

在MusicScripts.js中,你能够运用上边包车型大巴代码,在ready事件中为全数AutoComplete的data-autocomplete-source属性的输入框附加AutoComplete方法:

$(“input[data-autocomplete-source]”).each(function () {
  var target = $(this);
  target.autocomplete({ source: target.attr(“data-autocomplete-source”) });
});

jQuery的each函数会遍历全体项,在措施中,你可感到指标调用自动实现插件的点子。AutoComplete方法的参数唯有叁个可选参数,与大相当多主意区别它还会有贰个必填参数——数据源属性。你能够设置任何选取,譬喻在按钮跳起的推移之后发轫协商金额,也足以在机关完结之后发送到数据源获取所需的矮小字符数。

在这些例子中,你需求建议三个调控器动作,上面是代码(只是为了避防万一你忘掉):

<input type=”text” name=”q”
  data-autocomplete-source=”@Url.Action(“QuickSearch”, “Home”)” />

AutoComplete将会服从预期访谈数据源并运用抽取到的靶子会集来创设二个用户列表。在HomeController中的QuickSearch动作中要回到贰个autocomplete能够深入分析的数量。

绑定数据源

AutoComplete希望因而调用数据源并得到到JSON格式的指标。幸运的是,你在稍后会看到选拔MVC调控器的动作轻巧就能够生成三个JSON结果。对象必须有Label的性质或Value的习性,或双方都有。Autocomplete会展现用户在选取的label属性。当用户挑选了机关实现列表中的项目,该构件将会把所选的开始和结果放入输入框中。假使您不提供Label或Value,Autocomplete将会动用放肆属性取代Label或value。

行使下边包车型客车代码完成QuickSearch,并回到JSON结果:

public ActionResult QuickSearch(string term)
{
  var artists = GetArtists(term).Select(a => new {value = a.Name});
  return Json(artists, JsonRequestBehavior.AllowGet);
}

private List<Artist> GetArtists(string searchString)
{
  return storeDB.Artists
    .Where(a => a.Name.Contains(searchString))
    .ToList();
}

当Autocomplete调用数据源时,它会将输入项中的值作为查询字符串,你会在动作的参数中收受到这些值。你会在贰个无名类型对象少校美味音乐大师转化成JSON集合併产生一个JsonResult。当框架实践完毕会将以此结果种类化成JSON对象。

JSON 劫持

默认情况下,ASP.NET MVC框架是不允许在HTTP的GET请求时响应并加载JSON结果。你需要发送一个JSON的GET请求,你需要将使用JsonRequestBehavior.AllowGet作为第二个参数明确表明允许获取JSON方法。

然后,即使这样,恶意用户还是可以在访问JSON时进行JSON劫持。如果你不想在GET请求的JSON结果中返回敏感信息,你可以参看Phil的文章:

http://haacked.com/archive/2009/06/25/json-hijacking.aspx

图8-4中展现出了您的劳动成果。

威尼斯人线上娱乐 8

图8-4

JSON不唯有特别轻松访谈的调控器的动作,何况它丰盛轻量级。事实上,JSON央求和响应所产生的负荷比同一体积的HTML或XML数据要小相当多。贰个很好的事例就是找找效果。当用户点击找寻开关时,你最终会显现美学家列表的有的视图。你能够接纳JSON结果来顶替本来视图来减少带宽用量。

从服务器检索JSON数据的骨干难点是,是怎么样种类化对象,可以让它好呢轻松的从服务器传送到页面包车型大巴HTML。你必要运用原本数据在客户端营造HTML。模板是那个繁琐的价值观专业愈发轻便。

JSON和jQuery模板

jQuery模板是jQuery的插件,暗中认可情况下并不含有在MVC3的品种中,你能够从NuGet中获取此插件。模板能够扶助您在客户端塑造HTML。那几个语法类似于Razor视图,从某种意义上说,你选拔特别的HTML分隔符来标记数据出现的地点,这种措施被称呼占位符绑定表明式。参看上面包车型客车代码示例:

  Rating: ${AverageReview}
  Total Reviews: ${TotalReviews}

地点的沙盘对应的AverageReview和TotalReviews属性对象。当渲染jQuery模板时,模板会将值放置在相应的职位。您也足以本着模板进行数量种类实行渲染。你能够由此以下地方来访谈jQuery模板的文书档案:

在底下的章节中,你将会动用JSON和jQuery模板来重写搜索效果。

jQuery 模板的来源

jQuery模板是由微软创作的一个jQuery官方插件的开源项目。事实上,微软正在实施几个jQuery系统的插件,包含jQuery模板、jQuery数据链接和jQuery全球化插件。

累加模板

安装jQuery模板,请右键单击MvcMusicStore项目,并精选“加多到库包援用”。在对话框(如图8-5所示)中搜索“jQuery
Templates”:

威尼斯人线上娱乐 9

图8-5

当NuGet包加多到项目中,项指标Scripts文件夹中会多了八个新的本子:jQuery.tmpl.js和jQuery.tmpl.min.js。在骨子里运用中要将插件的回降版本发送到客户端。

<script src=”@Url.Content(“~/Scripts/jquery-1.4.4.min.js”)”
type=”text/JavaScript”></script>

<script src=”@Url.Content(“~/Scripts/jquery.unobtrusive-AJAX.min.js”)”
type=”text/JavaScript”></script>

<script src=”@Url.Content(“~/Scripts/jquery-ui.min.js”)”
type=”text/JavaScript”></script>

<script src=”@Url.Content(“~/Scripts/jquery.tmpl.min.js”)”
type=”text/JavaScript”></script>

插件放置实现,就足以早先选择模板来达成寻觅效果。

修改搜索表单

在本章的前方“AJAX表单”一节,使用AJAXHelper创制了画画大师找出效果:

@using (AJAX.BeginForm(“ArtistSearch”, “Home”,
new AJAXOptions {
  InsertionMode=InsertionMode.Replace,
  HttpMethod=”GET”,
  OnFailure=”searchFailed”,
  LoadingElementId=”AJAX-loader”,
  UpdateTargetId=”searchresults”,
}))
{
  <input type=”text” name=”q”
    data-autocomplete-source=”@Url.Action(“QuickSearch”, “Home”)” />

  <input type=”submit” value=”search” />

  <img id=”AJAX-loader”
    src=”@Url.Content(“~/Content/Images/AJAX-loader.gif”)”
    style=”display:none”/>
}

虽说AJAXHelper提供了重重效果,你要去除那些帮手,并从头起初。jQuery提供种种从服务器检索数据的异步API。你能够利用这一个效应间接来采纳自动autocomplete
widget等控件。

您根本改动使用jQuery AJAX
Helper的搜寻格局,可是调节器代码依旧保持不变的(今后还并未有行使JSON)。在Index.cshtml中的的新标记代码如下:

<form id=”artistSearch” method=”get” action=”@Url.Action(“ArtistSearch”, “Home”)”>
<input type=”text” name=”q”
  data-autocomplete-source=”@Url.Action(“QuickSearch”, “Home”)” />
<input type=”submit” value=”search” />
<img id=”AJAX-loader” src=”@Url.Content(“~/Content/Images/AJAX-loader.gif”)”
  style=”display:none”/>
</form>

那边代码独一的变通就是向来不选拔AJAXHelper的BeginForm来营造表单。没有Helper你还亟需编写制定本人的JavaScript代码从服务器伏乞HTML。你能够在MusicScripts.js内写如下代码:

$(“#artistSearch”).submit(function (event) {
  event.preventDefault();
  var form = $(this);
  $(“#searchresults”).load(form.attr(“action”), form.serialize());
});

使用代码钩子的款式来交给表单。

jQuery要求调用事件传入的preventDefault方法来幸免产生违反合同事件的行事(在这种情状下,你需求调控诉求和响应,以幸免直接付出到服务器)。

load方法会从U摩根Plus 8L中追寻HTML然后停放到格外的HTML成分(searchresults成分)。load方法的首先个参数表单的action属性值。第四个参数是要传递的查询字符串。jQuery的serialize方法会将表单内部的值都链接成一个字串数据。在这些例子中,你独有贰个文件输入单的值,当用户输入black时,系列化会利用输入框的name和value属性,创设起查询字符串“q=black”。

获得JSON

你曾经修改了代码,然而你还亟需再行调度由服务器再次来到的HTML代码。让大家来退换HomeController调整器中的ArtistSearch动作,并再次来到Json,而不是部分视图:

public ActionResult ArtistSearch(string q)
{
  var artists = GetArtists(q);
  return Json(artists, JsonRequestBehavior.AllowGet);
}

最近,你须求将客户端接收脚本改为Json实际不是HTML片段。jQuery提供名字为getJSON的法子,你能够行使它来查找数据:

$(“#artistSearch”).submit(function (event) {
  event.preventDefault();
  var form = $(this);
  $.getJSON(form.attr(“action”), form.serialize(), function (data){
    // now what?
  });
});

相相比原本的代码,只是由原来的load方法改为调用getJSON方法,不过方法的参数并不一致样。必要二个网站和部分查询字符串数据,那样会发生二个HTTP的GET诉求方法,进而给第七个参数的回调方法传入二个反类别化后的JSON的对象,你须求在回调里面做些什么呢?JSON数据之中是寻觅的美术师结果的数组,然而并未标志来呈现那么些音乐家。那时模板就最首发挥成效。模板是在剧本标识内嵌入的标识。上面包车型客车代码展现模板是假诺来显现找寻结果的符号:

<script id=”artistTemplate” type=”text/x-jquery-tmpl”>
  <li>${Name}</li>
</script>

<div id=”searchresults”>
  <ul id=”artist-list”>
  </ul>
</div>

小心脚本标志的type属性的值为“text/x-jquery-tmpl”。那样能够确定保证浏览器不会准备去把这么些作为真正的本子标识的源委去解释。${Name}语法是绑定表达式。绑定表达式会告知模板引擎找到当前数据对象的属性的名目,并将其填入<li>和</li>之间。那样就会将JSON数据显以往标识间。

您能够在getJSON回调方法中挑选使用你须要的沙盘:

$(“#artistSearch”).submit(function (event) {
  event.preventDefault();
  var form = $(this);
  $.getJSON(form.attr(“action”), form.serialize(), function (data) {
    $(“#artistTemplate”).tmpl(data).appendTo(“#artist-list”);
  });
});

tmpl方法能将JSON数据绑定到DOM成分中。因为JSON数据是贰个artists的数组,模板引擎将会递归各类美学家的数量,并依据代码模板输出到美术师列表。

客户端模板是一个有力的技能,本节只是轻易的垂询了瞬间模板引擎的基本功效。这一个示例只是在落实前边AJAXHelper的效应。你是否还记得在前方“AJAXHelper”一节中会在服务器抛出二个错误时会调用叁个办法,会供给Helper类显示出来三个GIF动画,你也能够透过删除三个抽象等级次序来完毕那么些意义。

灵活的jQuery.ajax方法

当您须求完全调节AJAX诉求就供给采用jQuery的AJAX方法。AJAX方式有一对预备参数,你能够钦定一个HTTP的行事动词(GET或POST)、超时、错误管理或另外。而有所你所见过的任何异步通信情势(load或getJSON)最终供给调用AJAX方法。

固然使用AJAX方法,你也照旧得以接纳AJAXHelper或客户端模板的富有机能:

$(“#artistSearch”).submit(function (event) {
  event.preventDefault();
  var form = $(this);
  $.AJAX({
    url: form.attr(“action”),
    data: form.serialize(),
    beforeSend: function () {
      $(“#AJAX-loader”).show();
    },
    complete: function () {
      $(“#AJAX-loader”).hide();
    },
    error: searchFailed,
    success: function (data) {
      $(“#artistTemplate”).tmpl(data).appendTo(“#artist-list”);
    }
  });
});

调用AJAX方法相比复杂你须求定制相当多的参数设置,如同为load或getJSON方法内定url和data属性同样,AJAX方法为您提供了发送和成就时的回调方法。jQuery将要成功或出错开上下班时间调用那几个回调方法。不过,错误和成功那三个回调方法在做到时只会有四个被实施。在这些事例中一旦jQuery调用失败则会调用你在”AJAX
表单“那一节所定义的searchFailed方法,假若实行成功,你将会看出由模板设定的表现内容。

改善AJAX性能

当您起来向客户端发送大量脚本代码时,你必要留心保持质量。有广大工具得以帮助您来优化网址的客户端品质,包涵Firebug的YSlow(详细的情况见
Explorer的开拓工具(实际情况见

动用内容分发互连网(CDN)

即使如此您可以使用本身的服务器来散发jQuery脚本,而不考虑交由jQuery的开始和结果交给互联网(CDN)。CDN的缓存服务器布满在世界内地,使用它将会给客户带来更加快的下载。因为别的网站也会从CDN援用jQuery,客户恐怕曾经在本地具备了文件缓存,那样做只怕会为别人节省带宽开销。

微软正是这么一个CDN提供商。微软的CDN会承载本章中选用过的持有文件。要是您想从微软的CDN服务器来赢得jQuery服务实际不是团结的服务器,你能够运用以下的剧本标志:

<script src=”http://AJAX.aspnetcdn.com/AJAX/jQuery/jquery-1.4.4.min.js”
  type=”text/JavaScript”></script>

您能够在底下的网址查找到的微软的CDN所提供的文书列表和终极发行版本:

http://www.asp.net/AJAXlibrary/CDN.ashx

本子优化

重重Web开荒人士并不会在文书档案的head成分中选用脚本标志。相反,他们尽量的将脚本放置在左近页面尾部。因为脚本标识放置在页面最上端的head成分中,当浏览器遭受那一个剧本标记时就会下载整个脚本,这种行为会促成页面加载缓慢。能够将富有脚本标记移动到页面尾巴部分(在body标志关闭前),将能够发生更加好的用户体验。

有种技艺,通过减弱自定义的脚本来减少页面加载的年月。正如本章前面“Using
jQuery”中涉及的,压缩JavaScript能够让下载量收缩50%。微软有八个这几个棒的JavaScript压缩器

终极,还应该有别的一种脚本优化技术,能够尽量收缩你发送客户端的台本内容。可与其他给定页面浏览器都回放到这几个本子标识。为了能使传输达到完美效果,你能够将多少个JavaScript文件合併成单个财富。四个脚本在联合时,会在类型中开创多个新的文书,在任何脚本运营时,会在发出HTTP须求时动态构成那么些内容。你能够经过以下地点访谈脚本动态合併项目

小结

本章一知半解式的摸底了弹指间ASP.NET
MVC3的AJAX功效。正如您所知道的,那一个职能相当大程度上正视于开源的jQuery库,以及部分jQuery的常用插件。

在ASP.NET
MVC3应用程序中AJAX功能成功的关键在于对jQuery内容和jQuery怎样专门的工作的问询。jQuery灵活而强劲,它同意你从页面代码大校脚本代码分离,并协理不唐突JavaScript。分离感觉着你能够小心于编写更加好的JavaScript代码,并打通jQuery的更加的多更加好的效果与利益。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图