次の方法で共有

ASP.NET MVC 4 ヘルパー、フォーム、検証

  • [アーティクル]

Web Camps チーム

Web Camps トレーニング キットのダウンロード

「ASP.NET MVC 4 モデルとデータ アクセス」ハンズオン ラボでは、データベースからデータを読み込んで表示しました。 このハンズオン ラボでは、そのデータを編集する機能をミュージック ストア アプリケーションに追加します。

そのために、まず、アルバムの作成、読み取り、更新、削除 (CRUD) アクションをサポートするコントローラーを作成します。 ASP.NET MVC のスキャフォールディング機能を利用してインデックス ビュー テンプレートを生成し、アルバムのプロパティを HTML テーブルに表示します。 ビューの機能を拡張するために、長い説明を切り捨てるカスタム HTML ヘルパーを追加します。

その後、編集ビューと作成ビューを追加します。これらのビューでは、ドロップダウンなどのフォーム要素を使用して、データベース内のアルバムを変更できます。

最後に、ユーザーがアルバムを削除できるようにします。また、入力を検証して、ユーザーが間違ったデータを入力できないようにします。

このハンズオン ラボは、ASP.NET MVC に関する基本的な知識があることを前提としています。 これまでに ASP.NET MVC を使用したことがない場合は、ASP.NET MVC の基礎に関するハンズオン ラボを確認することをお勧めします。

このラボでは、ソース フォルダーに用意されているサンプル Web アプリケーションに軽微な変更を適用することで、前述の拡張機能と新機能について説明します。

Note

すべてのサンプル コードとスニペットは、Microsoft-Web/WebCampTrainingKit リリースで入手できる Web Camps トレーニング キットに含まれています。 このラボに固有のプロジェクトは、「ASP.NET MVC 4 ヘルパー、フォーム、検証」で入手できます。

目標

このハンズオン ラボでは、次の手順について学習します。

  • CRUD 操作をサポートするコントローラーを作成する
  • HTML テーブルでエンティティ プロパティを表示するインデックス ビューを生成する
  • カスタム HTML ヘルパーを追加する
  • 編集ビューを作成してカスタマイズする
  • HTTP-GET 呼び出しに反応するアクション メソッドと HTTP-POST 呼び出しに反応するアクション メソッドを区別する
  • 作成ビューを追加してカスタマイズする
  • エンティティの削除を処理する
  • ユーザー入力の検証

前提条件

このラボを完了するには、次の項目が必要です:

段取り

コード スニペットのインストール

利便性のため、このラボで管理するコードの多くは、Visual Studio コード スニペットとして入手可能です。 コード スニペットをインストールするには、.\Source\Setup\CodeSnippets.vsi ファイルを実行します。

Visual Studio Code スニペットに慣れていない場合、その使用方法については、このドキュメントの付録「付録 B: コード スニペットの使用」を参照してください。

演習

このハンズオン ラボは、次の演習で構成されます。

  1. ストア マネージャー コントローラーとそのインデックス ビューの作成
  2. HTML ヘルパーの追加
  3. 編集ビューの作成
  4. 作成ビューの追加
  5. 削除の処理
  6. 検証の追加
  7. クライアント側での Unobtrusive jQuery の使用

Note

各演習には、演習を完了した後に得られる、結果のソリューションが含まれる End フォルダーが付帯しています。 このソリューションは、演習の作業についてさらにヘルプが必要な場合に、ガイドとして使用できます。

このラボの推定所要時間: 60 分

演習 1: ストア マネージャー コントローラーとそのインデックス ビューの作成

この演習では、CRUD 操作をサポートする新しいコントローラーを作成し、その Index アクション メソッドをカスタマイズしてデータベースからアルバムの一覧を返し、最後に ASP.NET MVC のスキャフォールディング機能を利用してインデックス ビュー テンプレートを生成して、アルバムのプロパティを HTML テーブルで表示する方法について学習します。

タスク 1 - StoreManagerController の作成

