[ASP.NET][MVC] ASP.NET MVC (5) : 資料驗證 (1) Server-side Validation

前一篇文章中,我們很快的用一個最簡單的方式去展示了 HTTP POST 和表單的動作,只是還是少了一樣東西,我們要求使用者要在欄位中輸入數字,但是如果使用者不聽話輸入非數字的字串時會發生什麼事...

前一篇文章中,我們很快的用一個最簡單的方式去展示了 HTTP POST 和表單的動作,只是還是少了一樣東西,我們要求使用者要在欄位中輸入數字,但是如果使用者不聽話輸入非數字的字串時會發生什麼事,為了要展示這個現象,我們修改了 PostData 的參數型別:

   1: [HttpPost]
   2: public ActionResult PostData(int Value1, int Value2)
   3: {
   4:     ViewData["Result"] = Value1 + Value2;
   5:     return View();
   6: }

然後在表單中輸入非數字的字元,並按 OK,就會發生這樣的問題:

image

所以,我們需要有一個方法去驗證使用者的資料。然而在 ASP.NET MVC 中並沒有像 ASP.NET Web Form 這樣的 Validators 控制項可用,等於是要自己寫 Client Validation 的程式,MVC 只能做 Server-side 的驗證,例如我們在 Index.cshtml 中加一些驗證的訊息:

   1: @{
   2:     ViewBag.Title = "Index";
   3: }
   4:  
   5: <h2>Index</h2>
   6: @{ Html.BeginForm("Index", "My", FormMethod.Post); }
   7:  
   8: <p>
   9:    Value1: @Html.TextBox("Value1")
  10:    @Html.ValidationMessage("Value1", "*")
  11: </p>
  12: <p>
  13:    Value2: @Html.TextBox("Value2")
  14:    @Html.ValidationMessage("Value2", "*")
  15: </p>
  16: <p>
  17:    @Html.ValidationSummary()
  18: </p>
  19:  
  20: <input type="submit" value=" OK " />
  21:  
  22: @{ Html.EndForm(); }

其中,Html.ValidationSummary() 就類似 ASP.NET Web Form 的 ValidationSummary 控制項,而 Html.ValidationMessage() 則是輸出驗證錯誤的訊息,只是在這裡是由 server-side 去控制,而我們在 server-side 中,則是透過 ModelState 來自訂錯誤的內容:

   1: [HttpPost]
   2: public ActionResult Index(string Value1, string Value2)
   3: {
   4:     int v1, v2;
   5:  
   6:     if (!Int32.TryParse(Value1, out v1))
   7:         this.ModelState.AddModelError("Value1", "Please provide a numeric character.");
   8:  
   9:     if (!Int32.TryParse(Value2, out v2))
  10:         this.ModelState.AddModelError("Value2", "Please provide a numeric character.");
  11:  
  12:     if (this.ModelState.IsValid)
  13:     {
  14:         TempData["result"] = v1 + v2;
  15:         return RedirectToAction("PostData");
  16:     }
  17:     else
  18:         return View();
  19: }
  20:  
  21: public ActionResult PostData()
  22: {
  23:     ViewData["result"] = TempData["result"];
  24:     return View();
  25: }

ModelState 會和 View 的資料一起交給 View 處理,開發人員可以使用 ModelState.AddModelError() 來加入自訂的錯誤訊息,它會顯示在 View 的 Html.ValidationSummary() 的位置,若沒有加則不會顯示,而開發人員可利用 ModelState.IsValid 來確認 Model 的有效性,來決定是否要取用 Model 的資料還是提示使用者哪些部份有錯誤。而在程式中我們加了一個 TempData,這是用來在不同 View 之間保存資料的物件,我們用它來保存計算的結果,以相容於之前的動作。

程式的執行結果是:

image

image

image

 

不過這個作法太麻煩,所以我們有另外一種作法,詳見下回。

Reference:

http://stackoverflow.com/questions/1936/how-to-redirecttoaction-in-asp-net-mvc-without-losing-request-data