MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证

简介: 原文:MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证Slark.NET-博客园 http://www.cnblogs.
原文: MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证

Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-server-side-validation.html 

系列教程:MVC5 + EF6 + Bootstrap3

上一节:MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialView

源码下载:点我下载

目录

前言

在提交数据前进行数据验证可以保证数据的完整性及有效性。

本节介绍MVC框架中常用的两种服务器端数据验证方式:

  • 向ModelState中直接添加错误信息
  • 通过Data Annotation验证数据

通过ModelState验证数据

 首先,在Models文件夹下创建Model,文件名为ModelStateModel.cs,代码如下:

1 namespace SlarkInc.Models
2 {
3     public class ModelStateModel
4     {
5         public string Name { get; set; }
6         public string Email { get; set; }
7     }
8 }

Model有Name 和 Email 两个属性,后面我们将对这两个属性做验证。

在Controllers文件夹下创建名为DataValidationController的控制器,代码如下:

 1 using System.Web.Mvc;
 2 using SlarkInc.Models;
 3 using System.Text.RegularExpressions;
 4 
 5 namespace SlarkInc.Controllers
 6 {
 7     public class DataValidationController : Controller
 8     {
 9         public ActionResult ModelStateAction()
10         {
11             return View();
12         }
13 
14         [HttpPost]
15         public ActionResult ModelStateAction(ModelStateModel model)
16         {
17             if (string.IsNullOrEmpty(model.Name))
18             {
19                 ModelState.AddModelError("Name", "Name is required");
20             }
21             if (string.IsNullOrEmpty(model.Email))
22             {
23                 ModelState.AddModelError("Email", "Email is required");
24             }
25             else
26             {
27                 string expression = @"^\s*([A-Za-z0-9_-]+(\.\w+)*@([\w-]+\.)+\w{2,3})\s*$";
28                 Regex reg = new Regex(expression);
29                 if(!reg.IsMatch(model.Email))
30                 {
31                     ModelState.AddModelError("Email", "Email is invalid");
32                 }             
33             }
34             if (ModelState.IsValid)
35             {
36                 ViewBag.Name = model.Name;
37                 ViewBag.Email = model.Email;
38             }
39             return View(model);
40         }
41     }
42 }

代码第9行是通过Get方法访问ModelStateAction,第14行通过Post方法访问ModelStateAction。我们知道服务器端验证是验证提交到服务器的数据,那么这个验证就一定是在Post方法调用的Action中。第17-20行,表示如果model.Name是空,则在ModelState中加入错误信息。AddModelError函数有两个参数,第一个是错误信息的Key,第二个是错误信息的内容。Key的内容一般是属性的名字,这样将来在View中就能在属性对应的地方显示错误信息。同理21-14行验证邮箱是否填写。27-32行验证邮箱是否有效。第34行,ModelState.IsValid是一个bool变量。当没有任何服务器端验证错误时,IsValid是true,否则是false。第34-39行表示如果没有错误则将提交的信息在View中显示出来。

