欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.Net MVC开发基础学习笔记:四、校验、AJAX与过滤器

程序员文章站 2022-05-28 20:11:47
一、校验 — 表单不是你想提想提就能提   1.1 DataAnnotations(数据注解)   位于 System.ComponentModel.D...
一、校验 — 表单不是你想提想提就能提

 

1.1 DataAnnotations(数据注解)

  位于 System.ComponentModel.DataAnnotations 命名空间中的特性指定对数据模型中的各个字段的验证。这些特性用于定义常见的验证模式,例如范围检查和必填字段。而 DataAnnotations 特性使 MVC 能够提供客户端和服务器验证检查,使你无需进行额外的编码来控制数据的有效。

 

  通过为模型类增加数据描述的 DataAnnotations ,我们可以容易地为应用程序增加验证的功能。DataAnnotations 允许我们描述希望应用在模型属性上的验证规则,ASP.NET MVC 将会使用这些 DataAnnotations ,然后将适当的验证信息返回给用户。

 

  在DataAnnotations为我们所提供的众多内置验证特性中,用的最多的其中的四个是:

 

  (0)[DisplayName]:显示名 – 定义表单字段的提示名称

 

  (1)[Required] :必须 – 表示这个属性是必须提供内容的字段

 

  (2)[StringLength]:字符串长度 – 定义字符串类型的属性的最大长度

 

  (3)[Range]:范围 – 为数字类型的属性提供最大值和最小值

 

  (4)[RegularExpression]:正则表达式 – 指定动态数据中的数据字段值必须与指定的正则表达式匹配 

 

1.2 使用DataAnnotations为Model进行校验

  假设我们的Model中有一个UserInfo的实体,其定义如下:

 

    public class UserInfo

    {

        public int Id { get; set; }

        public string UserName { get; set; }

        public int Age { get; set; }

    }

  UserInfo的属性很简单,只有三个:Id,UserName和Age三个字段;现在我们可以为其增加验证特性,看看其为我们提供的强大的校验功能。

 

  (1)非空验证

 

  添加特性:

 

复制代码

[Display(Name="用户名")]

[Required(ErrorMessage = "*姓名必填")]

public string UserName { get; set; }

    

[Display(Name = "年龄")]

[Required(ErrorMessage = "*年龄必填")]

public int Age { get; set; }

复制代码

  验证效果:

 

 

 

  (2)字符串长度验证

 

  添加特性:

 

[Display(Name="用户名")]

[Required(ErrorMessage = "*姓名必填")]

[StringLength(5, ErrorMessage = "*长度必须小于5")]

public string UserName { get; set; }

  验证效果:

 

 

 

  (3)范围验证

 

  添加特性:

 

[Display(Name = "年龄")]

[Required(ErrorMessage = "*年龄必填")]

[Range(18, 120)]

public int Age { get; set; }

  验证效果:

 

 

 

  (4)正则表达式验证

 

  添加特性:验证用户输入的是否是数字,正则表达式匹配

 

[Display(Name = "年龄")]

[Required(ErrorMessage = "*年龄必填")]

[Range(18, 120)]

[RegularExpression(@"^\d+$", ErrorMessage = "*请输入合法数字")]

public int Age { get; set; }

  验证效果:

 

 

 

  (5)浏览所生成的HTML代码

 

 

 

  从上图可以看出,我们在浏览器端的校验都是通过为html标签设置自定义属性来实现的,我们在Model中为其添加的各种校验特性,都会在客户端生成一个特定的属性,例如:data-val-length-max=“5”与data-val-length="*长度必须小于5"对应[StringLength(5, ErrorMessage = "*长度必须小于5")]。然后,通过jquery validate在客户端每次提交之前进行校验,如果校验匹配中有不符合规则的,则将message显示在一个特定的span标签(class="field-validation-valid")内,并阻止此次表单提交操作。

 

1.3 使用DataAnnotations的注意事项

  (1)首先,要确保需要进行校验的页面中引入了指定的几个js文件:

 

<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库的js文件也是必须的,而且在上面这两个js之前引入;

 

  (2)在 Web.config 的appSettings中,已经默认支持了客户端验证(MVC3.0及更高版本中默认支持,MVC2.0则需要修改一下):

 

<!-- 是否启用全局客户端校验 -->

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

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

PS:Unobtrusive Javascript有三层含义:

 

一是在HTML代码中不会随意的插入Javsscript代码,只在标签中加一些额外的属性值,然后被引用的脚本文件识别和处理;

 

二是通过脚本文件所增加的功能是一种渐进式的增强,当客户端不支持或禁用了Javsscript时网页所提供的功能仍然能够实现,只是用户体验会降低;

 

三是能够兼容不同的浏览器。

 

  (3)在Action中如果要对客户端是否通过了校验进行验证,可以通过以下代码实现:

 

复制代码

        [HttpPost]

        public ActionResult Add(UserInfo userInfo)

        {

            if (ModelState.IsValid)

            {

                 // To do fun

            }

 

            return RedirectToAction("Index");

        }

复制代码

  如果通过校验,则ModelState的IsValid属性(bool类型)会变为true,反之则为false。

 

二、ASP.Net MVC下的两种AJAX方式

 

