第8章 Ajax(Jquery、Ajax辅助方法、客户端验证)

发布时间：2020-12-16 03:16:57 所属栏目：百科来源：网络整理

导读：Ajax代表异步JavaScript和XML 一、Jquery 1、jquery特性（1）、jquery函数：用$符号做为别名如：调用 jQuery函数($),并向其中传递了一个匿名的JavaScript函数作为第一个参数。当传递一个函数作为第一个参数时，Jquery就会假定这个函数是要浏览器完成构建H

Ajax代表异步JavaScript和XML

一、Jquery

1、jquery特性
（1）、jquery函数：用$符号做为别名
如：调用 jQuery函数($),并向其中传递了一个匿名的JavaScript函数作为第一个参数。
当传递一个函数作为第一个参数时，Jquery就会假定这个函数是要浏览器完成构建Html页面中的文档对象模型（DOM）后立即执行，
换句话说，这个函数在 从服务器加载完HTML页面之后执行。这样就可以安全地执行函数中与DOM冲突的脚本，我们把这种情况称为“ DOM准备”事件。

<script type="text/javascript">
        $(function () {
            alert("aa");
        });
    </script>

如：向jquery函数 传递一个字符串"#album-list img",jquery把这个字符串解释为选择器。选择器会告知jquery需要在DOM中查找的元素。

$(function () {
            $("#album-list img").mouSEOver(function () {
                $(this).animate({ height: '+=25',width: '+=25' })
                .animate({height:'-=25',width:'-=25'});
            });
        });

（2）、jquery选择器
选择器是指传递给jquery函数的、用来在DOM中选择元素的字符串。
常用的选择器：
$("#header") 查找id值为"header"的元素
$(".editor-label") 查找class名为".editor-label"的所有元素
$("div") 查找所有<div>元素
$("#header div") 查找id值为"header"元素的所有后代<div>元素
$("#header>div")查找id值为"header"元素的所有子<div>元素
$("a:even") 查找编号为偶数的锚标签
（3）、jquery事件
示例：

$("#album-list img").mouSEOver(function(){
    animateElement($(this));
});
function animateElement(element){
     element.animate({height:'+=25',width:'+=25'})
     .animate({height:'-=25',width:'-=25'});
}

示例：当用户在标签上移动鼠标时，锚标签就会改变外挂

$("a").mouSEOver(function(){
   $(this).addClass("highlight");
}).mouSEOut(function(){
   $(this).removeClass("highlight");
});

$("a").mouSEOver(function(){....}).mouSEOut(function(){....}); 方法链
或

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

（4）、jQuery和Ajax

jQuery包含了向Web服务器回发异步请求所需要的所有功能。

2、非侵入式JavaScript

JavaScript代码和标记分离，可以将所有需要的脚本代码打包到.js文件中。

3、jQuery的用法

每新MVC项目都包含一个Scripts文件夹，其中带有多个.js文件。
jQuery核心库是一个名为jquery-<版本号>.js的文件

添加jquery脚本引用：

<script src="~/Scripts/jquery-1.10.2.js"></script>

注意：ASP.NET MVC 的Razor视图引擎会把这里~操作符解析为当前网站的根目录。
引用jQuery必须在，我们编写的js之前引用。

如果想更新到最新版本的jQuery,就必须在代码中查找脚本引用，并使用新版本号加以替换。
我们使用内置的、版本无关的jQuery脚本捆绑。
如：/Views/Shared/_Layout.cshtml 母版中的脚本引用采用了这种方法。

@Scripts.Render("~/bundles/jquery")

除了简化将来的脚本更新，这种捆绑引用还提供了其他许多好处，例如在发布模式下自动使用微小脚本，以及将脚本引用集中到一个位置，从而只需在一个位置进行更新。

小知识点：

@RenderSection("scripts",required: false)

在子页面中可以使用 @section ScriptSection{} 来引用js或者css。这个作用相当于在布局页中定义了一个占位，在子页面中去填充这个占位

注意：@Scripts.Render调用将渲染/App_Start/BundleConfig.cs中预定义的“jquery”脚本捆绑。
这个捆绑利用了Asp.net中的捆绑和微小特性，该特性利用版本号中包含的通配符匹配，自动优先使用jQuery的轻量版本。
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
}

（1）、jQuery和NuGet

Asp.net项目模板实际上使用了NuGet程序包将jQuery库包含进来或更新到jQuery的新版本。

（2）、自定义脚本
在/Scripts/App子目录中，添加名称为MusicScripts.js文件，并在里面写入脚本$(function(){..........});。
再在页面中引用js文件。引用的js文件，必须在引用jQuery文件后面。

（3）、在节中放置脚本 @section Scripts{......}
@section Scripts{
<script type="text/javascript">
$(function () {
alert("aa");
});
</script>
}

脚本会添加到视图的底部，页面@RenderSection("scripts",required: false)的位置
如下图：

（4）、Scripts目录下的其他文件

_references.js 确定在整个项目的全局JavaScript智能感知中包含哪些库

