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

下一節: MVC5 + EF6 + Bootstrap3 (16) 客戶端驗證

源碼下載:點我下載

目錄

前言

在提交數據前進行數據驗證可以保證數據的完整性及有效性。

本節介紹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進行服務器端驗證。可以看到,兩種方法是等效的,結果一模一樣。

后面會持續更新,敬請期待!

 

上一節:MVC5 + EF6 + Bootstrap3 (14) 分部視圖PartialView

下一節: MVC5 + EF6 + Bootstrap3 (16) 客戶端驗證

作者:Slark.NET

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

本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。如有問題或建議,請多多賜教,非常感謝。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM