Slark.NET-博客園 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-server-side-validation.html
上一節: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/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。如有問題或建議,請多多賜教,非常感謝。