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

一、校验 — 表单不是你想提想提就能提

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());

时间: 2024-10-01 12:40:58

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

ASP.Net MVC开发基础学习笔记(3):Razor视图引擎、控制器与路由机制学习

首页 头条 文章 频道                         设计频道 Web前端 Python开发 Java技术 Android应用 iOS应用 资源 小组 相亲 频道 首页 头条 文章 小组 相亲 资源 设计 前端 Python Java 安卓 iOS 登录 注册 首页 最新文章 经典回顾 开发 Web前端 Python Android iOS Java C/C++ PHP .NET Ruby Go 设计 UI设计 网页设计 交互设计 用户体验 设计教程 设计职场 极客 IT技术

ASP.Net MVC开发基础学习笔记:三、Razor视图引擎、控制器与路由机制学习

一.天降神器“剃须刀” — Razor视图引擎 1.1 千呼万唤始出来的MVC3.0 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留下来的ASPX引擎或者第三方的NVelocity模板引擎. Razor在减少代码冗余.增强代码可读性和Visual Studio智能感知方面,都有着突出的优势.Razor一经推出就深受广大ASP.Net开发者的喜爱. 1.2 Razor的语法 (1)Razor文件类型:Razor支持两种文件类型,分

ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法

一.一个功能强大的页面开发辅助类—HtmlHelper初步了解 1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归.所以抛弃之前的那种事件响应的模型,抛弃服务器端控件也理所当然. 但是,如果手写Html标签效率又比较低,可重用度比较低.这时,我们该怎样来提高效率呢?首先,经过上篇我们知道可以通过ViewData传递数据,于是我们可以写出以下的Html代码: <input name="UserName&quo

ASP.Net MVC开发基础学习笔记(1):走向MVC模式

链接地址:http://blog.jobbole.com/84992/ 一.ASP.Net的两种开发模式 1.1 ASP.Net WebForm的开发模式 (1)处理流程 在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/blog/index.aspx的URL,那么我们的WebForm程序会到网站根目录下去寻找blog目录下的index.aspx文件,然后由index.aspx页面的CodeBehind文件(.CS文件)进行逻辑处理,其中或许也包括到

ASP.Net MVC开发基础学习笔记:一、走向MVC模式

一.ASP.Net的两种开发模式 1.1 ASP.Net WebForm的开发模式 (1)处理流程 在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/blog/index.aspx的URL,那么我们的WebForm程序会到网站根目录下去寻找blog目录下的index.aspx文件,然后由index.aspx页面的CodeBehind文件(.CS文件)进行逻辑处理,其中或许也包括到数据库去取出数据(其中的经过怎样的BLL到DAL这里就不谈了),然后再由

ASP.Net MVC开发基础学习笔记(5):区域、模板页与WebAPI初步

一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新的区域,可以让我们的项目不至于太复杂而导致管理混乱.有了区域后,每个模块的页面都放入相应的区域内进行管理很方便.例如:上图中有两个模块,一个是Admin模块,另一个是Product模块,所有关于这两个模块的控制器.Model以及视图都放入各自的模块内.可以从上图中看出,区域的功能类似一个小的MVC项

ASP.Net MVC开发基础学习笔记:五、区域、模板页与WebAPI初步

一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新的区域,可以让我们的项目不至于太复杂而导致管理混乱.有了区域后,每个模块的页面都放入相应的区域内进行管理很方便.例如:上图中有两个模块,一个是Admin模块,另一个是Product模块,所有关于这两个模块的控制器.Model以及视图都放入各自的模块内.可以从上图中看出,区域的功能类似一个小的MVC项

ASP.Net MVC开发基础学习笔记(2):HtmlHelper与扩展方法

一.一个功能强大的页面开发辅助类—HtmlHelper初步了解 1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归.所以抛弃之前的那种事件响应的模型,抛弃服务器端控件也理所当然. 但是,如果手写Html标签效率又比较低,可重用度比较低.这时,我们该怎样来提高效率呢?首先,经过上篇我们知道可以通过ViewData传递数据,于是我们可以写出以下的Html代码: 1 <input name="UserName&q

ASP.Net MVC开发基础学习笔记(7):数据查询页面

 前言 前面铺垫了那么多,今天我们就用MVC5 + EF6 + Bootstrap3来正式创建一个基本查询页面. 为什么从查询页面开始?嘿嘿,因为小弟的.Net生涯就是从查询页面开始的,记得正式工作的第一个月就是各种模块的查询.先做查询有什么好处?首先查询只读数据,不写数据.对数据库本身的数据安全不造成影响也不怕写入脏数据的麻烦.其次增删改查这四个操作里面,查询的难度应该是最小的,不用考虑事务流程等方面的问题. 本节最后将会生成如下页面: 创建Model 关于Model.数据库上下文.Ent