ASP.Net MVC开发基础学习笔记：四、校验、AJAX与过滤器
浏览数：26 /
时间：2015年06月09日
一、校验 — 表单不是你想提想提就能提
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">
<div id="loading" >
<img src="~/Content/ico_loading2.gif" />正在获取中，请稍候...
</div>
<span id="spResult"></span>
</td>
</tr>
</table>
}
复制代码
这里需要注意的是：
①Ajax.BeginForm没有提供闭合的方法，需要使用Using配合关闭；
②AjaxOptions参数的设置：
HttpMethod代表此次AJAX请求到底是POST方式还是GET方式？这里是POST方式；
Confirm代表点击提交按钮后提出的确认对话框，并给出用户给定的提示语，这里是：您确定要提交？
InsertionMode代表请求获得后的数据是要替换还是追加，一般选择替换，即Replace；
UpdateTargetId代表需要替换的div标签的Id，这里是一个span标签，代表需要显示的信息都显示在这个span内；
OnSuccess代表请求成功后所需要执行的回调方法，是一个js方法，可以自定义，这里是一个function afterSuccess()的方法；
function afterSuccess(data) {
//alert("您已成功获取数据：" + data);
}
LoadingElementId="loading"是一个很有意思的属性，代表在ajax请求期间为了提供良好的用户体验，可以给出一个正在加载中的提示，而这个LoadingElementId则代表一个提示的div区域的Id。这里主要是指id为loading的这个div，其中有一张gif图片及一句话：正在获取中，请稍等...的提示。
<div id="loading" >
<img src="~/Content/ico_loading2.gif" />正在获取中，请稍候...
</div>
为了显示加载提示的效果，我们人为地修改一下Action方法，使用Thread.Sleep(3000)来延迟一下请求返回时间
public ActionResult GetServerDate()
{
System.Threading.Thread.Sleep(3000);
return Content(DateTime.Now.ToString());
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
