連載: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検証属性や、検証機能のカスタマイズについて解説していく。End of Article

 

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


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH