サーバーサイド検証
サーバーサイドの検証は、MVC 1/xVal同様にIsValidメソッドを使います。ViewPageの追加から見ていきましょう。
1）ソリューション エクスプローラを展開し、Homeフォルダ上で［追加］-［ビュー］を選択
2）選択後［ビューの追加］ダイアログが表示されるので、次の表のように設定後、［追加］ボタンをクリック（図3）
| 項目名 | 設定内容 |
| ビュー名 | Create |
| 厳密に型指定されたビューを作成する | チェック |
| ビューデータクラス | CodeZineMVC2.Models.publishers |
| ビューコンテンツ | Create |
| その他の項目 | 既定のまま |
作成されたビューには特に設定は行いません。
3）HomeController.csファイルに検証設定を記述
HomeController.csを展開し、Aboutメソッドの下に次のように設定します。
using CodeZineMVC2.Models;
＜中略＞
// CreateページにGETリクエストされた時
public ActionResult Create()
{
return View();
}
// CreateページからPostリクエストされた時
[HttpPost]
public ActionResult Create(publishers createPublishers)
{
// 検証メッセージが格納されているかチェック（無ければTrue）
if (ModelState.IsValid)
{
return RedirectToAction("Index");
}
else
{
return View(createPublishers);
}
}
Createページに初回アクセス時は前項で追加したCreate.aspxページがそのまま表示されます。テキストに入力後、CreateボタンをクリックするとサーバーサイドでDataAnnotationの設定と検証し、適切ではない値が入力されている場合はModelStateコレクションにエラーメッセージが格納されます。エラーがある場合は、CreatePageに入力データ、エラーメッセージと共にCreateページに表示します。エラーがない場合は、Indexページへとルーティングされます。
お気づきかと思いますが、サーバーサイド検証は一度サーバにアクセスしないと検証が実施されません。ユーザビリティなどを検討するとサーバにアクセスしなくとも検証できる方が理想です。
それを実現するのがクライアントサイド検証です。
クライアントサイド検証
クライアントサイドの検証はより簡単です。
- 3つのJavaScriptファイルをページに追加
- クライアントサイド検証を実施するHtmlヘルパーメソッドの追記
では、Createページに対して設定してみましょう。
<h2>Create</h2>
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>
<% Html.EnableClientValidation(); %>
これだけです。Html.EnableClientValidationメソッドはクライアントサイドに配置したJavaScriptファイルを使用して、入力検証を有効にするメソッドです。開発者が検証スクリプトを記載することはありません。クライアントサイド検証を有効化している場合、GETリクエスト時にクライアントサイド検証のスクリプトも同時に送信されます。そのため、サーバーサイドに通信することなく検証が実施できます。
実際の実行結果は図1のとおりです。
なお、今回はASP.NET MVC 2プロジェクトが提供しているスクリプトをそのまま使用しましたが、jQuery Validationを使用するにはASP.NET MVC 2 Futuresをダウンロードし、格納されているMicrosoftMvcJQueryValidation.jsを使用します。設定例は次のとおりです。
<h2>Create</h2>
<%-- jQueryを使用する場合 --%>
<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcJQueryValidation.js") %>" type="text/javascript"></script>
<% Html.EnableClientValidation(); %>
このようにスクリプトを配置するとjQueryによる検証が実現できます。
