ASP.NET MVC 2による検証機能

ASP.NET MVC 2入門（中編）

サーバーサイド検証

　サーバーサイドの検証は、MVC 1/xVal同様にIsValidメソッドを使います。ViewPageの追加から見ていきましょう。

　1）ソリューション エクスプローラを展開し、Homeフォルダ上で［追加］-［ビュー］を選択

　2）選択後［ビューの追加］ダイアログが表示されるので、次の表のように設定後、［追加］ボタンをクリック（図3）

Add Viewの設定

項目名	設定内容
ビュー名	Create
厳密に型指定されたビューを作成する	チェック
ビューデータクラス	CodeZineMVC2.Models.publishers
ビューコンテンツ	Create
その他の項目	既定のまま

図3 ビューの追加ダイアログの設定例

　作成されたビューには特に設定は行いません。

　3）HomeController.csファイルに検証設定を記述

　HomeController.csを展開し、Aboutメソッドの下に次のように設定します。

HomeController.csファイルの記載例

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ページに対して設定してみましょう。

Create.aspxファイルの記載例

<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を使用します。設定例は次のとおりです。

Create.aspxファイルの記載例

<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による検証が実現できます。