jQuery不仅支持所有现代浏览器,包括IE、Firefox、Safari、Opera和Chrome等,还可以在编写代码和浏览器API冲突时隐藏不一致性(和错误)。
1. jQuery
jQuery擅长在HTML文档中查找、遍历和操纵HTML元素。一旦找到元素,jQuery就可以方便的在其上进行操作,如连接事件处理程序、使其具有动画效果以及围绕它的Ajax交互等。
1.1 jQuery函数
jQuery函数对象可以用来访问jQuery特性。
1 $(function (){
2 $("#album-list img").mouseover(function(){
3 $(this).animate({ height: '+=25', width: '+=25'})
4 .animate({ height: '-=25', width: '-=25'});
5 });
: $(this).animate({ height: '+=25', width: '+=25'})
.animate({ height: '-=25', width: '-=25'});
上面的例子实现了在触发mouseover事件时,匹配选择器的img元素会产生动画效果。在上面的代码中,之所以使用this关键字来引用要做动画效果的元素,是因为this是指向的是触发事件的元素。
注意代码第一次将元素传递给jQuery函数的方法($(this))。jQuery将该参数看成一个元素的引用参数,并返回一个包含有该元素的封装集。
一旦将某个元素包含在jQuery封装集中,就可以调用jQuery方法(如animate)来操纵这个元素。示例中的代码首先将图像放大,然后在缩小的效果。
1.2 jQuery选择器
选择器是指传递给jQuery函数的,用来在DOM中选择元素的字符串。
例子 意义 $("#header") 查找id值为“header”的元素 $(".editor-label") 查找class名为“.editor-label的所有元素” $("div") 查找所有元素 $("#header div") 查找id值为“header”元素的所有后代元素 $("#header>div") 查找id值为“header”元素的所有子元素 $("a:even") 查找编号为偶数的锚标签
“#album-list img”用来选择id为album-list的标签。
作为选择器的字符串看起来像层叠样式表(Cascading Style Sheet,CSS)中的项,是因为jQuery选择器的语法派生自CSS3.0选择器的语法,并在其基础上做了一些补充。
1.3 jQuery事件
jQuery的另一个优势在于,它提供了用来订阅DOM中事件的API。尽管使用一个通用的on方法可以捕获指定名称的任何事件,但jQuery也为一般的事件提供了专门的方法,比如click、blur和submit。
可以通过传进一个函数来告知jQuery在事件触发时进行的处理。传递进的函数可以是匿名的,也可以是一个作为事件处理程序的命名函数,如下所示:
1 $("#album-list img").mouseover(function(){
2 animateElement($(this));
3 });
4
5 function animateElement(element){
6 element.animate({ height: '+=25', width: '+=25'})
7 .animate({ height: '-=25', width: '-=25'});
8 });
9 }
一旦选择了一些DOM元素或是在一个事件处理程序内,jQuery就可以很容易的操纵页面上的元素,读取或设置他们的特性值,添加或移除他们的CSS类等。下面的代码演示了当用户的鼠标移过元素时,如何向一个页面上的锚标签添加或从中删除highlight类。当用户在标签上移动鼠标时,锚标签就会改变外观(假如有一个合适的highlight样式设置):
1 $("a").mouseover(function(){
2 $(this).addClass("highlight");
3 }).mouseout(function(){
4 $(this).removeClass("highlight");
5 })
注意:
- 代码中用到的所有依赖于封装集的jQuery方法,像mouseover方法,都返回同样的jQuery封装集。这就是说可以继续在选择的元素上调用jQuery方法,而不用再重新选择这些元素。这称为方法链。
- 许多常用操作在jQuery中都有与其对应的捷径方法(shortcut)。设置mouseover和mouseout效果是一种常见的操作,切换样式类型也是一种常见的操作。可以使用jQuery捷径方法重写上面的代码:
1 $("a").hover(function(){
2 $(this).toggleClass("highlight");
标签。
"
上面的调用将渲染/App_Start/BundleConfig.cs中预定义的“jquery”脚本捆绑,这种捆绑利用了ASP.NET中的捆绑和微小特性,该特性利用版本号中包含的通配符匹配,自动优先使用jQuery的轻量版本。
1 public static void RegisterBundles(BundleCollection bundles)
2 {
"~/bundles/jquery").Include(
"));
5
6 //......
1 $(function () {
2 $("#album-list img").mouseover(function () {
3 $(this).animate({ height: '+=25', width: '+=25' })
4 .animate({ height: '-=25', width: '-=25' });
5 });
"
- Modernizr.js:
通过改造老版本浏览器来帮助我们构建富有现代气息的应用程序。其中一个重要工作就是在老版本浏览器中启动新的HTML5元素(比如header、nav和menu),也可以检测特定浏览器是否支持一些高级功能,像定位位置(geolocation)和绘画画布(drawing canvas)。
3 Ajax
3.1 Ajax辅助方法
ASP.NET MVC框架中包含一组Ajax辅助方法,他们可以用来创建表单和指向控制器操作的链接,但不同的是它们是异步进行的。当然使用这些辅助方法时,不需要编写任何脚本代码来实现程序的异步性。
这些Ajax辅助方法依赖于非侵入式MVC的jQuery扩展,如果使用这些辅助方法,需要引入脚本文件jquery.unobtrusive-ajax.js,并在视图中添加此脚本引用。
3.2 在项目中添加非侵入式Ajax脚本
Nuget --> Microsoft jQuery Unobtrusive Ajax --> 安装
脚本引用可以添加到程序的_Layout视图中,也可以仅添加到使用Ajax辅助方法的视图中。除非在网站中发出大量的Ajax请求,否则建议添加到单独的视图中。
脚本的添加可以拖拽。
3.3 Ajax的ActionLink方法
与HTML辅助方法类似,Ajax属性上的大部分Ajax辅助方法都是扩展方法(出了AjaxHelper类型之外)。
Ajax属性的ActionLink方法可创建一个具有异步行为的锚标签,代码实现:
1 <div id="dailydeal">
2 @Ajax.ActionLink("Click here to see today's special!",
3 "DailyDeal",
4 null,
5 new AjaxOptions
6 {
7 UpdateTargetId = "dailydeal",
8 InsertionMode = InsertionMode.Replace,
9 HttpMethod = "GET"
10 },
11 new {@class = "btn btn-primary"})
12 div>
ActionLink
- 第一个参数指定了链接文本;
- 第二个参数是要异步调用的操作的名称,类似于同名的HTML辅助方法,Ajax辅助方法ActionLink也提供了各种重载版本,用来传递控制器的名称、路由值和HTML特性。
- AjaxOptions参数指定了发送请求和处理服务器返回的结果的方式。参数中还包括用来处理错误、显示加载元素、显示确认对话框等的选项。
在这个示例中,AjaxOptions参数的选项指定了要使用来自服务器的响应元素来替换id值为“dailydeal”的元素
- 最后的htmlAttributes参数指定了为链接使用的HTML类,以应用一个基本的Bootstrap按钮样式。
为得到服务器的响应,需要在控制器的HomeController上添加一个DailyDeal操作:
1 public ActionResult DailyDeal()
2 {
3 var album = GetDailyDeal();
4
5 return PartialView("_DailyDeal",album);
6 }
7
8 private Album GetDailyDeal()
9 {
10 var album = storeDB.Albums
11 .OrderBy(a => System.Guid.NewGuid())
12 .First();
13 album.Price *= 0.5m;
14 return album;
1 $(function)(){
2 $("a[data-ajax]=true"). //do something
3 });
这段代码将使用jQuery查找data-ajax特性值为true的所有锚元素。元素上的data-ajax特性用来标识该元素需要实现异步行为。一旦非侵入式脚本识别了异步元素,它就可以读取该元素的其他设置(像替换模式、更新目标以及HTTP方法),还可以通过使用jQuery连接事件和发送请求来修改该元素的行为。
所有ASP.NET MVC Ajax特性都使用data-特性。
3.4 Ajax表单
使用Ajax在页面上放置一个异步表单
1 <div class="panel panel-default">
2 <div class="panel-heading">Artist searchdiv>
3 <div class="panel-body">
4 @using (Ajax.BeginForm("ArtistSearch", "Home",
5 new AjaxOptions
6 {
7 InsertionMode = InsertionMode.Replace,
8 HttpMethod = "GET",
9 OnFailure = "searchFailed",
10 LoadingElementId = "ajax-loader",
11 UpdateTargetId = "searchresults",
12 }))
13 {
14 <input type="text" name="q" />
15 <input type="submit" value="search" />
16 <img id="ajax-loader"
17 src="@Url.Content("~/Images/ajax-loader.gif")"
18 style="display:none" />
19 }
20 <div id="searchresults">div>
21 div>
22 1 function searchFailed() {
2 $("#searchresults").html("Sorry, there was a problem with the search.");
3 }
如果服务器返回一个错误,就意味着Ajax辅助方法执行失败,此时可以捕获OnFailure事件。
- 最后,当用户单击提交按钮提交表单时,服务器会收到一个Ajax请求,并可能以任意格式的内容做出响应。当客户端收到来自服务器端的响应时,非侵入式脚本就会将相应内容放入DOM中。
此处,新内容要替换的是一个id值为searchresults的元素。
控制器中的代码为:
1 public ActionResult ArtistSearch(string q)
2 {
3 var artists = GetArtists(q);
4
5 return PartialView("_ArtistSearch", artists);
6 }
7
8 private List GetArtists(string searchString)
9 {
10 return storeDB.Artists
11 .Where(a => a.Name.Contains(searchString))
12 .ToList();
13 }
渲染的部分视图利用模型构建列表。该部分视图的名称是ArtistSearch.cshtml,位于项目的Views/Home文件夹下。
1 @model IEnumerable<MvcMusicStore.Models.Artist>
2
3 <div id="searchresults">
4 <ul>
5 @foreach (var item in Model)
6 {
7 <li>@item.Nameli>
8 }
9 ul>
10 div>
4客户端验证
对于数据注解特性来说,ASP.NET MVC框架的客户端验证是默认开启的,下面介绍Album类的Title和Price属性:
1 [Required]
2 [StringLength(160, MinimumLength = 2)]
3
4 public string Title { get; set; }
5
6 [Required]
7 [Range(0.01, 100.00)]
8
9 [DataType(DataType.Currency)]
4.2 自定义验证
编写的MaxWordsAttribute验证特性代码如下:
1 public clsaa MaxWordsAttribute : ValidationAttribute
2 {
3 public MaxWordsAttribute(int maxWords) : base("{0} has too many words.")
4 {
5 _maxWords = maxWords;
6 }
7
8 protected override ValidationResult IsValid(object value,
9 ValidationContext validationContext)
10 {
11 var valueAsString = value.ToString();
12 if( valueAsString.Split(' ').Length > _maxWords)
13 {
14 var errorMessage = FormatErrorMessage(validationContext.DisplayName);
15 return new ValidationResult(errorMessage);
16 }
17 return ValidationResult.Success;
18 }
19 private readonly int _maxWords;
20 }
该特性只支持服务器端的验证,使用方法如下:
1 [MaxWords(10)]
2 public string Title { get; set; }
4.2.1 IClientValidatable
IClientValidatable接口定义了单个方法:GetIClientValidationRules。当ASP.NET MVC框架使用这个接口查找验证对象时,它会调用GetClientValidationRules方法来检索ModelClientValidationRule对象序列。这些对象携带有框架发送给客户端的元数据和规则。
可使用下面的代码为自定义验证器实现该接口:
1 public clsaa MaxWordsAttribute : ValidationAttribute,IClientValidatable
2 {
3 public MaxWordsAttribute(int maxWords) : base("{0} has too many words.")
4 {
5 _maxWords = maxWords;
6 }
7 public int WowrdCount { get; set; }
8 protected override ValidationResult IsValid(object value, ValidationContext validationContext)
9 {
10 var valueAsString = value.ToString();
11 if( valueAsString.Split(' ').Length > _maxWords)
12 {
13 var errorMessage = FormatErrorMessage(validationContext.DisplayName);
14 return new ValidationResult(errorMessage);
15 }
16 return ValidationResult.Success;
17 }
18
19 public IEnumerable GetClientValidationRules(MdelMetadata metadata,ControllerContext context)
20 {
21 var rule = new ModelClientValidationRule();
22 rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
23 rule.ValidationParameters.Add("wordcount", WordCount);
24 rule.ValidationType = "maxwords";
25 yield return rule;
26 }
这些信息就是嗲吗放进返回规则中的内容。请注意,如果需要在客户端触发多种类型的验证,代码可以返回多个规则。
ASP.NET MVC框架在客户端上利用GetClientValidationRules方法返回的规则将信息序列化为data-特性。
下一篇:
ASP.NET MVC5入门1之项目创建...
简约风墨鱼形象logo设计请欣赏...
上一篇:
开发推荐专题
更多>
开发公司推荐
-
唐图网络科技有限公司
交易额: 233.74万元
无
|江苏省
|南京市
|建邺区
-
洛阳蓝普网络技术有限公司
交易额: 184.39万元
无
|河南省
|洛阳市
|洛龙区
-
台州云雀网络科技有限公司
交易额: 151.77万元
工作室
|浙江省
|台州市
|玉环县
-
映善中国
交易额: 128.29万元
公司
|广东省
|深圳市
|南山区
成为一品威客服务商,百万订单等您来有奖注册中
热门开发标签
更多>
快速发任务
价格是多少?怎样找到合适的人才?
官方顾问免费为您解答
相关任务
DESIGN TASK
更多
基于淘宝千牛聊天工具的回复插件开发(hook)
¥10000
已有0人投标
桌面应用程序开发
¥50000
已有0人投标
开发一个独立内部查询管理软件
¥100
已有5人投标
招商引资APP开发
¥20000
已有0人投标
APP原生开发
¥20000
已有1人投标
迷你账号管理软件开发,微信沟通
¥1000
已有3人投标
开发ai拍照软件
¥100
已有2人投标
有自己的知识付费网站,需要开发个分销功能
¥100
已有3人投标
相关攻略
RELATED STRATEGY
更多
开发人才
design talent
更多