上篇博文通過一個簡單的實例簡單的介紹了Model 已經它和Controller View 的關聯,本篇博文接着上篇沒有完成的Model驗證部分的知識繼續寫
如果您還沒有看上篇博文強烈建議您先看一下上篇博文 ASP.NET MVC 3 Model【通過一簡單實例一步一步的介紹】 這篇博文的例子還是上一篇博文的例子的延續所以我建議您先看一下上篇博文。
我們都知道開發互聯網應用的時候永遠不要相信客戶端傳過來的數據(這樣的話安全隱患會大大降低)所以我們不僅要對其客戶端驗證,也要在服務端進行驗證。MVC 3 給我們提供了一個簡單的方式進行數據驗證。而且是客戶端和服務端雙向驗證很像webform的驗證控件。 MVC 3 是默認開啟客戶端驗證的,如果您用的是MVC 2 您還得再改一下配置文件導入兩個jquery文件就ok了。
下面我給您打開一下Web.config 文件您看下這是MVC 3 的默認開啟了javascript 客戶端驗證。
1 <appSettings> 2 <add key="ClientValidationEnabled" value="true"/> 3 <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 4 </appSettings>
第2行很明顯已經開啟了驗證,那您又說了剛才你不是說還得在頁面里加兩個jquery文件嗎?您別着急啊馬上貼代碼下面這個一會兒將要建的Create.cshtml頁面
<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>
好,下一步咱就先改寫一下上一篇的Person類直接上代碼然后解釋
1 public class Person 2 { 3 [DisplayName("編號")] 4 [Required(ErrorMessage = "編號不能為空!")] 5 [RegularExpression("00\\d*", ErrorMessage = "編號必須以00開始,且至少三位")] 6 //[IdCard(ErrorMessage = "編號必須以00開始,且至少三位")] 7 public string IdCard { get; set; } 8 9 [DisplayName("姓名")] 10 [Required] 11 [StringLength(3, ErrorMessage = "姓名最多為3個漢字")] 12 public string Name { get; set; } 13 [DisplayName("性別")] 14 [RegularExpression("男|女", ErrorMessage = "性別錯誤!男/女")] 15 public string Sex { get; set; } 16 [DisplayName("年齡")] 17 [Range(0, 150, ErrorMessage = "年齡應在0 - 150 歲之間")] 18 public int Age { get; set; } 19 }
您可能還不了解什么是特性什么是屬性在這我給您簡單的介紹下,知道的可以直接跳過了。
屬性:就是您經常在類里面寫的那些比如上面第7行 public string IdCard {get;set;} 這個IdCard 就是 Person 類的一個屬性。它有其對應的get set
特性:故名思議特別的屬性,就如您所見第 3 - 5 行就是Idcard屬性的特性,它是對一個屬性的限制,Modul 中的驗證就是通過特性實現的。咱可以實現自己的驗證特性本文最后將會講到。
知道了什么是特性屬性了咱就分析下上面的代碼吧!
第9行 [DisplayName("姓名")] 客戶端要顯示的文本,View層會有專門的Html helper 來讀取它,這個一會兒再說。
第10行 [Required] 故名思議,必須必填的意思,就是限制它對於的屬性字段是必填了,如果客戶端沒有填它會返回您設置的那個錯誤信息,再這提醒您一下如果您沒有指定ErrorMessage這個屬性的話MVC 呢會自動的提示 .. 字段是必填的,並且支持國際化是中文提示。
第11行 [StringLength(3, ErrorMessage = "姓名最多為3個漢字")] 這個特性就是現在字符串長度最長是多長。
第14行[RegularExpression("男|女", ErrorMessage = "性別錯誤!男/女")] 這個屬性是通過正則表達式驗證。如果您還不知道正則表達式是什么東西我建議您看下張子陽的一篇博文由於排版有問題他只提供了電子版總共130多頁吧http://www.tracefact.net/document/Regular-Expression-Tutorial.pdf
第17行[Range(0, 150, ErrorMessage = "年齡應在0 - 150 歲之間")] 限制 年齡必須在 0 - 150 之間。
好進行下一步,添加兩個創建Person 的 Action 在這里為什么要創建兩個,因為要想創建一個Person(即添加一條信息)我們需要兩步:
第一:輸入url地址客戶端請求服務器生成表單 -- 這里是產生的get請求
第二:點擊submit 提交按鈕,客戶端會將表單中的數據發送給服務器 -- 這里是post 請求
這里在強調一點Action默認是get請求,如果要把它變成post請求需要在其上面加一個[HttpPost] 特性。
下面看一下Controller是怎么寫的這兩個Action吧
1 /// <summary> 2 /// create的get請求 3 /// </summary> 4 /// <returns></returns> 5 public ActionResult Create() 6 { 7 Person p = new Person(); 8 return View(p); 9 } 10 /// <summary> 11 /// create的post請求 12 /// </summary> 13 /// <param name="p"></param> 14 /// <returns></returns> 15 [HttpPost] 16 public string Create(Person p) 17 { 18 //為了演示方便 , 提交的值就別在轉向另一個視圖了 在這之間輸入就ok了 19 StringBuilder sb = new StringBuilder(); 20 if (ModelState.IsValid) 21 { 22 sb.Append("編號:").Append(p.IdCard).Append("姓名:").Append(p.Name) 23 .Append("年齡:").Append(p.Age).Append("性別:").Append(p.Sex); 24 return sb.ToString(); 25 } 26 27 return null; 28 }
代碼很簡單不做多余解釋!
下一步繼續生成View層
注意一下上面紅色邊框的位置!Scaffold template 選擇 Create 應為咱演示的是添加一條數據,所以選擇這個模板,當然它有CRUD 四個操作已經Empty,您不知道CRUD是什么沒關系我給您說下:C - Create 創建 就是添加一條數據; R - Read 讀取 就是查詢一些數據; U - Update 更新 就是修改一條數據; D - Delete 刪除 就是刪除一條數據,它們四個單詞就代表數據庫常見的增刪改查四個操作。
下一步看下View層生成的代碼
1 @model Mvc3App1.Models.Person 2 3 @{ 4 ViewBag.Title = "Create"; 5 } 6 7 <h2>Create</h2> 8 9 <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 10 <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 11 12 @using (Html.BeginForm()) { 13 @Html.ValidationSummary(true) 14 <fieldset> 15 <legend>Person</legend> 16 17 <div class="editor-label"> 18 @Html.LabelFor(model => model.IdCard) 19 </div> 20 <div class="editor-field"> 21 @Html.EditorFor(model => model.IdCard) 22 @Html.ValidationMessageFor(model => model.IdCard) 23 </div> 24 25 <div class="editor-label"> 26 @Html.LabelFor(model => model.Name) 27 </div> 28 <div class="editor-field"> 29 @Html.EditorFor(model => model.Name) 30 @Html.ValidationMessageFor(model => model.Name) 31 </div> 32 33 <div class="editor-label"> 34 @Html.LabelFor(model => model.Sex) 35 </div> 36 <div class="editor-field"> 37 @Html.EditorFor(model => model.Sex) 38 @Html.ValidationMessageFor(model => model.Sex) 39 </div> 40 41 <div class="editor-label"> 42 @Html.LabelFor(model => model.Age) 43 </div> 44 <div class="editor-field"> 45 @Html.EditorFor(model => model.Age) 46 @Html.ValidationMessageFor(model => model.Age) 47 </div> 48 49 <p> 50 <input type="submit" value="Create" /> 51 </p> 52 </fieldset> 53 } 54 55 <div> 56 @Html.ActionLink("Back to List", "Index") 57 </div>
好就近原則分析一下下面的幾行代碼吧!
第42行 @Html.LabelFor(model => model.Age) 這個html helper 的作用就是顯示剛才咱再Model層里指定的DisplayName(“年齡”) 這個特性的值。
第45行 @Html.EditorFor(model => model.Age) 這個會生成一個文本框,文本框的值就是您在Person類里面對其屬性的默認值 比如int的默認值是0
第46行 @Html.ValidationMessageFor(model => model.Age) 就是讀取驗證信息啦!!!!呵呵
最后看一下運行結果吧!