2.1 使用JQuery AJAX方式

  首先,在ASP.Net MVC中使用此种方式跟普通的WebForm的开发方式是一致的,需要注意的是:Url地址不同->请求的是Controller下的Action,例如在WebForm中请求的url通常是/Ajax/UserHandler.ashx,而在MVC中请求的url通常为:/User/GetAll。

 

  例如,我们在一个View中添加一个按钮,用于使用AJAX获取一个服务器端的时间:

 

<h1>JQuery Ajax方式</h1>

<input id="btnJQuery" type="button" value="获取服务器时间" />

  在Home控制器中增加一个用于返回时间的Action:

 

public ActionResult GetServerDate()

{return Content(DateTime.Now.ToString());

}

  在View中增加一段JQuery代码,为btnJQuery按钮绑定一个Click事件:

 

复制代码

    $(function () {

            $("#btnJQuery").click(function () {

                $.post("/Home/GetServerDate", {}, function (data) {

                    if (data != null) {

                        $("#spTime").html(data);

                    }

                });

            });

    });

复制代码

  这里通过JQuery AJAX发送一个异步的POST请求,获取服务器时间结果,并将其显示在span标签内:

 

 

 

  至此,一个使用JQuery Ajax的MVC页面就完成了。但是,这仅是一个最简单的AJAX示例,在实际开发中往往比较复杂一点。

 

  需要注意的是:

 

  (1)如果你在JQuery AJAX中使用的是get方式的提交,那么在在使用Json返回JsonResult时注意要将第二个参数设置允许Get提交方式:return Json("",JsonRequestBehavior.AllowGet),否则你用get方式是无权执行要请求的Action方法的。

 

  (2)在Ajax开发中要注意Ajax方法体内的参数设置正确,特别是参数名要和Action中的参数名保持一致;

 

  (3)如果在Action中为其设置了[HttpPost]或[HttpGet],那么提交方式要跟Action打的标签一致;

 

2.2 使用Microsoft AJAX方式

  在ASP.Net MVC中除了可以使用JQuery AJAX外,Microsoft为我们提供了另一套实用且更简单的AJAX方案,我们姑且称其为:Microsoft AJAX方式。

 

  (1)首先:

 

  需要将微软提供的js脚本引入到页面中:其实就是jquery.unobtrusive-ajax.js

 

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

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

  确保在Web.config中启用了Unobtrusive JavaScript

 

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

  (2)其次,使用Ajax.BeginForm方法构造一个form表单:

 

复制代码

       <h1>Microsoft Ajax方式</h1>

        @using (Ajax.BeginForm("GetServerDate", "Home", new AjaxOptions()

        {

            HttpMethod = "POST",

            Confirm = "您确定要提交?",

            InsertionMode = InsertionMode.Replace,

            UpdateTargetId = "spResult",

            OnSuccess = "afterSuccess",

            LoadingElementId="loading"

        }))

        {

            <table>

                <tr>

                    <td>用户名:</td>

                    <td>

                        <input id="txtUserName" name="UserName" /></td>

                </tr>

                <tr>

                    <td>密   码:</td>

                    <td>

                        <input id="txtPassword" name="Password" /></td>

                </tr>

                <tr>

                    <td align="center" colspan="2">

                        <input id="btnAjax" type="submit" value="提 交" />

                    </td>

                </tr>

                <tr>

                    <td align="center" colspan="2">

                        <p id="loading" style="display:none">

                            <img style="vertical-align:middle" src="~/Content/ico_loading2.gif" />正在获取中,请稍候...

                        </p>

                        <span id="spResult"></span>

                    </td>

                </tr>

            </table>

        } 

复制代码

  这里需要注意的是:

 

  ①Ajax.BeginForm没有提供闭合的方法,需要使用Using配合关闭;

 

  ②AjaxOptions参数的设置:

 

  HttpMethod代表此次AJAX请求到底是POST方式还是GET方式?这里是POST方式;

 

  Confirm代表点击提交按钮后提出的确认对话框,并给出用户给定的提示语,这里是:您确定要提交?

 

  InsertionMode代表请求获得后的数据是要替换还是追加,一般选择替换,即Replace; 

 

  UpdateTargetId代表需要替换的p标签的Id,这里是一个span标签,代表需要显示的信息都显示在这个span内;

 

  OnSuccess代表请求成功后所需要执行的回调方法,是一个js方法,可以自定义,这里是一个function afterSuccess()的方法;

 

        function afterSuccess(data) {

            //alert("您已成功获取数据:" + data);

        }

  LoadingElementId="loading"是一个很有意思的属性,代表在ajax请求期间为了提供良好的用户体验,可以给出一个正在加载中的提示,而这个LoadingElementId则代表一个提示的p区域的Id。这里主要是指id为loading的这个p,其中有一张gif图片及一句话:正在获取中,请稍等...的提示。

 

<p id="loading" style="display:none">

      <img style="vertical-align:middle" src="~/Content/ico_loading2.gif" />正在获取中,请稍候...

</p>

  为了显示加载提示的效果,我们人为地修改一下Action方法,使用Thread.Sleep(3000)来延迟一下请求返回时间

 

        public ActionResult GetServerDate()

        {

            System.Threading.Thread.Sleep(3000);

            return Content(DateTime.Now.ToString());