在本節中將會給Movie
模型添加驗證邏輯。並且確保這些驗證規則在用戶創建或編輯電影時被執行。
拒絕重復 DRY
ASP.NET MVC 的核心設計信條之一是DRY: "不要重復自己(DRY --Don’t Repeat Yourself)"。ASP.NET MVC鼓勵您指定功能或者行為,只做一次,然后將它應用到應用程序的各個地方。這可以減少您需要編寫的代碼量,並減少代碼出錯率,易於代碼維護。
給ASP.NET MVC 和 Entity Framework Code First 提供驗證支持是 DRY 信條的一次偉大實踐。您可以在一個地方 (模型類) 中以聲明的方式指定驗證規則,這個規則會在應用程序中的任何地方執行。
讓我們看看您如何在本電影應用程序中,使用此驗證支持。
給電影模型添加驗證規則
您將首先向Movie
類添加一些驗證邏輯。
打開Movie.cs 文件,注意到System.Web 命名空間並未包含System.ComponentModel.DataAnnotations. DataAnnotations提供了一組內置的嚴重屬性,可供您應用於類、屬性。(DataAnnotations也包含一個DataType屬性,來幫助格式化的辦法來校驗)
更新Movie
類,以利用內置的Required
、 StringLength
, RegularExpression和Range
驗證屬性。以下面的代碼為例,以應用驗證屬性。
public class Movie { public int ID { get; set; } [StringLength(60, MinimumLength = 3)] public string Title { get; set; } [Display(Name = "Release Date")] [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] public DateTime ReleaseDate { get; set; } [RegularExpression(@"^[A-Z]+[a-zA-Z''-'\s]*$")] [Required] [StringLength(30)] public string Genre { get; set; } [Range(1, 100)] [DataType(DataType.Currency)] public decimal Price { get; set; } [RegularExpression(@"^[A-Z]+[a-zA-Z''-'\s]*$")] [StringLength(5)] public string Rating { get; set; } }
在StringLength屬性設置字符串的最大長度,它會在數據庫上設置此限制,因此的數據庫schema將發生變化。右鍵單擊電影表, 在服務器資源管理器(Server explorer),然后單擊打開表定義(Open Table Definition):
在上面的圖片中,你可以看到所有的字符串字段被設置為了NVARCHAR (MAX)數據類型. 我們將使用遷移來更新架構。生成解決方案,然后打開軟件包管理器控制台(the Package Manager Console ),輸入如下命令:
add-migration DataAnnotations
update-database
當這個命令完成后,Visual Studio將打開類代碼文件,它定義了新DbMIgration派生類(DataAnnotations),你可以在Up方法看到更新架構約束代碼如下所示:
public override void Up() { AlterColumn("dbo.Movies", "Title", c => c.String(maxLength: 60)); AlterColumn("dbo.Movies", "Genre", c => c.String(nullable: false, maxLength: 30)); AlterColumn("dbo.Movies", "Rating", c => c.String(maxLength: 5)); }
該流派(Genre)字段不再可為Null(也就是說,你必須輸入一個值)。該評級(Rating)字段最大長度為5, 標題的最大長度為60。標題(Title )和價格 (Price)的范圍的最小長度並沒有更改。
請在數據庫中,檢查電影表的schema:
該字符串字段顯示新的長度限制和流派字段(Genre)不能再為空。
驗證屬性指明您想要應用到模型屬性的行為。Required 和MinimumLength屬性指出某一屬性不可為空,但沒有什么能夠阻止用戶輸入空格來驗證。該RegularExpression屬性是用來限制哪些字符可以輸入。在上面的代碼中,流派(Genre)和等級(Rating)只能使用字母(空格,數字和特殊字符是不允許的)。該范圍(Range )屬性約束的值在一個指定范圍內。在StringLength 屬性允許您設置一個字符串屬性的最大長度,以及最小長度(可選的)。值類型(decimal, int, float, DateTime)有固有必需設置的,不需要的Required屬性。
Code First確保你的模型在指定class上在驗證規則強制執行之前應用程序將變更儲存在數據庫中。例如,下面的代碼將拋出一個DbEntityValidationException 異常時,調用SaveChanges方法時,因為幾個必要的Movie屬性缺少:
MovieDBContext db = new MovieDBContext(); Movie movie = new Movie(); movie.Title = "Gone with the Wind"; db.Movies.Add(movie); db.SaveChanges(); // <= Will throw server side validation exception
上面的代碼會拋出以下異常:
Validation failed for one or more entities. 參閱 'EntityValidationErrors' 屬性獲得更多信息.
具有通過.NET Framework會自動強制執行的驗證規則, 有助於使你的應用程序更加健壯。它還確保可以不會忘記驗證的東西,即在不經意間不會讓壞的數據寫入數據庫。
ASP.NET MVC 的驗證錯誤UI
重新運行應用程序,瀏覽 /Movies的 URL。
單擊Create New鏈接,來添加一部新電影。在窗體中填寫一些無效值,然后單擊Create按鈕。
如同jQuery的客戶端驗證來檢測到錯誤時,它會顯示一個錯誤消息。
注意,為了使jQuery支持使用逗號的非英語區域的驗證 ,需要設置逗號(",")來表示小數點,如本教程前面所述, 你須引入NuGet globalize。請注意,表單在每一個相應的驗證錯誤消息旁邊,已經自動使用紅色邊框的顏色突出顯示文本框指明無效數據。這些錯誤是強制執行了客戶端端(使用JavaScript和jQuery)和服務器端(如果用戶禁用了JavaScript)。
一個真正的好處是,你並不需要更改MoviesController類或Create.cshtml視圖中的一行代碼,來啟用此驗證的用戶界面。您在前面教程所創建的控制器和視圖會自動啟用,使用驗證指明的Movie model類的屬性。使用Edit行為方法,同樣的驗證方法也完全適用。直到沒有任何客戶端驗證錯誤的表單數據,才會被發送回服務器。您可以通過在HTTP POST方法,用一個斷點來驗證這一點; 或通過使用fiddler tool,或者IE瀏覽器F12 developer tools。
如何驗證創建視圖和創建方法
您可能很想知道驗證用戶界面在沒有更新控制器或視圖代碼的情況下是如何生成的。下面列出了MovieController
類中的Create
方法。它們是之前教程中自動生成的,並沒有修改。
public ActionResult Create() { return View(); } // POST: /Movies/Create // To protect from overposting attacks, please enable the specific properties you want to bind to, for // more details see http://go.microsoft.com/fwlink/?LinkId=317598. [HttpPost] [ValidateAntiForgeryToken] public ActionResult Create([Bind(Include = "ID,Title,ReleaseDate,Genre,Price,Rating")] Movie movie) { if (ModelState.IsValid) { db.Movies.Add(movie); db.SaveChanges(); return RedirectToAction("Index"); } return View(movie); }
第一種(HTTP GET)Create
方法用來顯示初始的創建form。第二個 ([HttpPost]
) 方法處理form的請求。第二種Create
方法 (HttpPost
版本) 調用 ModelState.IsValid
來檢查是否有任何的Movie驗證錯誤。調用此方法將驗證對象上所有應用了驗證約束的屬性。如果對象含有驗證錯誤,則Create
方法會重新顯示初始的form。如果沒有任何錯誤,方法將保存信息到數據庫。在我們的電影示例中,我們使用了驗證,當客戶端檢測到錯誤時,form不會被post到服務器;所以第二個Create方法永遠不會被調用。如果您在瀏覽器中禁用了 JavaScript,客戶端驗證也會被禁用,HTTP POST Create
方法會調用 ModelState.IsValid來檢查影片是否含有任何驗證錯誤。
您可以在HttpPost Create
方法中設置一個斷點,當客戶端驗證檢測到錯誤時,不會post form數據,所以永遠不會調用該方法。如果您在瀏覽器中禁用 JavaScript,然后提交具有錯誤信息的form,斷點將會命中。您仍然得到充分的驗證,即使在沒有 JavaScript的情況下。
下圖顯示了如何禁用 Internet Explorer 中的 JavaScript。
下圖顯示了如何在火狐瀏覽器中禁用 JavaScript。
下圖顯示了如何在 Chrome 瀏覽器中禁用 JavaScript。
下面是框架代碼在之前的教程中生成的Create.cshtml視圖模板。它用來為以上兩個操作方法來顯示初始的form,同時在驗證出錯時來重新顯示視圖。
@model MvcMovie.Models.Movie @{ ViewBag.Title = "Create"; } <h2>Create</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Movie</h4> <hr /> @Html.ValidationSummary(true) <div class="form-group"> @Html.LabelFor(model => model.Title, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title) </div> </div> @*Fields removed for brevity.*@ <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Create" class="btn btn-default" /> </div> </div> </div> } <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }
請注意,代碼如何使用Html.EditorFor
helper 輸出為Movie
中的每個屬性的<input>
元素。此Helper旁邊是對Html.ValidationMessageFor
方法的調用。這兩個Helper方法將處理由控制器傳遞到視圖的模型對象(在這里是,Movie
對象)。它們會自動查找模型中指定的驗證屬性,並顯示適當的錯誤消息。
如果您想要在后面更改驗證邏輯,您可以做在一個地方,將驗證信息添加到模型上。 (此示例中,是movie
類)。您不必擔心不符合規則 ,驗證邏輯會在應用程序的不同部分執行——在一個地方定義驗證邏輯將會被使用到各個地方。這使代碼非常干凈,並使它易於維護和擴展。它意味着您會完全遵守DRY原則。
使用DataType屬性
打開Movie.cs文件並檢查Movie類。在System.ComponentModel.DataAnnotations命名空間提供的格式化(formatting)屬性,除了內置的一套驗證的屬性。我們已經應用了的DataType枚舉值的ReleaseDate和Price 字段。下面的代碼顯示了ReleaseDate和Price 用適當的的DataType屬性。
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
[DataType(DataType.Currency)]
public decimal Price { get; set; }
該DataType屬性只提供提示的視圖引擎對數據進行格式化(與相應的屬性,如<a>取代的URL及 <a href="mailto:EmailAddress.com">取代電子郵件。您可以使用RegularExpression的屬性來驗證數據格式。DataType屬性用於指定一個比數據庫內部類型更加具體的一種數據類型,但它們不是驗證屬性。在這種情況下,我們只需要保留的日期跟蹤,而不是日期和時間。該枚舉的DataType提供了多種數據類型,如Date, Time, PhoneNumber, Currency, EmailAddress 和其他更多的。該的DataType 的屬性也可以使應用程序來自動提供特定類型的功能。例如,一個mailto:鏈接可以DataType.EmailAddress創建和日期選擇器可以在支持HTML5的瀏覽器提供的DataType.Date。該數據類型屬性發出的HTML5data-(發音讀數據破折號)屬性與HTML5的瀏覽器可以理解。 該DataType 屬性不提供任何驗證。
DataType.Date並未指定顯示的日期格式。默認情況下,根據基於服務器的的CultureInfo預設格式顯示數據字段。
該DisplayFormat的屬性是用來顯式地指定日期格式的:
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime EnrollmentDate { get; set; }
該ApplyFormatInEditMode設置指定了當值進行編輯顯示在一個文本框中,格式化亦應適用。 (您可能不希望這樣的某些字段 - 例如貨幣值,你可能不希望在編輯文本框中出現貨幣符號。)
你可以單獨使用DisplayFormat屬性;但和DataType屬性一起,通常是一個好主意。該DataType 屬性傳遞數據的語義,而不是如何呈現它在屏幕上,並具有以下的優點,不帶DisplayFormat的:
· 瀏覽器可以使HTML5的功能(例如顯示一個日歷控件,在區域設置相應的貨幣符號,電子郵件中的鏈接,等等)。
· 默認情況下,瀏覽器就會使用基於語言環境(locale)的正確格式呈現數據。
· 在的DataType屬性可以使MVC選擇合適的字段模板以呈現數據(如果本身所使用的的DisplayFormat使用字符串模板)。欲了解更多信息,請參閱see Brad Wilson's的ASP.NET MVC 2 Templates。 (雖然寫的MVC2,本文仍然適用於ASP.NET MVC 5的當前版本。)
如果你使用了的DataType的屬性具有一個日期字段,你也必須指明,以確保字段正確地呈現Chrome瀏覽器中的DisplayFormat屬性。欲了解更多信息,請參閱this StackOverflow thread。
注:jQuery的驗證不與Range屬性和DateTime的同時工作。例如,下面的代碼總是顯示一個客戶端驗證錯誤,即使當日期是在指定的范圍內:
[Range(typeof(DateTime), "1/1/1966", "1/1/2020")]
你可能會禁用jQuery的日期校驗,而使用帶有的Range屬性DateTime。這通常不是一個好的做法,在你的模型里,編譯器很難確定日期,所以使用Range屬性和DateTime效果不好。
下面的代碼顯示在同一行合並屬性:
public class Movie
{
public int ID { get; set; }
[Required,StringLength(60, MinimumLength = 3)]
public string Title { get; set; }
[Display(Name = "Release Date"),DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
[Required]
public string Genre { get; set; }
[Range(1, 100),DataType(DataType.Currency)]
public decimal Price { get; set; }
[Required,StringLength(5)]
public string Rating { get; set; }
}
在教程的下一部分,我們先會看看代碼,然后再改進一下自動生成的Details
和 Delete
方法。有了本節介紹的內容,相信大家已經掌握了給數據模型添加校驗器的方法。后面大家在進行MVC開發時,一方面可以運用本節知識,一方面也可以借助一些開發工具。ComponentOne Studio ASP.NET MVC 是一款針對 MVC 平台的控件包,能提供從桌面到移動設備的用戶體驗。
-----------------------------------------------------------------------------------------
《ASP.NET MVC 5 入門指南》12篇文章匯總如下:
4. ASP.NET MVC 5 - 將數據從控制器傳遞給視圖
6. ASP.NET MVC 5 - 創建連接字符串(Connection String)並使用SQL Server LocalDB
8. ASP.NET MVC 5 - 驗證編輯方法(Edit method)和編輯視圖(Edit view)
9. ASP.NET MVC 5 - 給電影表和模型添加新字段
10. ASP.NET MVC 5 - 給數據模型添加校驗器
11. ASP.NET MVC 5 - 查詢Details和Delete方法
12. ASP.NET MVC 5 - 使用Wijmo MVC 5模板1分鍾創建應用
希望這些文章對感興趣的朋友有所幫助,另附上PDF版的匯總文檔:
《ASP.NET MVC 5 入門指南》PDF版
相關閱讀:
微軟 Build 2017 開發者大會:Azure 與 AI 的快速發展