bootstrap.js前端开发的工具包说明：http://v3.bootcss.com/css/#tables-condensed

respond.js bootstrap需要用到的js

modernizr.js 老版本浏览器启用新的Html5元素

二、Ajax辅助方法

创建表单和指向控制器操作的异步链接，需要引用 jquery.unobtrusive-ajax.js。

1、添加脚本

使用NuGet在项目中添加非侵入式Ajax脚本。

联机搜索“Microsoft jQuery Unobtrusive Ajax”

添加脚本引用：

@section Scripts{     
       <script src="....."></script>
       <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    }

2、Ajax的ActionLInk方法
创建一个具有异步行为的锚标签。

_Layout.cshtml 中@RenderSection("scripts",required: false) 后添加异步按钮

<div id="dailydeal">
        @Ajax.ActionLink("链接文本","DailyDeal",null,new AjaxOptions
            {
                UpdateTargetId = "dailydeal",InsertionMode = InsertionMode.Replace,HttpMethod = "GET"
            },new { @class = "btn btn-primary" }
        )
    </div>

public ActionResult DailyDeal()
        {
            return PartialView();
        }

点击按钮后，会将DailyDeal视图异步替换按钮内容。

3、HTML5特性

ActionLInk方法渲染后的代码：

<div id="dailydeal">
        <a class="btn btn-primary" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#dailydeal" 

href="/Home/DailyDeal">链接文本</a>
    </div>

在HTML中看不到脚本代码（非入侵式JavaScript），并且大多数的编码特性都有data-前缀。
HTML5规范为私有应用程序状态保留了data-特性。
jquery.unobstrusive-ajax文件的目的是查找特定的data-特性,然后操作元素使其表现出不同行为。
如：

$(function(){
$("#a[data-ajax]=true")
});

jQuery查找data-ajax特性值为True,执行异步行为。

4、Ajax表单

效果：

代码：

当用户点击提交按钮时，浏览器会向控制器HomeController的ArtistSearch操作发送异步GET请求

<script type="text/javascript">
            function searchFailed()
            {
                $("#searchresults").html("没找到数据");
            }
        </script>

        @using (Ajax.BeginForm("ArtistSearch","Home",new AjaxOptions
            {
                InsertionMode = InsertionMode.Replace,HttpMethod="GET",OnFailure = "searchFailed",//查询失败,执行JS函数searchFailed
                LoadingElementId = "ajax-loader",//正在查询时，显示图片ID:ajax-loader
                UpdateTargetId="searchresults"//查询结束后,更新DOM的Id
            }))
        { 
            <input type="text" name="q"/>
            <input type="submit" value="search"/>
            <img id="ajax-loader"
                 src="@Url.Content("~/Images/ajax-loader.gif")"
                 style="display:none"
                 />
        }
        <div id="searchresults">

        </div>

Model

namespace WebApplication1.Models
{
    public class Artist
    {
        public string Name { get; set; }
    }
}

控制器

public ActionResult ArtistSearch(string q)
        {
            var artists=GetArtists(q);
            return PartialView(artists);//返回部分视图PartialView
        }


        private List<Artist> GetArtists(string searchString)
        {
            List<Artist> Artist = new List<Artist>(){
                new Artist(){Name="aa"},new Artist(){Name="bb"},new Artist(){Name="bbc"}
            };
            return Artist.Where(a => a.Name.Contains(searchString))
                         .ToList();
        }

视图

@model IEnumerable<WebApplication1.Models.Artist>
<div>
    <ul>
        @foreach (var item in Model)
        {
           <li>@item.Name</li>
        }
    </ul>
</div>

三、客户端验证

MVC框架的客户端验证是默认开启的。
1、JQuery验证
jquery.validate.js文件
jquery.validate.unobtrusive.js 非入侵Js

web.config文件中的Ajax设置
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

</appSettings>

2、自定义验证

服务器端验证方法：

/// <summary>
    /// ValidationAttribute:验证属性基类
    /// </summary>
    public class MaxWordsAttribute : ValidationAttribute
    {
        public MaxWordsAttribute(int maxWords)
            : base("字符串最长{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="Title非空")]
        [MaxWords(10)]
        public string Title { get; set; }

客户端验证方法：

第1步：IClientValidatable接口定义了单个方法：GetClientValidationRules 方法返回规则将信息序列化为data特性

public class MaxWordsAttribute : ValidationAttribute,
IClientValidatable
{
public MaxWordsAttribute(int wordCount)
: base("字符串最长{0}")
{
WordCount = wordCount;
}
public int WordCount { get; set; }
protected override ValidationResult IsValid(
object value,
ValidationContext validationContext)
{
if (value != null)
{
var wordCount = value.ToString().Split(' ').Length;
if (wordCount > WordCount)
{
return new ValidationResult(
FormatErrorMessage(validationContext.DisplayName)
);

}
}
return ValidationResult.Success;
}
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;
}
}

第2步：自定义验证脚本代码

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

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

了解更多：百度【ASP.NET MVC 5 客户端验证】