前回のサンプルに検証機能を追加してみる。
Viewの設定
まずはエラーが有った時に表示する文言をViewに設定しておく。
- <body>
- <div>
- <% using (Html.BeginForm("MyPost", "HelloWorld", FormMethod.Post))
- {%>
- <label>名前：</label>
- <%: Html.TextBox("name","<初期値>") %>
- <%: Html.ValidationMessage("name", "必須未入力エラーです", new { @Style = "color:red;font-weight:bold;" })%>
- <input type="submit" value="送信" />
- <% } %>
-
- </div>
- </body>
<body>
<div>
<% using (Html.BeginForm("MyPost", "HelloWorld", FormMethod.Post))
{%>
<label>名前：</label>
<%: Html.TextBox("name","<初期値>") %>
<%: Html.ValidationMessage("name", "必須未入力エラーです", new { @Style = "color:red;font-weight:bold;" })%>
<input type="submit" value="送信" />
<% } %>
</div>
</body>
追加したのは７行目。
HtmlはViewPageクラスのHtmlプロパティでHtmlHelper型。そのValidationMessageメソッドを呼び出すとModelStateDictionaryの中身を調べて第１引数で指定したコントロールにエラーが有るか調べてくれる。エラーが有った場合は第２引数で指定したメッセージをHTMLとして出力する。第３引数はそのメッセージのStyleと言った感じだ。
実際ModelStateDictionaryの中身を作るのはコントローラー側の仕事だ。
ちなみに、ValidationMessageメソッドは拡張メソッドになっていて、実際にはValidationExtensionsクラスで実装されている。
コントローラーでエラーチェック
View側で表示の準備が出来たので、こんどはコントローラー側で入力チェックを行い、エラーがあればModelStateDictionaryにエラー内容を突っ込んでいけば良い。
ModelStateDictionaryはControllerクラスのModelStateプロパティで参照可能だ。
- [HttpPost]
- public ActionResult MyPost(string name)
- {
- if (String.IsNullOrEmpty(name)){ModelState.AddModelError("name", "");}
-
- if (!ModelState.IsValid) { return View(); }
-
- ViewData["HelloName"] = "Hello " + name;
- return View("Result");
- }
[HttpPost]
public ActionResult MyPost(string name)
{
if (String.IsNullOrEmpty(name)){ModelState.AddModelError("name", "");}
if (!ModelState.IsValid) { return View(); }
ViewData["HelloName"] = "Hello " + name;
return View("Result");
}
ここでは、単純にPostされてきたname引数が空だったらModelStateDictionaryのAddModelErrorメソッドでエラーを追加している。
第１引数がエラーのあったコントロール、第２引数がエラーメッセージ。
（View側でエラーメッセージまで定義したのでとりあえずこちらでは何も指定してない。）
実際には、ここで様々な入力項目のチェックを行い、その結果１つでもエラーが有ったかどうかを６行目のIsValidプロパティで判定することになる。
エラーが無ければ９行目で結果画面を表示させるし、エラーがあればそのままView画面に差し戻しといった感じである。
結果
エラー表示にスタイルシートを使う
上記エラー画面のソースは以下のようになっている。
５行目、６行目を見ると「input-validation-error」、「field-validation-error」というクラス名が付与されているのが判る。
HtmlHelperクラスがエラーに応じて付与してくれるのだろう。
MVCプロジェクトには予めSite.cssというスタイルシートが用意されているので、それを使えば良いようだ。
スタイルシートを使うように変更したソースは以下の通り。
- <body>
- <div>
- <form action="/HelloWorld/MyPost" method="post">
- <label>名前：</label>
- <input class="input-validation-error" id="name" name="name" type="text" value="" />
- <span Style="color:red;font-weight:bold;" class="field-validation-error">必須未入力エラーです</span>
- <input type="submit" value="送信" />
- </form>
-
- </div>
- </body>
<body>
<div>
<form action="/HelloWorld/MyPost" method="post">
<label>名前：</label>
<input class="input-validation-error" id="name" name="name" type="text" value="" />
<span Style="color:red;font-weight:bold;" class="field-validation-error">必須未入力エラーです</span>
<input type="submit" value="送信" />
</form>
</div>
</body>
- <head runat="server">
- <title>MyPost</title>
- <link rel="Stylesheet"
- type="text/css" href="../../Content/Site.css"/>
- </head>
- <body>
- <div>
- <% using (Html.BeginForm("MyPost", "HelloWorld", FormMethod.Post))
- {%>
- <label>名前：</label>
- <%: Html.TextBox("name","<初期値>") %>
- <%-- <%: Html.ValidationMessage("name", "必須未入力エラーです", new { @Style = "color:red;font-weight:bold;" })%>
- --%>
- <%: Html.ValidationMessage("name", "必須未入力エラーです")%>
- <input type="submit" value="送信" />
- <% } %>
-
- </div>
- </body>
<head runat="server">
<title>MyPost</title>
<link rel="Stylesheet"
type="text/css" href="../../Content/Site.css"/>
</head>
<body>
<div>
<% using (Html.BeginForm("MyPost", "HelloWorld", FormMethod.Post))
{%>
<label>名前：</label>
<%: Html.TextBox("name","<初期値>") %>
<%-- <%: Html.ValidationMessage("name", "必須未入力エラーです", new { @Style = "color:red;font-weight:bold;" })%>
--%>
<%: Html.ValidationMessage("name", "必須未入力エラーです")%>
<input type="submit" value="送信" />
<% } %>
</div>
</body>
３行目でスタイルシートへの参照を追加して、１２行目して指定していた個別のスタイル指定を削除した。
しかし、これで実行すると、
といった表示になってしまい、なんとなくイマイチ。
あー、このスタイルシートはデフォルトで作られている以下のページ用なのね・・・。
さしあたって、Validation関係のスタイル以外は削除し以下の通りとした。
-
-
- .field-validation-error
- {
- color: #ff0000;
- }
-
- .field-validation-valid
- {
- display: none;
- }
-
- .input-validation-error
- {
- border: 1px solid #ff0000;
- background-color: #ffeeee;
- }
-
- .validation-summary-errors
- {
- font-weight: bold;
- color: #ff0000;
- }
-
- .validation-summary-valid
- {
- display: none;
- }
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
color: #ff0000;
}
.field-validation-valid
{
display: none;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid
{
display: none;
}
サマリーエラーの表示
よくあるパターンとして、エラー内容を個々に表示するのではなく、サマリーとして纏めて表示する方法がある。
それには、Html.ValidationSummaryメソッドを使うと良い。
エラーチェック（Actionメソッド）側では、ModelState.AddModelError("name", "サマリーエラー")としてエラーメッセージを指定する。
- [HttpPost]
- public ActionResult MyPost(string name)
- {
- if (String.IsNullOrEmpty(name)){ModelState.AddModelError("name", "サマリー用エラー発生");}
-
- if (!ModelState.IsValid) { return View(); }
-
- ViewData["HelloName"] = "Hello " + name;
- return View("Result");
- }
- }
[HttpPost]
public ActionResult MyPost(string name)
{
if (String.IsNullOrEmpty(name)){ModelState.AddModelError("name", "サマリー用エラー発生");}
if (!ModelState.IsValid) { return View(); }
ViewData["HelloName"] = "Hello " + name;
return View("Result");
}
}
- <body>
- <div>
- <% using (Html.BeginForm("MyPost", "HelloWorld", FormMethod.Post))
- {%>
- <label>名前：</label>
- <%: Html.TextBox("name","<初期値>") %>
- <%-- <%: Html.ValidationMessage("name", "必須未入力エラーです", new { @Style = "color:red;font-weight:bold;" })%>
- --%>
- <%: Html.ValidationMessage("name", "必須未入力エラーです")%>
- <%=Html.ValidationSummary("以下のエラーが発生しました。")%>
- <input type="submit" value="送信" />
- <% } %>
-
- </div>
- </body>
<body>
<div>
<% using (Html.BeginForm("MyPost", "HelloWorld", FormMethod.Post))
{%>
<label>名前：</label>
<%: Html.TextBox("name","<初期値>") %>
<%-- <%: Html.ValidationMessage("name", "必須未入力エラーです", new { @Style = "color:red;font-weight:bold;" })%>
--%>
<%: Html.ValidationMessage("name", "必須未入力エラーです")%>
<%=Html.ValidationSummary("以下のエラーが発生しました。")%>
<input type="submit" value="送信" />
<% } %>
</div>
</body>