このタスクでは、CRUD 操作をサポートするために StoreManagerController という新しいコントローラーを作成します。

  1. Source/Ex1-CreatingTheStoreManagerController/Begin/ フォルダーにある Begin ソリューションを開きます。

    1. 作業の続行前に、いくつかの不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。

    2. [NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。

    3. 最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。

      Note

      NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。

  2. 新しいコントローラーを追加します。 これを行うには、ソリューション エクスプローラー内の Controllers フォルダーを右クリックし、[追加] を選択して、[コントローラー] コマンドを選択します。 Controller Name を StoreManagerController に変更し空の読み取り/書き込みアクションMVC コントローラーのオプションが選択されていることを確認。 追加をクリックします。

    [コントローラーの追加] ダイアログ

    "[コントローラーの追加] ダイアログ"

    新しい Controller クラスが生成されます。 読み取り/書き込み用のアクションを追加するように指定したので、それらのアクションのスタブ メソッド、共通の CRUD アクションが TODO コメント付きで作成され、アプリケーション固有のロジックを含めるように求めるメッセージが表示されます。

タスク 2 - StoreManager インデックスのカスタマイズ

このタスクでは、データベースからアルバムの一覧を含むビューを返すように StoreManager インデックス アクション メソッドをカスタマイズします。

  1. StoreManagerController クラスで、次の using ディレクティブを追加します。

    (コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex1 using MvcMusicStore")

    using System.Data;
using System.Data.Entity;
using MvcMusicStore.Models;

  2. StoreManagerController に、MusicStoreEntities のインスタンスを保持するフィールドを追加します。

    (コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex1 MusicStoreEntities")

    public class StoreManagerController : Controller
{
    private MusicStoreEntities db = new MusicStoreEntities();

  3. アルバムの一覧を含むビューを返す StoreManagerController インデックス アクションを実装します。

    このコントローラー アクション ロジックは、前述の StoreController の Index アクションによく似ています。 LINQ を使用して、表示するジャンルとアーティストの情報を含むすべてのアルバムを取得します。

    (コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex1 StoreManagerController インデックス")

    //
// GET: /StoreManager/

public ActionResult Index()
{
    var albums = this.db.Albums.Include(a => a.Genre).Include(a => a.Artist)
         .OrderBy(a => a.Price);

    return this.View(albums.ToList());
}

タスク 3 - インデックス ビューの作成

このタスクでは、StoreManager コントローラーによって返されたアルバムの一覧を表示するインデックス ビュー テンプレートを作成します。

  1. [ビューの追加] ダイアログで使用する Album クラスを認識できるようにするため、新しいビュー テンプレートを作成する前に、プロジェクトをビルドする必要があります。 [Build | Build MvcMusicStore] (ビルド | MvcMusicStore をビルド) を選択して、プロジェクトをビルドします。

  2. Index アクション メソッド内を右クリックして、[ビューの追加] を選択します。 これにより [ビューの追加] ダイアログが表示されます。

    ビューの追加

    "Index メソッド内からのビューの追加"

  3. [ビューの追加] ダイアログで、[ビュー名] が [インデックス] であることを確認します。 [厳密に型指定されたビューを作成する] オプションを選択し、[モデル クラス] ドロップダウンから [アルバム (MvcMusicStore.Models)] を選択します。 [スキャフォールディング テンプレート] ドロップダウンから [List] (リスト) を選択します。 [ビュー エンジン] は [Razor] に、他のフィールドは既定値のままにして、[追加] をクリックします。

    インデックス ビューの追加

    インデックス ビューの追加

タスク 4 - インデックス ビューのスキャフォールディングのカスタマイズ

このタスクでは、目的のフィールドが表示されるようにするため、ASP.NET MVC スキャフォールディング機能を使用して作成された単純なビュー テンプレートを調整します。

Note

ASP.NET MVC 内のスキャフォールディング サポートにより、アルバム モデル内のすべてのフィールドを一覧表示する単純なビュー テンプレートが生成されます。 スキャフォールディングを使用すると、厳密に型指定されたビューを簡単に開始できます。ビュー テンプレートを手作業で作成する必要はなく、スキャフォールディングによって既定のテンプレートが迅速に生成され、生成されたコードをユーザーが変更できます。

  1. 作成されたコードを確認します。 生成されたフィールドの一覧は、スキャフォールディングで表形式データの表示に使用されている次の HTML テーブルの一部になります。

    @model IEnumerable<MvcMusicStore.Models.Album>

@{
     ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
     @Html.ActionLink("Create New", "Create")
</p>
<table>
     <tr>
          <th>
                @Html.DisplayNameFor(model => model.GenreId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.ArtistId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Title)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Price)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.AlbumArtUrl)
          </th>
          <th></th>
     </tr>

@foreach (var item in Model) {
     <tr>
          <td>
                @Html.DisplayFor(modelItem => item.GenreId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.ArtistId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.AlbumArtUrl)
          </td>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
                @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
     </tr>
}

</table>

  2. [ジャンル]、[アーティスト]、[アルバム タイトル]、[価格] フィールドのみが表示されるようにするため、<table> コードを次のコードに置き換えます。 これにより、AlbumId 列と Album Art URL 列が削除されます。 また、Artist.Name および Genre.Name のリンクされたクラス プロパティを表示するために GenreId 列と ArtistId 列が変更され、Details リンクは削除されます。

    <table>
    <tr>
      <th></th>
      <th>Genre</th>
      <th>Artist</th>
      <th>Title</th>
      <th>Price</th>
    </tr>

    @foreach (var item in Model) {
     <tr>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Genre.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Artist.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
     </tr>
    }
</table>

  3. 次の説明を変更します。

    @model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

タスク 5 - アプリケーションの実行

このタスクでは、前の手順の設計に従って、 StoreManager Index View テンプレートにアルバムの一覧が表示されることをテストします。

  1. F5 キーを押してアプリケーションを実行します。

  2. プロジェクトはホーム ページから開始します。 URL を /StoreManager に変更して、アルバムの一覧が表示され、[タイトル]、[タイトル]、および [ジャンル] が表示されることを確認します。

    "アルバムの一覧の画面"

演習 2: HTML ヘルパーの追加

StoreManager のインデックス ページには、1 つの潜在的な問題があります。それは、[タイトル] プロパティと [アーティスト名] プロパティの長さが、どちらもテーブルの書式設定を崩す長さになりうることです。 この演習では、カスタム HTML ヘルパーを追加して、テキストを切り詰める方法について学習します。

次の図では、ブラウザー サイズが小さい場合に、テキストの長さが原因で書式設定が変更されている様子を確認できます。

テキストが切り詰められていないアルバムの一覧の画面

テキストが切り詰められていないアルバムの一覧の画面

タスク 1 - HTML ヘルパーの拡張

このタスクでは、ASP.NET MVC ビュー内で公開されている HTML オブジェクトに新しい Truncate メソッドを追加します。 これを行うには、ASP.NET MVC によって提供されている組み込みの System.Web.Mvc.HtmlHelper クラスに拡張メソッドを実装します。

Note

拡張メソッドの詳細については、次の msdn の記事を参照してください。 https://msdn.microsoft.com/library/bb383977.aspx.

  1. Source/Ex2-AddingAnHTMLHelper/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。

    1. 提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。

    2. [NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。

    3. 最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。

      Note

      NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。

  2. StoreManager のインデックス ビューを開きます。 これを行うには、ソリューション エクスプローラーで Views フォルダー、StoreManager の順に展開して、Index.cshtml ファイルを開きます。

  3. 次のコードを @model ディレクティブの下に追加して、Truncate ヘルパー メソッドを定義します。

    @model IEnumerable<MvcMusicStore.Models.Album>

@helper Truncate(string input, int length)
{
     if (input.Length <= length) {
          @input
     } else {
          @input.Substring(0, length)<text>...</text>
     }
} 

@{
     ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

タスク 2 - ページ内のテキストの切り詰め

このタスクでは、Truncate メソッドを使用して、ビュー テンプレート内のテキストを切り詰めます。

  1. StoreManager のインデックス ビューを開きます。 これを行うには、ソリューション エクスプローラーで Views フォルダー、StoreManager の順に展開して、Index.cshtml ファイルを開きます。

  2. [アーティスト名] とアルバムの [タイトル] を表示する行を置き換えます。 これを行うには、次の行を置き換えます。

    <tr>
     <td>
          @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

          @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Genre.Name)
     </td>
     <td>
          @Truncate(item.Artist.Name, 25)
     </td>
     <td>
          @Truncate(item.Title, 25)
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Price)
     </td>
</tr>

タスク 3 - アプリケーションの実行

このタスクでは、 StoreManager Index View テンプレートがアルバムのタイトルとアーティスト名を切り捨てることをテストします。

  1. F5 キーを押してアプリケーションを実行します。

  2. プロジェクトはホーム ページから開始します。 URL を /StoreManager に変更して、[タイトル] 列と [アーティスト] 列の長いテキストが切り詰められていることを確認します。

    タイトルとアーティスト名の切り捨て

    "切り詰められた [タイトル] と [アーティスト名]"

演習 3: 編集ビューの作成

この演習では、ストア マネージャーでアルバムを編集できるようにするフォームの作成方法について学習します。 ストア マネージャーは、/StoreManager/Edit/id URL (編集するアルバムの一意の ID である id) を参照するので、サーバーに対して HTTP-GET 呼び出しを行います。

Controller Edit アクション メソッドは、データベースから適切なアルバムを取得して、そのアルバムを (アーティストおよびジャンルの一覧と共に) カプセル化する StoreManagerViewModel オブジェクトを作成し、そのオブジェクトをビュー テンプレートに渡して、ユーザーに表示される HTML ページをレンダリングします。 このページには、アルバム プロパティを編集するためのテキスト ボックスとドロップダウンを持つ <form> 要素が含まれています。

ユーザーがアルバム フォームの値を更新して、[保存] ボタンをクリックすると、HTTP-POST 呼び出しを介して /StoreManager/Edit/id に変更が送信されます。URL は前回の呼び出しと同じですが、ASP.NET MVC で今回の呼び出しが HTTP-POST であることを識別しているため、別の Edit アクション メソッド ([HttpPost] で修飾されたメソッド) が実行されます。

タスク 1- HTTP-GET Edit アクション メソッドの実装

このタスクでは、データベースから適切なアルバムと、すべてのジャンルおよびアーティストの一覧を取得する HTTP-GET バージョンの Edit アクション メソッドを実装します。 このメソッドは、取得したデータを最後の手順で定義された StoreManagerViewModel オブジェクトにパッケージ化し、次のそのオブジェクトが View テンプレートに渡されて、応答がレンダリングされます。

  1. Source/Ex3-CreatingTheEditView/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。

    1. 提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。

    2. [NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。

    3. 最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。

      Note

      NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。

  2. StoreManagerController クラスを開きます。 これを行うには、Controllers フォルダーを展開して、StoreManagerController.cs をダブルクリックします。

  3. HTTP-GET Edit アクション メソッドを次のコードに置き換えて、適切な [アルバム] と、[ジャンル] および [アーティスト] の一覧を取得します。

    (コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex3 StoreManagerController HTTP-GET Edit アクション")

    public ActionResult Edit(int id)
{
    Album album = this.db.Albums.Find(id);

    if (album == null)
    {
         return this.HttpNotFound();
    }

    this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
    this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

    return this.View(album);
}

    Note

    System.Collections.Generic リストの代わりに、アーティストとジャンルのSystem.Web.Mvc SelectList を使用しています。

    SelectList は、HTML ドロップダウンを設定し、現在の選択内容などを管理するためのよりクリーンな方法です。 コントローラー アクションでこれらの ViewModel オブジェクトをインスタンス化して後で設定することにより、よりクリーンな編集フォーム シナリオを実現できます。

タスク 2 - 編集ビューの作成

このタスクでは、後でアルバムのプロパティ表示に使用する編集ビュー テンプレートを作成します。

  1. 編集ビューを作成します。 これを行うには、Edit アクション メソッド内を右クリックして、[ビューの追加] を選択します。

  2. [ビューの追加] ダイアログで、[ビュー名] が [編集] であることを確認します。 [厳密に型指定されたビューを作成する] チェックボックスをオンにし、[データ クラスの表示] ドロップダウンから [アルバム (MvcMusicStore.Models)] を選択します。 [スキャフォールディング テンプレート] ドロップダウンから [編集] を選択します。 他のフィールドは既定値のままにして、[追加] をクリックします。

    "編集ビューの追加"

タスク 3 - アプリケーションの実行

このタスクでは、パラメーターとして渡されたアルバムのプロパティの値が StoreManager Edit View ページに表示されることをテストします。

  1. F5 キーを押してアプリケーションを実行します。

  2. プロジェクトはホーム ページから開始します。 URL を /StoreManager/Edit/1 に変更して、渡されたアルバムのプロパティの値が表示されることを確認します。

    アルバムの編集ビューの参照

    アルバムの編集ビューの画面

タスク 4 - アルバム エディター テンプレートへのドロップダウンの実装

このタスクでは、ユーザーがアーティストとジャンルの一覧から選択できるように、最後のタスクで作成したビュー テンプレートにドロップダウンを追加します。

  1. すべての [アルバム] フィールドセット コードを次のように置き換えます。

    <fieldset>
     <legend>Album</legend>

     @Html.HiddenFor(model => model.AlbumId)

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Title)
          @Html.ValidationMessageFor(model => model.Title)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Price)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Price)
          @Html.ValidationMessageFor(model => model.Price)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.AlbumArtUrl)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.AlbumArtUrl)
          @Html.ValidationMessageFor(model => model.AlbumArtUrl)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Artist)
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Genre)
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <p>
          <input type="submit" value="Save" />
     </p>
