loading请求处理中...

ASP.NET MVC5高级编程 之 Ajax

2021-12-02 07:58:41 阅读 9194次 标签: asp动态网页设计asp.net开发基础 作者: yf8488240

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在事件触发时进行的处理。传递进的函数可以是匿名的,也可以是一个作为事件处理程序的命名函数,如下所示:

ASP.NET MVC5高级编程 之 Ajax
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 }
ASP.NET MVC5高级编程 之 Ajax

      一旦选择了一些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的轻量版本。

ASP.NET MVC5高级编程 之 Ajax
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 --> 安装

    ASP.NET MVC5高级编程 之 Ajax

    脚本引用可以添加到程序的_Layout视图中,也可以仅添加到使用Ajax辅助方法的视图中。除非在网站中发出大量的Ajax请求,否则建议添加到单独的视图中。

    脚本的添加可以拖拽。

     

     3.3 Ajax的ActionLink方法

    与HTML辅助方法类似,Ajax属性上的大部分Ajax辅助方法都是扩展方法(出了AjaxHelper类型之外)。

    Ajax属性的ActionLink方法可创建一个具有异步行为的锚标签,代码实现:

    ASP.NET MVC5高级编程 之 Ajax
     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>
    ASP.NET MVC5高级编程 之 Ajax

     

    ActionLink

    • 第一个参数指定了链接文本;
    • 第二个参数是要异步调用的操作的名称,类似于同名的HTML辅助方法,Ajax辅助方法ActionLink也提供了各种重载版本,用来传递控制器的名称、路由值和HTML特性。
    • AjaxOptions参数指定了发送请求和处理服务器返回的结果的方式。参数中还包括用来处理错误、显示加载元素、显示确认对话框等的选项。

            在这个示例中,AjaxOptions参数的选项指定了要使用来自服务器的响应元素来替换id值为“dailydeal”的元素

    •  最后的htmlAttributes参数指定了为链接使用的HTML类,以应用一个基本的Bootstrap按钮样式

     

    为得到服务器的响应,需要在控制器的HomeController上添加一个DailyDeal操作:

    ASP.NET MVC5高级编程 之 Ajax
     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在页面上放置一个异步表单 

    ASP.NET MVC5高级编程 之 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的元素

 

控制器中的代码为:

ASP.NET MVC5高级编程 之 Ajax
 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    }
ASP.NET MVC5高级编程 之 Ajax

渲染的部分视图利用模型构建列表。该部分视图的名称是ArtistSearch.cshtml,位于项目的Views/Home文件夹下。 

ASP.NET MVC5高级编程 之 Ajax
 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>
ASP.NET MVC5高级编程 之 Ajax

 

4客户端验证

对于数据注解特性来说,ASP.NET MVC框架的客户端验证是默认开启的,下面介绍Album类的Title和Price属性:

ASP.NET MVC5高级编程 之 Ajax
 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验证特性代码如下:

ASP.NET MVC5高级编程 之 Ajax
 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   }
ASP.NET MVC5高级编程 之 Ajax

该特性只支持服务器端的验证,使用方法如下:

1     [MaxWords(10)]
2     public string Title { get; set; }

4.2.1 IClientValidatable

IClientValidatable接口定义了单个方法:GetIClientValidationRules。当ASP.NET MVC框架使用这个接口查找验证对象时,它会调用GetClientValidationRules方法来检索ModelClientValidationRule对象序列。这些对象携带有框架发送给客户端的元数据和规则。

可使用下面的代码为自定义验证器实现该接口:

ASP.NET MVC5高级编程 之 Ajax
 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-特性。

 

开发公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

留言( 展开评论

快速发任务

价格是多少?怎样找到合适的人才?

官方顾问免费为您解答

 
相关任务
DESIGN TASK 更多
桌面应用程序开发

¥50000 已有0人投标

招商引资APP开发

¥20000 已有0人投标

APP原生开发

¥20000 已有1人投标

开发ai拍照软件

¥100 已有2人投标