連載：ASP.NET MVC入門【バージョン3対応】 第3回　モデル・バインドとアノテーション検証の実装 山田 祥寛（http://www.wings.msn.to/） 2011/05/20
Page1 Page2 Page3

■ビュー・スクリプトでエラー・メッセージを表示する

　ビュー・スクリプトでは、モデル側で発生したエラー・メッセージを表示するとともに、クライアントサイド検証を有効にするためのコードを準備しておく必要がある。コードそのものはほとんどが繰り返しであるので、ポイントとなるコードのみを抜粋する。

<h2>Create</h2> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> @using (Html.BeginForm()) {   @Html.ValidationSummary(true)   <fieldset>     <legend>Book</legend>     <div class="editor-label">         @Html.LabelFor(model => model.Isbn)     </div>     <div class="editor-field">         @Html.EditorFor(model => model.Isbn)         @Html.ValidationMessageFor(model => model.Isbn)     </div>     …中略…   </fieldset> } <h2>Create</h2> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> @Using Html.BeginForm()   @Html.ValidationSummary(True)   @<fieldset>     <legend>Book</legend>     <div class="editor-label">         @Html.LabelFor(Function(model) model.Title)     </div>     <div class="editor-field">         @Html.EditorFor(Function(model) model.Title)         @Html.ValidationMessageFor(Function(model) model.Title)     </div>     …中略…   </fieldset> End Using

リスト6　クライアントサイド検証を有効にし、エラー・メッセージを表示するためのビュー・スクリプト（上：Create.cshtml、下：Create.vbhtml）

　ポイントとなるのは以下の3点である。

クライアントサイド検証を有効にする

　ASP.NET MVC 3では、クライアントサイド検証はデフォルトで有効になっているため、ビュー・スクリプトの側では必要なJavaScriptのライブラリをインポートするだけでよい。具体的には、以下のライブラリをインポートしておく必要がある。

• jquery-1.X.X.min.js
• jquery.validate.min.js
• jquery.validate.unobtrusive.min.js

　ただし、jquery-1.X.X.min.js（jQuery本体）は、レイアウト・テンプレート（_Layout.cshtml／_Layout.vbhtml）でインポート済みであるので、個別のビュー・スクリプトでは、jquery.validate.min.js／jquery.validate.unobtrusive.min.jsのみをインポートすればよい。

エラー・メッセージをサマリ表示するValidationSummaryメソッド

　検証関連のビュー・ヘルパーには、Html.ValidationSummaryメソッドと、ValidationMessageメソッドがある。

　まずValidationSummaryメソッドは、従来のASP.NETにおけるValidationSummaryコントロールに相当するもので、検証メッセージをリスト表示するための役割を提供する。

ValidationSummary([bool excludeProp] [,string message])

ValidationSummaryメソッドの構文

excludeProp：モデル単位のエラーのみを表示するか message：サマリの先頭に表示するリード文

　「モデル単位のエラー」とは、個別のプロパティに結び付かないモデル・レベルのエラーのことだ。現時点ではイメージしにくいかもしれないが、ここでは引数excludePropがtrueの場合は、個別のプロパティ（列）単位に発生したエラーはサマリ表示の対象にはならないと理解しておけばよい（モデル・レベルの検証については次回解説の予定である）。

個別のエラー・メッセージを表示するValidationMessageForメソッド

　ValidationMessageForメソッドは、従来のASP.NETで例えるならば、個々の検証コントロールから検証機能を取り除き、メッセージ表示の機能だけを残したものと考えれば分かりやすい。例えば、

@Html.ValidationMessageFor(model => model.Isbn)

のように記述することで、Isbnプロパティで発生したエラー・メッセージを表示できる。

■エラー表示のためのスタイルを定義する

　最後に、エラーを表示するためのスタイル定義について見ておこう。検証エラーの表示にかかわるスタイル・クラスは以下のとおりである。