</fieldset>

    Note

    アーティストとジャンルを選択するためのドロップダウンをレンダリングするため、Html.DropDownList ヘルパーが追加されています。 Html.DropDownList に渡されるパラメーターは次のとおりです。

    1. フォーム フィールドの名前 ("ArtistId")。
    2. ドロップダウンの値の SelectList。

タスク 5 - アプリケーションの実行

このタスクでは、 StoreManager Edit View ページに、アーティストとジャンル ID のテキスト フィールドの代わりにドロップダウンが表示されることをテストします。

  1. F5 キーを押してアプリケーションを実行します。

  2. プロジェクトはホーム ページから開始します。 URL を /StoreManager/Edit/1 に変更して、アーティストとジャンルの ID テキスト フィールドの代わりにドロップダウンが表示されることを確認します。

    ドロップダウンを使用したアルバムの編集ビューの参照

    アルバムの編集ビューの画面 (今回はドロップダウン付き)

タスク 6 - HTTP-POST Edit アクション メソッドの実装

編集ビューが期待どおりに表示されたので、HTTP-POST Edit アクション メソッドを実装して、アルバムに加えられた変更を保存する必要があります。

  1. 必要に応じてブラウザーを閉じ、Visual Studio ウィンドウに戻ります。 Controllers フォルダーから StoreManagerController を開きます。

  2. HTTP-POST Edit アクション メソッド コードを次のコードに置き換えます (置き換える必要があるメソッドは、2 つのパラメーターを受け取るオーバーロードされたバージョンであることに注意してください)。

    (コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex3 StoreManagerController HTTP-POST Edit アクション")

    [HttpPost]
public ActionResult Edit(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Entry(album).State = EntityState.Modified;
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}

    Note

    このメソッドは、ユーザーがビューの [保存] ボタンをクリックして、フォーム値の HTTP-POST をサーバーに返し、それらの値をデータベースに保持するときに実行されます。 デコレーター [HttpPost] は、そのメソッドをこれらの HTTP-POST シナリオで使用する必要があることを示しています。 このメソッドは Album オブジェクトを受け取ります。 ASP.NET MVC は、POST された <form> の値から Album オブジェクトを自動的に作成します。

    このメソッドは、次の手順を実行します。

    1. モデルが有効な場合:

      1. コンテキスト内のアルバム エントリを更新して、変更されたオブジェクトとしてマークします。
      2. 変更を保存して、インデックス ビューにリダイレクトします。

    2. モデルが有効でない場合は、ViewBag に GenreId と ArtistId を設定し、受け取った Album オブジェクトを含むビューを返して、ユーザーが必要な更新を実行できるようにします。

タスク 7 - アプリケーションの実行

このタスクでは、StoreManager の [編集] ビュー ページで、更新されたアルバム データがデータベースに実際に保存されることをテストします。

  1. F5 キーを押してアプリケーションを実行します。

  2. プロジェクトはホーム ページから開始します。 URL を /StoreManager/Edit/1 に変更します。 アルバムのタイトルを「Load」に変更し、[保存] をクリックします。 アルバムのタイトルがアルバムの一覧で実際に変更されたことを確認します。

    アルバムの更新

    "アルバムの更新"

演習 4: 作成ビューの追加

StoreManagerController で [編集] 機能がサポートされたので、この演習では、[作成] ビュー テンプレートを追加して、ストア マネージャーで新しいアルバムをアプリケーションに追加できるようにする方法について学習します。

編集機能のときと同様に、StoreManagerController クラス内で 2 つの異なるメソッドを使用して作成シナリオを実装します。

  1. ストア マネージャーが最初に /StoreManager/Create URL にアクセスすると、1 つのアクション メソッドが空のフォームを表示します。
  2. 2 番目のアクション メソッドは、ストア マネージャーがフォーム内の [保存] ボタンをクリックして、値を HTTP-POST として/StoreManager/Create URL に返すシナリオを処理します。

タスク 1- HTTP-GET Create アクション メソッドの実装

このタスクでは、HTTP-GET バージョンの Create アクション メソッドを実装して、すべてのジャンルおよびアーティストの一覧を取得して、そのデータを StoreManagerViewModel オブジェクトにパッケージ化し、そのオブジェクトがビュー テンプレートに渡されるようにします。

  1. Source/Ex4-AddingACreateView/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。

    1. 提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。

    2. [NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。

    3. 最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。

      Note

      NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。

  2. StoreManagerController クラスを開きます。 これを行うには、Controllers フォルダーを展開して、StoreManagerController.cs をダブルクリックします。

  3. Create アクション メソッド コードを次のように置き換えます。

    (コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex4 StoreManagerController HTTP-GET Create アクション")

    //
// GET: /StoreManager/Create

public ActionResult Create()
{
     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name");
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name");

     return this.View();
}

タスク 2 - 作成ビューの追加

このタスクでは、新しい (空の) アルバム フォームを表示する作成ビュー テンプレートを追加します。

  1. Create アクション メソッド内を右クリックして、[ビューの追加] を選択します。 これにより、[ビューの追加] ダイアログが表示されます。

  2. [ビューの追加] ダイアログで、[ビュー名] が [作成] であることを確認します。 [厳密に型指定されたビューを作成する] オプションを選択し、[モデル クラス] ドロップダウンから [アルバム (MvcMusicStore.Models)] を選択し、[スキャフォールディング テンプレート] ドロップダウンから [作成] を選択します。 他のフィールドは既定値のままにして、[追加] をクリックします。

    作成ビューの追加

    "作成ビューの追加"

  3. 次のようにして、ドロップダウン リストを使用するように GenreId フィールドと ArtistId フィールドを更新します。

    ...
<fieldset>
     <legend>Album</legend>

     <div class="editor-label">
          @Html.LabelFor(model => model.GenreId, "Genre")
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", String.Empty)
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.ArtistId, "Artist")
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", String.Empty)
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
    ...

タスク 3 - アプリケーションの実行

このタスクでは、 StoreManager Create View ページに空のアルバム フォームが表示されることをテストします。

  1. F5 キーを押してアプリケーションを実行します。

  2. プロジェクトはホーム ページから開始します。 URL を /StoreManager/Create に変更します。 新しい Album プロパティに入力するための空のフォームが表示されていることを確認します。

    "空のフォームを含む [作成] ビュー"

タスク 4 - HTTP-POST Create アクション メソッドの実装

このタスクでは、ユーザーが [保存] ボタンをクリックしたときに呼び出される HTTP-POST バージョンの Create アクション メソッドを実装します。 このメソッドは、新しいアルバムをデータベースに保存します。

  1. 必要に応じてブラウザーを閉じ、Visual Studio ウィンドウに戻ります。 StoreManagerController クラスを開きます。 これを行うには、Controllers フォルダーを展開して、StoreManagerController.cs をダブルクリックします。

  2. HTTP-POST Create アクション メソッド コードを次のように置き換えます。

    (コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex4 StoreManagerController HTTP- POST Create アクション")

    [HttpPost]
public ActionResult Create(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Albums.Add(album);
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}

    Note

    この Create アクションは、前の Edit アクション メソッドとかなり似ていますが、オブジェクトを変更済みとして設定する代わりに、コンテキストに追加されます。

タスク 5 - アプリケーションの実行

このタスクでは、StoreManager の [作成] ビュー ページで新しいアルバムを作成でき、その後に StoreManager インデックス ビューにリダイレクトされることをテストします。

  1. F5 キーを押してアプリケーションを実行します。

  2. プロジェクトはホーム ページから開始します。 URL を /StoreManager/Create に変更します。 次の図のようにして、すべてのフォーム フィールドに新しいアルバムのデータを入力します。

    "アルバムの作成"

  3. 前の手順で作成した新しいアルバムを含む StoreManager インデックス ビューにリダイレクトされることを確認します。

    "新しいアルバムの作成完了"

演習 5: 削除の処理

アルバムを削除する機能はまだ実装されていません。 この演習では、アルバムの削除機能について学習します。 前と同様に、StoreManagerController クラス内で 2 つの異なるメソッドを使用して削除シナリオを実装します。

  1. 1 つのアクション メソッドが確認フォームを表示します。
  2. 2 番目のアクション メソッドがフォームの送信を処理します。

タスク 1- HTTP-GET Delete アクション メソッドの実装

このタスクでは、HTTP-GET バージョンの Delete アクション メソッドを実装して、アルバムの情報を取得します。

  1. Source/Ex5-HandlingDeletion/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。

    1. 提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。

    2. [NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。

    3. 最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。

      Note

      NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。

  2. StoreManagerController クラスを開きます。 これを行うには、Controllers フォルダーを展開して、StoreManagerController.cs をダブルクリックします。

  3. [削除] コントローラー アクションは、前の [ストアの詳細] コントローラー アクションとまったく同じです。このアクションは、URL で指定された id を使用してデータベースから album オブジェクトにクエリを実行し、適切なビューを返します。 これを行うには、HTTP-GET Delete アクション メソッドのコードを次のように置き換えます。

    (コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex5 Handling Deletion HTTP-GET Delete アクション")

    //
// GET: /StoreManager/Delete/5

public ActionResult Delete(int id)
{
     Album album = this.db.Albums.Find(id);

     if (album == null)
     {
          return this.HttpNotFound();
     }

     return this.View(album);
}

  4. Delete アクション メソッド内を右クリックして、[ビューの追加] を選択します。 これにより、[ビューの追加] ダイアログが表示されます。

  5. [ビューの追加] ダイアログで、[ビュー名] が [削除] であることを確認します。 [厳密に型指定されたビューを作成する] オプションを選択し、[モデル クラス] ドロップダウンから [アルバム (MvcMusicStore.Models)] を選択します。 [スキャフォールディング テンプレート] ドロップダウンから [削除] を選択します。 他のフィールドは既定値のままにして、[追加] をクリックします。

    "削除ビューの追加"

  6. 削除テンプレートには、モデルのすべてのフィールドが表示されます。 ここでは、アルバムのタイトルのみが表示されるようにします。 これを行うには、ビューの内容を次のコードに置き換えます。

    @model MvcMusicStore.Models.Album
@{
     ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>

<h3> Are you sure you want to delete the album title <strong>@Model.Title </strong> ? </h3>

@using (Html.BeginForm()) {
     <p>
          <input type="submit" value="Delete" /> |
          @Html.ActionLink("Back to List", "Index")
     </p>
}

タスク 2 - アプリケーションの実行

このタスクでは、 StoreManager Delete View ページに確認削除フォームが表示されることをテストします。

  1. F5 キーを押してアプリケーションを実行します。

  2. プロジェクトはホーム ページから開始します。 URL を /StoreManager に変更します。 [削除] をクリックして削除するアルバムを 1 つ選択し、新しいビューがアップロードされていることを確認します。

    スクリーンショットには、[削除] リンクが選択されており、[削除の確認] ウィンドウが開きます。

    "アルバムの削除"

タスク 3: HTTP-POST Delete アクション メソッドの実装

このタスクでは、ユーザーが [削除] ボタンをクリックしたときに呼び出される HTTP-POST バージョンの Delete アクション メソッドを実装します。 このメソッドは、データベース内のアルバムを削除します。

  1. 必要に応じてブラウザーを閉じ、Visual Studio ウィンドウに戻ります。 StoreManagerController クラスを開きます。 これを行うには、Controllers フォルダーを展開して、StoreManagerController.cs をダブルクリックします。

  2. HTTP-POST Delete アクション メソッド コードを次のように置き換えます。

    (コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex5 Handling Deletion HTTP-POST Delete アクション")

    //
// POST: /StoreManager/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
     Album album = this.db.Albums.Find(id);
     this.db.Albums.Remove(album);
     this.db.SaveChanges();

     return this.RedirectToAction("Index"); 
}

タスク 4 - アプリケーションの実行

このタスクでは、StoreManager の [削除] ビュー ページでアルバムを削除でき、その後に StoreManager インデックス ビューにリダイレクトされることをテストします。

  1. F5 キーを押してアプリケーションを実行します。

  2. プロジェクトはホーム ページから開始します。 URL を /StoreManager に変更します。 [削除] をクリックして、削除するアルバムを 1 つ選択します。[削除] ボタンをクリックして、削除を確認します。

    [削除の確認] ウィンドウを示すスクリーンショット。

    "アルバムの削除"

  3. アルバムが [インデックス] ページに表示されず、削除されたことを確認します。

演習 6: 検証の追加

ここまでで作成した作成フォームと編集フォームでは、どのような種類の検証も実行されません。 ユーザーが必須フィールドを空白のままにするか、価格フィールドに文字を入力すると、最初のエラーはデータベースから発生します。

モデル クラスにデータ注釈を追加することにより、アプリケーションに検証を追加できます。 データ注釈を使用すると、モデルのプロパティに適用する規則を記述できます。さらに、ASP.NET MVC によって適切なメッセージが適用され、ユーザーに表示されます。

タスク 1 - データ注釈の追加

このタスクでは、アルバム モデルにデータ注釈を追加します。これにより、[作成] ページと [編集] ページに必要に応じて検証メッセージが表示されるようになります。

単純な Model クラスの場合、データ注釈の追加は、System.ComponentModel.DataAnnotation に対して using ステートメントを追加し、適切なプロパティに [必須] 属性を指定することで処理されます。 次の例では、Name プロパティをビューの必須フィールドに指定します。

using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
    public class Superhero
    {
        [Required]
        public string Name { get; set; }

        public bool WearsCape { get; set; }
    }
}

これは、Entity Data Model が生成されるこのアプリケーションのような場合は、もう少し複雑です。 データ注釈をモデル クラスに直接追加した場合、データベースからモデルを更新すると、上書きされてしまいます。 代わりに、メタデータ部分クラスを使用できます。メタデータ部分クラスは、注釈を保持するために存在しており、[MetadataType] 属性を使用してモデル クラスに関連付けられています。

  1. Source/Ex6-AddingValidation/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。

    1. 提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。

    2. [NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。

    3. 最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。

      Note

      NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。

  2. Models フォルダーから Album.cs を開きます。

  3. Album.cs の内容を強調表示されたコードに置き換え、次のようにします。

    Note

    [DisplayFormat(ConvertEmptyStringToNull=false)] 行は、データ フィールドがデータ ソースで更新されるときに、モデルの空の文字列が null に変換されないことを示します。 この設定により、データ注釈がフィールドを検証する前に Entity Framework によってモデルに null 値が割り当てられる例外を回避できます。

    (コード スニペット - "ASP.NET MVC 4 ヘルパーとフォームおよび検証 - Ex6 Album メタデータ部分クラス")

    namespace MvcMusicStore.Models
{
    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;

    public class Album
    {
        [ScaffoldColumn(false)]
        public int AlbumId { get; set; }

        [DisplayName("Genre")]
        public int GenreId { get; set; }

        [DisplayName("Artist")]
        public int ArtistId { get; set; }

        [Required(ErrorMessage = "An Album Title is required")]
        [DisplayFormat(ConvertEmptyStringToNull = false)]
        [StringLength(160, MinimumLength = 2)]
        public string Title { get; set; }

        [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }

        [DisplayName("Album Art URL")]
        [DataType(DataType.ImageUrl)]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }

        public virtual Genre Genre { get; set; }

        public virtual Artist Artist { get; set; }
    }
}

    Note

    この Album 部分クラスには、データ注釈のための AlbumMetaData クラスを指す [MetadataType] 属性があります。 アルバム モデルに注釈を付けるために使用するデータ注釈属性の一部を次に示します。

    • Required - そのプロパティが必須フィールドであることを示します。
    • DisplayName - フォーム フィールドと検証メッセージで使用するテキストを定義します。
    • DisplayFormat - データ フィールドの表示方法と書式設定を指定します。
    • StringLength - 文字列フィールドの最大長を定義します。
    • Range - 数値フィールドの最大値と最小値を指定します。
    • ScaffoldColumn - エディター フォームからフィールドを非表示にできます。

タスク 2 - アプリケーションの実行

このタスクでは、最後のタスクで選択した表示名を使用して、[作成] ページと [編集] ページでフィールドが検証されることをテストします。

  1. F5 キーを押してアプリケーションを実行します。

  2. プロジェクトはホーム ページから開始します。 URL を /StoreManager/Create に変更します。 表示名が部分クラスの名前と一致することを確認します ([AlbumArtUrl] ではなく [アルバム アートの URL] など)

  3. フォームに入力せずに、[作成] をクリックします。 対応する検証メッセージが表示されることを確認します。

    "[作成] ページのフィールド検証結果"

  4. [編集] ページでも同じようになることを確認できます。 URL を /StoreManager/Edit/1 に変更し、表示名が部分クラスの名前 ([AlbumArtUrl] ではなく [アルバム アートの URL] など) と一致することを確認します。 [タイトル] フィールドと [価格] フィールドを空にして、[保存] をクリックします。 対応する検証メッセージが表示されることを確認します。

    "[編集] ページのフィールド検証結果"

演習 7: クライアント側での Unobtrusive jQuery の使用

この演習では、クライアント側で MVC 4 Unobtrusive jQuery 検証を有効にする方法について学習します。

Note

Unobtrusive jQuery は、インライン クライアント スクリプトを侵入的に出力するのではなく、data-ajax プレフィックス JavaScript を使用してサーバー上でアクション メソッドを呼び出します。

タスク 1 - Unobtrusive jQuery を有効にする前のアプリケーションの実行

このタスクでは、両方の検証モデルを比較するために、jQuery を含める前にアプリケーションを実行します。

  1. Source/Ex7-UnobtrusivejQueryValidation/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。

    1. 提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。

    2. [NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。

    3. 最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。

      Note

      NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。

  2. F5 キーを押してアプリケーションを実行します。

  3. プロジェクトはホーム ページから開始します。 /StoreManager/Create を参照し、フォームに入力せずに [作成] をクリックして、検証メッセージが表示されることを確認します。

    "無効化されたクライアント検証"

  4. ブラウザーで、HTML ソース コードを開きます。

    ...
          <div class="editor-label">
                <label for="Price">Price</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="Price" name="Price" type="text" value="" />
                <span class="field-validation-valid" id="Price_validationMessage"></span>
          </div>

          <div class="editor-label">
                <label for="AlbumArtUrl">Album Art URL</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
                <span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
          </div>

          <p>
                <input type="submit" value="Create" />
          </p>
     </fieldset>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>
...

タスク 2 - Unobtrusive クライアント検証の有効化

このタスクでは、Web.config ファイルから jQuery Unobtrusive Client Validation を有効にします。この検証は、新しい ASP.NET MVC 4 プロジェクトすべてで、既定では false に設定されています。 さらに、jQuery Unobtrusive Client Validation を機能させるために必要なスクリプト参照を追加します。

  1. プロジェクト ルートで Web.Config ファイルを開きClientValidationEnabled キーと UnobtrusiveJavaScriptEnabled キーの値が true に設定されていることを確認します。

    ...
<configuration>
  <appSettings>
     <add key="webpages:Version" value="2.0.0.0" />
     <add key="webpages:Enabled" value="false" />
     <add key="PreserveLoginUrl" value="true" />
     <add key="ClientValidationEnabled" value="true" />
     <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
...

    Note

    Global.asax.cs のコードでクライアント検証を有効にして、同じ結果を得ることもできます。

    HtmlHelper.ClientValidationEnabled = true;

    さらに、ClientValidationEnabled 属性を任意のコントローラーに割り当てて、カスタムの動作を指定することもできます。

  2. Views\StoreManager にある Create.cshtml を開きます。

  3. スクリプト ファイル jquery.validate と jquery.validate.unobtrusive が、"~/bundles/jqueryval" バンドルを介したビューで参照されていることを確認します。

    ...
@section Scripts {
     @Scripts.Render("~/bundles/jqueryval")
}

    Note

    これらの jQuery ライブラリはすべて、MVC 4 の新しいプロジェクトに含まれています。 その他のライブラリは、プロジェクトの /Scripts フォルダーにあります。

    この検証ライブラリを機能させるには、jQuery フレームワーク ライブラリへの参照を追加する必要があります。 この参照は既に _Layout.cshtml ファイルに追加されているため、この特定のビューに追加する必要はありません。

タスク 3 - Unobtrusive jQuery Validation を使用したアプリケーションの実行

このタスクでは、ユーザーが新しいアルバムを作成するときに、StoreManager の作成ビュー テンプレートが jQuery ライブラリを使用してクライアント側検証を実行することをテストします。

  1. F5 キーを押してアプリケーションを実行します。

  2. プロジェクトはホーム ページから開始します。 /StoreManager/Create を参照し、フォームに入力せずに [作成] をクリックして、検証メッセージが表示されることを確認します。

    "jQuery を有効にしたクライアント検証"

  3. ブラウザーで、作成ビューのソース コードを開きます。

    ...
<div class="editor-label">
    <label for="Title">Title</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="Price">Price</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="AlbumArtUrl">Album Art URL</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
</div>        
...

    Note

    クライアント検証規則ごとに、Unobtrusive jQuery は data-val-rulename="message" という属性を追加します。 クライアント検証を実行するために Unobtrusive jQuery が html 入力フィールドに挿入するタグの一覧を次に示します。

    • Data-val
    • Data-val-number
    • Data-val-range
    • Data-val-range-min / Data-val-range-max
    • Data-val-required
    • Data-val-length
    • Data-val-length-max / Data-val-length-min

    すべてのデータ値には、モデルのデータ注釈が入力されます。 そのため、サーバー側で動作するすべてのロジックをクライアント側で実行できます。 たとえば、Price 属性には、モデル内に次のデータ注釈があります。

    [Required(ErrorMessage = "Price is required")]
[Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
public object Price { get; set; }

    Unobtrusive jQuery を使用した後、生成されるコードは次のようになります。

    <input data-val="true"
data-val-number="The field Price must be a number."
data-val-range="Price must be between 0.01 and 100.00"
data-val-range-max="100"
data-val-range-min="0.01"
data-val-required="Price is required"
id="Album_Price" name="Album.Price" type="text" value="0" />

まとめ

このハンズオン ラボをとおして、ユーザーが次の方法でデータベースの格納データを変更できるようにする方法を学習しました。

  • インデックス、作成、編集、削除などのコントローラー アクション
  • HTML テーブルにプロパティを表示するための ASP.NET MVC のスキャフォールディング機能
  • ユーザー エクスペリエンスを向上させるカスタム HTML ヘルパー
  • HTTP-GET 呼び出しまたは HTTP-POST 呼び出しに反応するアクション メソッド
  • [作成] や [編集] などの類似したビュー テンプレート用の共有エディター テンプレート
  • ドロップダウンなどのフォーム要素
  • モデル検証用のデータ注釈
  • jQuery Unobtrusive ライブラリを使用したクライアント側検証

付録 A: Visual Studio Express 2012 for Web のインストール

Microsoft Web Platform Installer を使用して、Microsoft Visual Studio Express 2012 for Web または別の "Express" バージョンをインストールできます。 次の手順では、Microsoft Web Platform Installer を使用して Visual studio Express 2012 for Web をインストールするために必要な手順について説明します。

  1. [https://go.microsoft.com/?linkid=9810169] (https://go.microsoft.com/?linkid=9810169) に移動します。 または、Web Platform Installer を既にインストールしている場合、それを開き、製品 "Visual Studio Express 2012 for Web with Windows Azure SDK" を検索できます。

  2. [今すぐインストール] をクリックします。 Web Platform Installer がない場合は、最初にダウンロードしてインストールするようにリダイレクトされます。

  3. Web Platform Installer が開いたら、[インストール] をクリックしてセットアップを開始します。

    Visual Studio Express をインストールする

    Visual Studio Express をインストールする

  4. すべての製品のライセンスと使用条件を読み、[同意する] をクリックして続行します。

    ライセンス条項に同意する

    ライセンス条項に同意する

  5. ダウンロードとインストールのプロセスが完了するまで待機します。

    インストールの進行状況

    インストールの進行状況

  6. インストールが完了したら、[完了] をクリックします。

    インストールの完了

    インストールの完了

  7. [終了] をクリックして Web Platform Installer を閉じます。

  8. Visual Studio Express for Web を開くには、[スタート] 画面に移動し、「VS Express」と記入して、[VS Express for Web] タイルをクリックします。

    VS Express for Web タイル

    VS Express for Web タイル

付録 B: コード スニペットの使用

コード スニペットを使用すると、必要なすべてのコードをすぐに入手できます。 ラボ ドキュメントでは、次の図に示すように、使用できるタイミングが正確に示されています。

Visual Studio コード スニペットを使用してプロジェクトにコードを挿入する

Visual Studio コード スニペットを使用してプロジェクトにコードを挿入する

キーボードを使用してコード スニペットを追加するには (C# のみ)

  1. コードを挿入する場所にカーソルを置きます。
  2. スニペット名の入力を開始します (スペースやハイフンは使用しない)。
  3. IntelliSense に対応するスニペットの名前が表示されるのを確認します。
  4. 適切なスニペットを選択します (または、スニペットの名前が完全に選択されるまで入力を続けます)。
  5. Tab キーを 2 回押して、カーソル位置にスニペットを挿入します。

スニペット名の入力を開始する

スニペット名の入力を開始する

Tab キーを押して強調表示されたスニペットを選択する

Tab キーを押して強調表示されたスニペットを選択する

Tab キーをもう一度押すと、スニペットが展開される

Tab キーをもう一度押すと、スニペットが展開される

マウスを使用してコード スニペット追加するには (C#、Visual Basic、XML) 1. コード スニペットを挿入する場所を右クリックします。

  1. [スニペットの挿入] に続いて [マイ コード スニペット] を選択します。
  2. 関連するスニペットをクリックして、一覧から選択します。

コード スニペットを挿入する場所を右クリックし、[スニペットの挿入] を選択する

コード スニペットを挿入する場所を右クリックし、[スニペットの挿入] を選択する

関連するスニペットをクリックして、一覧から選択する

関連するスニペットをクリックして、一覧から選択する