接下来在Views\DataValidation\文件夹下创建ModelStateAction.cshtml文件,对应之前创建的Action。View代码如下:

 1 @model SlarkInc.Models.ModelStateModel
 2 @{
 3     ViewBag.Title = "ModelStateAction";
 4 }
 5 <h2>ModelState Validation</h2>
 6 @Html.ValidationSummary()
 7 @using (Html.BeginForm())
 8 {
 9     if(@ViewData.ModelState.IsValid && ViewBag.Name != null)
10     {
11         <b>
12             Name : @ViewBag.Name
13             <br />
14             Email: @ViewBag.Email  
15         </b>     
16     }
17     <fieldset>
18         <div class="editor-label">
19             @Html.LabelFor(model=>model.Name)
20         </div>
21         <div class="editor-field">
22             @Html.EditorFor(model => model.Name)
23             @Html.ValidationMessageFor(model => model.Name)
24         </div>
25         <div class="editor-label">
26             @Html.LabelFor(model=>model.Email)
27         </div>
28         <div class="editor-field">
29             @Html.EditorFor(model => model.Email)
30             @Html.ValidationMessageFor(model => model.Email)
31         </div>
32         <br />
33         <input type="submit" value="Submit" />
34     </fieldset>

之前我们在Controller中做了服务器端验证,那么这里的View就负责显示验证错误信息。

第6行,Html.ValidationSummary()会把所有验证不通过的信息逐条显示出来。第9行,ViewData.ModelState.IsValid表示验证是否通过。第9-16行表示如果通过验证则在View中显示出来提交的信息。第23、30行,用Html.ValidationMessageFor函数显示属性对应的验证错误信息。

按F5运行这个View。

填入如下所示信息并提交,可以看到数据验证信息:

从图中可以看到ValidationSummary()函数显示了所有验证信息。ValidationMessageFor()函数显示自己对应属性的验证信息。

下面输入正确信息,显示结果如图所示:

图中红色方框内的信息就是提交验证成功ModelState.IsValid为true时显示出来的。

通过Data Annotation验证数据

 在Models文件夹下创建名为DataAnnotationModel的Model。代码如下:

 1 using System.ComponentModel.DataAnnotations;
 2 
 3 namespace SlarkInc.Models
 4 {
 5     public class DataAnnotationModel
 6     {
 7         [Required(ErrorMessage = "Name is required")]
 8         public string Name { get; set; }
 9 
10         [Required(ErrorMessage = "Email is required")]
11         [RegularExpression(@"^\s*([A-Za-z0-9_-]+(\.\w+)*@([\w-]+\.)+\w{2,3})\s*$", ErrorMessage = "Email is invalid")]
12         public string Email { get; set; }
13     }
14 }

不同于ModelState的方法,这里主要是在Model中加入需要验证的条件。

第1行,要使用Data Annotation就需要引用System.ComponentModel.DataAnnotations。第7、10、11行使用了Data Annotation,是对属性的注解。其形式就是一个中括号里包了一个函数。第7、10行,Required()表示这个属性是必填的,ErrorMessage的值是必填项没有填时,显示的错误提示信息。第11行,RegularExpression()是正则表达式验证,只有符合正则表达式的字符串才能通过验证。

在DataValidationController中加入DataAnnotationAction(),代码如下:

 1 using System.Web.Mvc;
 2 using SlarkInc.Models;
 3 using System.Text.RegularExpressions;
 4 
 5 namespace SlarkInc.Controllers
 6 {
 7     public class DataValidationController : Controller
 8     {
 9         public ActionResult DataAnnotationAction()
10         {
11             return View();
12         }
13 
14         [HttpPost]
15         public ActionResult DataAnnotationAction(DataAnnotationModel model)
16         {
17             if (ModelState.IsValid)
18             {
19                 ViewBag.Name = model.Name;
20                 ViewBag.Email = model.Email;
21             }
22             return View(model);
23         }
24     }
25 }

这里的Controller相对前一种验证要简单一些。唯一与验证相关的是第17行ModelState.IsValid,如果验证通过,则向View传入提交的信息。

下面来写这个Action对应的View。在Views\DataValidation文件夹中创建DataAnnotationAction.cshtml文件,写入如下代码:

 1 @model SlarkInc.Models.DataAnnotationModel
 2 @{
 3     ViewBag.Title = "DataAnnotationAction";
 4 }
 5 <h2>Data Annotation Validation</h2>
 6 @Html.ValidationSummary()
 7 @using (Html.BeginForm())
 8 {
 9     if (@ViewData.ModelState.IsValid && ViewBag.Name != null)
10     {
11         <b>
12             Name : @ViewBag.Name
13             <br />
14             Email: @ViewBag.Email
15         </b>
16     }
17     <fieldset>
18         <div class="editor-label">
19             @Html.LabelFor(model => model.Name)
20         </div>
21         <div class="editor-field">
22             @Html.EditorFor(model => model.Name)
23             @Html.ValidationMessageFor(model => model.Name)
24         </div>
25         <div class="editor-label">
26             @Html.LabelFor(model => model.Email)
27         </div>
28         <div class="editor-field">
29             @Html.EditorFor(model => model.Email)
30             @Html.ValidationMessageFor(model => model.Email)
31         </div>
32         <br />
33         <input type="submit" value="Submit" />
34     </fieldset>
35 }

基本上和上一个方法的View一模一样,验证相关的语句都已经用黄色标出。

按F5运行当前View,填入以下信息并提交,页面会显示如下错误信息:

填入正确信息提交之后之后,会显示出提交的信息,结果如下:

结尾

本节我们用了两种不同的方法ModelState和Data Annotation进行服务器端验证。可以看到,两种方法是等效的,结果一模一样。

下一节我们来聊聊如何在EF Code First下做数据库迁移,即databse migration。敬请期待!

 

上一节:MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialView

作者:Slark.NET

出处:http://www.cnblogs.com/slark/

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如有问题或建议,请多多赐教,非常感谢。

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
目录
相关文章
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
11 0
|
2月前
|
弹性计算 网络安全 数据安全/隐私保护
ECS热门应用 | 解决Guestosssh异常
通过ECS实例快速发现操作系统内部的问题,并给出对应的修复方案。
129299 5
|
2月前
|
弹性计算 人工智能 安全
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(3)
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(3)
431 0
|
2月前
|
存储 弹性计算 安全
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(1)
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(1)
335 1
|
2月前
|
弹性计算 安全 网络安全
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(2)
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(2)
478 0
|
2月前
|
存储 弹性计算 安全
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(2)
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(2)
662 1
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(2)
|
1月前
|
弹性计算 人工智能 物联网
挖掘阿里云ECS的潜力:创意应用和未来可能性
在云厂商中,我觉得开发者更信赖阿里云的云产品,而且随着阿里云最近宣布云产品降价的消息,会有更多的开发者和企业选择阿里云的云产品。这里拿阿里云的云服务器来做说明,阿里云的云服务器ECS为用户提供了强大的计算资源和灵活的扩展性,使其成为搭建各种有趣和创意应用的理想平台。除了已知的小游戏、小程序和个人网盘等应用案例之外,本文还会进一步探讨ECS在特定场景下的实践经验,并挖掘其在其他领域的潜力,为大家带来更多创意和启发。
556 3
挖掘阿里云ECS的潜力:创意应用和未来可能性
|
1月前
|
弹性计算 网络安全 文件存储
ECS热门应用 | 安装家用内网穿透服务
使用云服务器ECS,让家庭网络可以被外部网络访问。不在家时,也可以读取备份资料。
|
1月前
|
开发框架 Java .NET
JavaWeb概念、应用、服务器
静态网站是指在服务器上预先准备好的网页内容,用户访问时服务器直接将这些静态页面发送给用户浏览器,没有经过额外的处理或数据库查询。
12 0
|
1月前
|
开发框架 前端开发 JavaScript
使用React、Redux和Bootstrap构建社交媒体应用
使用React、Redux和Bootstrap构建社交媒体应用
13 0