クラス名 適用先 validation-summary-errors ValidationSummaryメソッドによって出力された<div>要素（エラーが発生した場合） validation-summary-valid ValidationSummaryメソッドによって出力された<div>要素（エラーがない場合） input-validation-error エラーの発生元（ここではテキストボックス） field-validation-error ValidationMessageForメソッドによって出力された<span>要素（エラーが発生した場合） field-validation-valid ValidationMessageForメソッドによって出力された<span>要素（エラーがない場合）

表3　検証エラーの表示にかかわるスタイル・クラス

　これらのスタイル・クラスは、ValidationMessageForやValidationSummaryなどのメソッドによって、対応するタグに自動的に付与されるので、ビュー・スクリプトの側では特に意識することはない。それぞれの部位に対応するスタイルシートを定義すればよいだけだ。

　以下には、プロジェクト・デフォルトで提供されているスタイルシートSite.cssの該当個所を抜粋しておく（Site.cssはデフォルトのレイアウト・テンプレート_Layout.cshtml／_layout.vbhtmlですでにインポート済み）。

.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; }

リスト7　プロジェクト・デフォルトで用意されたスタイルシート（Site.css）

■サンプルの実行

　上の内容を確認できたら、サンプルを実行してみよう。デバッグ実行でブラウザを起動し、以下のようなアドレスを入力してほしい（ポート番号は環境によって異なる）。

http://localhost:10720/Books/Create

　わざと不正なデータを入力して、冒頭の図1のようなエラー・メッセージが表示されることを確認してみよう。なお、図1ではエラー・メッセージを該当する入力要素ごとに表示しているが、Create.cshtml／Create.vbhtmlを以下のように変更することで、まとめてページ先頭に表示させることも可能だ（追記／変更個所は太字で表している）。

@using (Html.BeginForm()) {   @Html.ValidationSummary(false)   …中略…   <div class="editor-field">       @Html.EditorFor(model => model.Isbn)       @Html.ValidationMessageFor(model => model.Isbn, "*")   </div> @Using Html.BeginForm()   @Html.ValidationSummary(False)   @<fieldset>     <legend>Book</legend>     <div class="editor-label">       @Html.LabelFor(Function(model) model.Isbn)     </div>     <div class="editor-field">       @Html.EditorFor(Function(model) model.Isbn)       @Html.ValidationMessageFor(Function(model) model.Isbn, "*")     </div>

リスト8　すべてのエラーをサマリ表示するためのコード（上：Create.cshtml、下：Create.vbhtml）

　ValidationSummaryメソッドの引数falseは、すべてのエラー・メッセージをサマリ表示することを、ValidationMessageForメソッドの第2引数「"*"」は、本来のエラー・メッセージの代わりに表示すべきマークを表している。エラー・メッセージをサマリ表示する場合、個別の入力要素でもメッセージ表示するのは冗長であるので、「*」などのマークでエラーの発生個所だけを明示するのが望ましい。リスト8ではIsbnプロパティについてのValidationMessageForメソッドのみ示しているが、ほかのプロパティについても同様に修正してほしい。

　この状態でサンプルを実行した結果が、以下の図である。メッセージがページ先頭にまとめられていることを確認してほしい。

図2　エラー・メッセージをページ先頭にサマリ表示

　以上、今回はASP.NET MVCによるデータ登録の実装と、登録フォームに欠かせない検証機能の実装について解説した。もっとも、検証処理はなかなか奥深い世界だ。今回はその入り口の部分を解説したに過ぎないので、次回はより突っ込んで、今回紹介しきれなかったCompare／Remote検証属性や、検証機能のカスタマイズについて解説していく。

INDEX
	ASP.NET MVC入門【バージョン3対応】
	第3回　モデル・バインドとアノテーション検証の実装
	1．データ登録の基本／Createアクション・メソッド／ビュー・スクリプト
	2．検証機能の実装／エンティティに検証ルールを追加
	3．ビュー・スクリプトでエラー・メッセージを表示

　

「ASP.NET MVC入門【バージョン3対応】」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）