次の方法で共有

ASP.NET MVC 4 の基礎

  • [アーティクル]

Web Camps チーム

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

このハンズオン ラボは、MVC (モデル ビュー コントローラー) ミュージック ストアに基づいています。このチュートリアル アプリケーションでは、ASP.NET MVC と Visual Studio の使用方法を段階的に説明します。 ラボ全体を通して、これらのテクノロジを組み合わせて使用することが、シンプルでありながらパワフルであることについて説明します。 簡単なアプリケーションから始めて、完全に機能する ASP.NET MVC 4 Web アプリケーションをビルドします。

このラボでは、ASP.NET MVC 4 に取り組みます。

チュートリアル アプリケーションの ASP.NET MVC 3 バージョンを調べる場合は、MVC-Music-Store をご覧ください。

このハンズオン ラボでは、開発者に HTML や JavaScript などの Web 開発テクノロジの経験があることを前提としています。

Note

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

ミュージック ストア アプリケーション

このラボ全体でビルドされるミュージック ストア Web アプリケーションは、ショッピング、精算、管理の 3 つの主要な部分で構成されます。 訪問者はジャンル別にアルバムを閲覧し、カートにアルバムを追加し、選択を確認し、最後にログインして注文を完了するために精算に進むことができます。 さらに、ストア管理者は、入手可能なアルバムとその主なプロパティを管理できます。

ミュージック ストア の画面

ミュージック ストア の画面

ASP.NET MVC 4 Essentials

ミュージック ストア アプリケーションは、モデル ビュー コントローラー (MVC) を使用してビルドされます。これは、アプリケーションを 3 つの主要なコンポーネントに分けるアーキテクチャ パターンです。

  • モデル: モデル オブジェクトは、ドメイン ロジックを実装するアプリケーションの部分です。 多くの場合、モデル オブジェクトはモデルの状態の取得とデータベースへの保存も行います。
  • ビュー: ビューは、アプリケーションのユーザー インターフェイス (UI) を表示するコンポーネントです。 通常、この UI はモデル データから作成されます。 一例として、Album オブジェクトの現在の状態に基づいてテキスト ボックスとドロップダウン リストを表示するアルバムの編集ビューがあります。
  • コントローラー: コントローラーは、ユーザーの操作を処理し、モデルを操作し、UI をレンダリングするビューを最終的に選択するコンポーネントです。 MVC アプリケーションでは、ビューは情報のみを表示し、コントローラーがユーザーの入力と操作を処理して応答します。

MVC パターンを使用すると、アプリケーションのさまざまな側面 (入力ロジック、ビジネス ロジック、UI ロジック) を分離し、これらの要素間の緩い結合を提供するアプリケーションを作成できます。 このように分離することで、一度に実装の1つの側面に集中することができるため、アプリケーションをビルドする際の複雑さの管理に役立ちます。 さらに、MVC パターンを使用すると、アプリケーションを簡単にテストできるようになり、アプリケーションを作成するためのテスト駆動開発 (TDD) の使用も促進されます。

ASP.NET MVC フレームワークは、MVC ベースの Web アプリケーションを作成するための ASP.NET Web Forms パターン ASP.NET の代替手段となります。 ASP.NET MVC フレームワークは、(Web フォーム ベースのアプリケーションと同様に) マスター ページやメンバーシップ ベース認証などの既存の ASP.NET 機能と統合された、コア .NET フレームワークのすべての機能を利用できる、軽量でテストがしやすいプレゼンテーション フレームワークです。 すでに ASP.NET Web Forms に慣れている場合は、すでに使用しているライブラリがすべて ASP.NET MVC 4 でも利用できるので便利です。

さらに、MVC アプリケーションは、3 つの主要なコンポーネント間の結合が緩いため、並行開発にも適しています。 たとえば、1 人の開発者がビューで作業でき、2 人目の開発者はコントローラー ロジックに取り組み、3 人目の開発者はモデルのビジネス ロジックに集中できます。

目標

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

  • ミュージック ストア アプリケーションのチュートリアルに基づいて、ASP.NET MVC アプリケーションをゼロから作成する
  • Web サイトのホーム ページへの URL を処理し、そのメイン機能を参照するためのコントローラーを追加する
  • ビューを追加して、そのスタイルと共に表示されるコンテンツをカスタマイズする
  • データとドメイン ロジックを格納および管理するためのモデル クラスを追加する
  • View Model パターンを使用してコントローラー アクションからビュー テンプレートに情報を渡す
  • インターネット アプリケーション用の ASP.NET MVC 4 の新しいテンプレートを調べる

前提条件

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

段取り

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

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

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

演習

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

  1. 演習 1: MVC Web アプリケーション プロジェクト ASP.NET MusicStore を作成する
  2. 演習 2: コントローラーを作成する
  3. 演習 3: コントローラーにパラメーターを渡す
  4. 演習 4: ビューを作成する
  5. 演習 5: ビュー モデルを作成する
  6. 演習 6: ビューでパラメーターを使用する
  7. 演習 7: MVC 4 の新しいテンプレート ASP.NET を短時間でチェックする

Note

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

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

演習 1: MVC Web アプリケーション プロジェクト ASP.NET MusicStore を作成する

この演習では、Visual Studio 2012 Express for Web とそのメイン フォルダー組織で ASP.NET MVC アプリケーションを作成する方法について説明します。 さらに、新しいコントローラーを追加し、アプリケーションのホーム ページにシンプルな文字列を表示する方法について説明します。

タスク 1 - ASP.NET MVC Web アプリケーション プロジェクトの作成

  1. このタスクでは、MVC Visual Studio テンプレートを使用して、空の ASP.NET MVC アプリケーション プロジェクトを作成します。 VS Express for Web を起動します。

  2. [ファイル] メニューの [新しいプロジェクト] をクリックします。

  3. [新しいプロジェクト] ダイアログ ボックスで、[Visual C#, Web テンプレートの一覧にあるASP.NET MVC 4 Web アプリケーション プロジェクトの種類を選択します。

  4. [名前] を "MvcMusicStore" に変更します。

  5. この演習のソース フォルダー内の新しい Begin フォルダー内のソリューションの場所を設定します (例: [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin)。 OK をクリックします。

    [新しいプロジェクトの作成] ダイアログ ボックス

    [新しいプロジェクトの作成] ダイアログ ボックス

  6. [新しい ASP.NET MVC 4 プロジェクト] ダイアログ ボックスで、[Basic]テンプレートを選択し、選択したビュー エンジンが "Razor" であることを確認します。 OK をクリックします。

    [新しい ASP.NET MVC 4 プロジェクト] ダイアログ ボックス

    [新しい ASP.NET MVC 4 プロジェクト] ダイアログ ボックス

タスク 2 - ソリューション構造の確認

ASP.NET MVC フレームワークには、MVC パターンをサポートする Web アプリケーションの作成に役立つ Visual Studio プロジェクト テンプレートが含まれています。 このテンプレートを使用すると、必要なフォルダー、項目テンプレート、および構成ファイル エントリを含む新しい ASP.NET MVC Web アプリケーションを作成できます。

このタスクでは、ソリューション構造を調べて、関連する要素とその関係を理解します。 ASP.NET MVC フレームワークでは既定で "構成に関する規則" アプローチが使用され、フォルダーの名前付け規則に基づいていくつかの既定の仮定が行われるため、次のフォルダーはすべての ASP.NET MVC アプリケーションに含まれています。

  1. プロジェクトが作成されたら、右側の ソリューション エクスプローラー で作成されたフォルダー構造を確認します。

    ソリューション エクスプローラーでの ASP.NET MVC フォルダー構造

    ソリューション エクスプローラーでの ASP.NET MVC フォルダー構造

    1. コントローラー。 このフォルダーには、コントローラー クラスが含まれます。 MVC ベースのアプリケーションでは、コントローラーはエンド ユーザーの操作を処理し、モデルを操作し、UI をレンダリングするビューを最終的に選択する役割を担います。

      Note

      MVC フレームワークでは、すべてのコントローラーの名前の末尾に "Controller" を付ける必要があります (HomeController、LoginController、ProductController など)。

    2. モデル。 このフォルダーは、MVC Web アプリケーションのアプリケーション モデルを表すクラスのために用意されます。 これには通常、オブジェクトとデータ ストアを操作するためのロジックを定義するコードが含まれます。 通常、実際のモデル オブジェクトは別のクラス ライブラリにあります。 ただし、新しいアプリケーションを作成するときは、クラスをこのフォルダーに含めておき、開発サイクルの後の段階で別のクラス ライブラリに移動することもできます。

    3. "ビュー"。 このフォルダーは、アプリケーションのユーザー インターフェイスを表示するコンポーネントであるビューの推奨保存先です。 ビューでは、レンダリング ビューに関連するその他のファイルに加えて、.aspx、.ascx、.cshtml、.master ファイルが使用されます。 ビュー フォルダーには、コントローラーごとに 1 つのフォルダーが含まれ、各フォルダーにはコントローラー名のプレフィックスに基づいて名前が付けらます。 たとえば、HomeController という名前のコントローラーがある場合、ビュー フォルダーには "Home" という名前のフォルダーが含まれます。 既定では、ASP.NET MVC フレームワークがビューを読み込むとき、Views\controllerName フォルダー (Views[ControllerName][Action].aspx) で、または Razor ビューの (Views[ControllerName][Action].cshtml) で、要求されたビュー名を持つ .aspx ファイルが検索されます。

      Note

      MVC Web アプリケーションは、前述のフォルダーに加えて、Global.asax ファイルを使用してグローバル URL ルーティングの既定値を設定し、Web.config ファイルを使用してアプリケーションを構成します。

タスク 3 - HomeController の追加

MVC フレームワークを使用しない ASP.NET アプリケーションでは、ユーザーとの対話はページと、それらのページからのイベントの発生と処理によって構成されます。 これに対して、ASP.NET MVC アプリケーションでは、ユーザーとの対話はコントローラーとそのアクション メソッドを中心に構成されます。

一方、ASP.NET MVC フレームワークは、URL をコントローラーと呼ばれるクラスにマップします。 コントローラーは、受信要求の処理、ユーザー入力と対話の処理、適切なアプリケーション ロジックの実行、クライアントに送り返す応答の決定 (HTML の表示、ファイルのダウンロード、別の URL へのリダイレクトなど) を行います。 HTML を表示する場合、コントローラー クラスでは通常、別のビュー コンポーネントを呼び出して、要求の HTML マークアップを生成します。 MVC アプリケーションでは、ビューは情報のみを表示し、コントローラーがユーザーの入力と操作を処理して応答します。

このタスクでは、ミュージック ストア Web サイトのホーム ページに URL を処理するコントローラー クラスを追加します。

  1. ソリューション エクスプローラー内の [Controllers] フォルダーを右クリックし、[追加] を選択し、[コントローラー] コマンドを選択します。

    コントローラー コマンドを追加する

    [コントローラーの追加] コマンド

  2. [コントローラー の追加] ダイアログが表示されます。 コントローラーに "HomeController" という名前を付け、[追加] を押します。

    コントローラーを作成するための使用可能なオプションを含む [コントローラーの追加] ダイアログ ボックスのスクリーンショット。

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

  3. ファイル HomeController.cs は Controllers フォルダーに作成されます。 HomeController が Index アクションで文字列を返すようにするには、Index メソッドを次のコードに置き換えます。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex1 HomeController Index)

    public string Index()
{
    return "Hello from Home";
}

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

このタスクでは、Web ブラウザーでアプリケーションを試します。

  1. F5 キーを押してアプリケーションを実行します。 プロジェクトがコンパイルされ、ローカルの IIS Web サーバーが起動します。 ローカル IIS Web サーバーは、Web サーバーの URL を指す Web ブラウザーを自動的に開きます。

    Web ブラウザーで実行されているアプリケーション

    Web ブラウザーで実行されているアプリケーション

    Note

    ローカル IIS Web サーバーは、ランダムな空きポート番号で Web サイトを実行します。 上の図では、Web サイトは http://localhost:50103/で実行されているため、ポート 50103 を使用しています。 ポート番号は異なる場合があります。

  2. ブラウザーを閉じます。

演習 2: コントローラーを作成する

この演習では、ミュージック ストア アプリケーションの単純な機能を実装するようにコントローラーを更新する方法について説明します。 そのコントローラーは、次の特定の各要求を処理するアクション メソッドを定義します。

  • ミュージック ストアの音楽ジャンルの一覧ページ
  • 特定のジャンルのすべての音楽アルバムを一覧表示する閲覧ページ
  • 特定の音楽アルバムに関する情報を表示する詳細ページ

この演習のスコープでは、これらのアクションは単に文字列を返します。

タスク 1 - 新しい StoreController クラスの追加

このタスクでは、新しいコントローラーを追加します。

  1. まだ開いていない場合は、VS Express for Web 2012 を起動します。

  2. [ファイル] メニューの [プロジェクトを開く] を選択します。 [プロジェクトを開く] ダイアログで、Source\Ex02-CreatingAController\Begin を参照し、[Begin.sln] を選択し、[開く] をクリックします。 または、前の演習を完了した後に取得したソリューションで続行するという方法もあります。

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

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

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

      Note

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

  3. 新しいコントローラーを追加します。 これを行うには、ソリューション エクスプローラー内の Controllers フォルダーを右クリックし、[追加] を選択して、[コントローラー] コマンドを選択します。 コントローラー名を "StoreController" に変更し、[追加] をクリックします。

    コントローラー名を入力するためのバーとスキャフォールディング オプションを選択するためのオプションを含むコントローラー ダイアログのスクリーンショットを追加します。

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

タスク 2 - StoreController のアクションの変更

タスクでは、"アクション" と呼ばれる Controller メソッドを変更します。 アクションは、URL 要求を処理し、URL を呼び出したブラウザーまたはユーザーに送り返されるコンテンツを決定する役割を担います。

  1. StoreController クラスには既に Index メソッドがあります。 このラボの後半で使用して、ミュージック ストアのすべてのジャンルを一覧表示するページを実装します。 ここでは、Index メソッドを、文字列 "Hello from Store.Index()" を返す次のコードに置き換えてください。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex2 StoreController Index)

    public string Index()
{
  return "Hello from Store.Index()";
}

  2. Browse メソッドおよび Details メソッドを追加します。 これを行うには、StoreController に次のコードを追加します。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex2 StoreController BrowseAndDetails)

    // GET: /Store/Browse
public string Browse()
{
  return "Hello from Store.Browse()";
}

// GET: /Store/Details  
public string Details()
{
  return "Hello from Store.Details()";
}

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

このタスクでは、Web ブラウザーでアプリケーションを試します。

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

  2. プロジェクトはホーム ページから開始します。 URL を変更して、各アクションの実装を確認します。

    1. /Store。 "Hello from Store.Index()" と表示されます。

    2. /Store/Browse。 "Hello from Store.Browse()" と表示されます。

    3. /Store/Details。 "Hello from Store.Details()" と表示されます。

      StoreBrowse の参照

      /Store/Browse の参照

  3. ブラウザーを閉じます。

演習 3: コントローラーにパラメーターを渡す

これまでは、コントローラーから定数文字列を返してきました。 この演習では、URL とクエリ文字列を使用してコントローラーにパラメーターを渡し、メソッド アクションがテキストでブラウザーに応答するようにする方法について説明します。

タスク 1 - StoreController へのジャンル パラメーターの追加

このタスクでは、クエリ文字列 を使用して、StoreController の Browse アクション メソッドにパラメーターを送信します。

  1. まだ開いていない場合は、VS Express for Web 2012 を起動します。

  2. [ファイル] メニューの [プロジェクトを開く] を選択します。 [プロジェクトを開く] ダイアログで、Ex03-PassingParametersToAController\Begin を参照し、[Begin.sln] を選択し、[開く] をクリックします。 または、前の演習を完了した後に取得したソリューションで続行するという方法もあります。

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

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

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

      Note

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

  3. StoreController クラスを開きます。 これを行うには、ソリューション エクスプローラーで、Controllers フォルダーを展開して StoreController.cs をダブルクリックします。

  4. Browse メソッドを変更し、特定のジャンルを要求する文字列パラメーターを追加します。 ASP.NET MVC は、アクション メソッドが呼び出されたときに、クエリ文字列または"genre" という名前のフォーム ポスト パラメーターを自動的にアクション メソッドに渡します。 これを行うには、 Browse メソッドを次のコードに置き換えます。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex3 StoreController BrowseMethod)

    // GET: /Store/Browse?genre=Disco   
public string Browse(string genre)
{
  string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);

  return message;
}

Note

HttpUtility.HtmlEncode ユーティリティ メソッドを使用して、ユーザーが /Store/Browse?Genre=<script>window.location='http://hackersite.com'</script> などのリンクを使用して Javascript をビューに挿入できないようにしています。

詳細については、こちらの MSDN 記事を参照してください。

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

このタスクでは、Web ブラウザーでアプリケーションを試し、genre パラメーターを使用します。

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

  2. プロジェクトはホーム ページから開始します。 URL を /Store/Browse?Genre=Disco に変更し、アクションが genre パラメーターを受け取ることを確認します。

    StoreBrowseGenre=Disco の参照

    /Store/Browse?Genre=Disco の表示

  3. ブラウザーを閉じます。

タスク 3 - URL に埋め込まれた id パラメーターの追加

このタスクでは、 URL を使用して、 StoreController の Details アクション メソッドに id パラメーターを渡します。 ASP.NET MVC の既定のルーティング規則は、アクション メソッド名の後にある URL のセグメントを "id" という名前のパラメーターとして扱うことです。アクション メソッドに "id" という名前のパラメーターがある場合、ASP.NET MVC はパラメーターとして URL セグメントを自動的に渡します。 URL Store/Details/5 では、id は 5 と解釈されます。

  1. StoreController の Detailsメソッドを変更し、"id" と呼ばれる intパラメーターを追加します。これを行うには、Details メソッドを次のコードに置き換えます。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex3 StoreController DetailsMethod)

    // GET: /Store/Details/5    
public string Details(int id)
{
  string message = "Store.Details, ID = " + id;

  return message;
}

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

このタスクでは、Web ブラウザーでアプリケーションを試し、id パラメーターを使用します。

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

  2. プロジェクトはホーム ページから開始します。 URL を /Store/Details/5 に変更し、アクションが id パラメーターを受け取ることを確認します。

    StoreDetails5 の参照

    /Store/Details/5 の表示

演習 4: ビューを作成する

ここまでは、コントローラー アクションから文字列を返してきました。 これはコントローラーのしくみを理解する便利な方法ですが、実際の Web アプリケーションのビルド方法ではありません。 ビューは、テンプレート ファイルを使用してブラウザーに HTML を生成するためのより優れたアプローチを提供するコンポーネントです。

この演習では、レイアウト マスター ページを追加して、一般的な HTML コンテンツのテンプレートを設定する方法、Web サイトの外観とフィーリングを向上させるスタイルシート、最後に HomeController が HTML を返せるようにするビュー テンプレートを追加する方法について説明します。

タスク 1 - _layout.cshtml ファイルの変更

ファイル ~/Views/Shared/_layout.cshtml を使用すると、Web サイト全体で使用する共通 HTML 用のテンプレートを設定できます。 このタスクでは、ホーム ページとストア領域へのリンクを含む共通ヘッダーを持つレイアウト マスター ページを追加します。

  1. まだ開いていない場合は、VS Express for Web 2012 を起動します。

  2. [ファイル] メニューの [プロジェクトを開く] を選択します。 [プロジェクトを開く] ダイアログで、Source\Ex04-CreatingAView\Begin を参照し、[Begin.sln] を選択し、[開く] をクリックします。 または、前の演習を完了した後に取得したソリューションで続行するという方法もあります。

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

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

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

      Note

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

  3. ファイル _layout.cshtml には、Web サイト上のすべてのページの HTML コンテナー レイアウトが含まれています。 これには、HTML 応答の <html> 要素、<head> 要素、<body> 要素が含まれます。 HTML 本文内の"@RenderBody()" は、ビュー テンプレートにより動的コンテンツを使用して埋めることができる領域を特定します。 (C#)

    <!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>

  4. Web サイト内のすべてのページのホーム ページと [ストア] 区分へのリンクを含む共通ヘッダーを追加します。 これを行うには、<body> ステートメントの下に次のコードを追加します。 (C#)

    <!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>

  5. div を含めて各ページの body セクションをレンダリングします。 @RenderBody() を次の強調表示されたコードに置き換えます: (C#)

    ...
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     <div id="body">
          @RenderSection("featured", required: false)
          <section class="content-wrapper main-content clear-fix">
                @RenderBody()
          </section>
     </div>
     ...
</body>
</html>

    Note

    ご存知でしたか? Visual Studio 2012 には、HTML、コード ファイルなどの一般的に使用されるコードを簡単に追加できるスニペットがあります。 <"div"> と入力し、Tab キーを 2 回押して完全な div タグを挿入して、試してみてください。

タスク 2 - CSS スタイルシートの追加

空のプロジェクト テンプレートには、基本的なフォームと、検証メッセージを表示するために使われるスタイルのみを含む、非常に合理化された CSS ファイルが含まれています。 Web サイトの外観とフィーリングを向上させるために、追加の CSS と画像 (デザイナーが提供する可能性あり) を使用します。

このタスクでは、Web サイトのスタイルを定義する CSS スタイル シートを追加します。

  1. CSS ファイルとイメージは、このラボの Source\Assets\Content フォルダーに含まれています。 アプリケーションに追加するには、次に示すように、[Windows エクスプローラー] ウィンドウから Visual Studio Express for Web のソリューション エクスプローラーにコンテンツをドラッグします。

    スタイルの内容をドラッグ

    スタイルの内容をドラッグ

  2. 警告ダイアログが表示され、Site.css ファイルといくつかの既存の画像を置き換える確認が求められます。 [すべてのアイテムに適用] にチェックを入れ、[はい] をクリックします。

タスク 3 - ビュー テンプレートの追加

このタスクでは、ビュー テンプレートを追加して、この演習で追加したレイアウト マスター ページと CSS を使用する HTML 応答を生成します。

  1. Web サイトのホーム ページを参照するときにビュー テンプレートを使用するには、まず、文字列を返す代わりに、HomeController Index メソッドが View を返すように指定する必要があります。 HomeController クラスを開き、Index メソッドを変更して ActionResult を返し、View() を返します。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex4 HomeController Index)

    public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return this.View();
    }
}

  2. 次に、適切なビュー テンプレートを追加する必要があります。 これを行うには、Index アクション メソッド内を右クリックして、[ビューの追加] を選択します。 これにより [ビューの追加] ダイアログが表示されます。

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

  3. [ビューの追加] ダイアログが表示され、ビュー テンプレート ファイルが生成されます。 既定では、このダイアログはビュー テンプレートの名前を事前に設定して、それを使用するアクション メソッドと一致するようにします。 HomeController 内の Index アクション メソッド内で [ビューの追加] コンテキスト メニューを使用したため、[ビューの追加] ダイアログには既定のビュー名として "Index" があります。 追加をクリックします。

    [ビューの追加] ダイアログのスクリーンショット。ビュー テンプレートを追加するための特定のオプションを含むダイアログ ボックスが表示されます。

    [ビューの追加] ダイアログ

  4. Visual Studio により、Views\Home フォルダー内に Index.cshtml ビュー テンプレートが生成され、開かれます。

    作成されたホーム インデックス ビュー

    作成されたホーム インデックス ビュー

    Note

    Index.cshtml ファイルの名前と場所は関連しており、既定の ASP.NET MVC の名前付け規則に従います。

    フォルダー \Views*Home* は、コントローラー名 (Home コントローラー) と一致します。 ビュー テンプレート名 (Index) は、ビューを表示するコントローラー アクション メソッドと一致します。

    このように、ASP.NET MVC では、この名前付け規則を使用してビューを返すときに、ビュー テンプレートの名前または場所を明示的に指定する必要がなくなります。

  5. 生成されたビュー テンプレートは、先ほど定義した _layout.cshtml テンプレートに基づいています。 以下のコードに示すように、ViewBag.Title プロパティを Home に更新し、メインコンテンツを "This is the Home Page" に変更します。

    @{
    ViewBag.Title = "Home";
}

<h2>This is the Home Page</h2>

  6. ソリューション エクスプローラーで [MvcMusicStore プロジェクト] を選択し、F5 キーを押してアプリケーションを実行します。

タスク 4: 検証

前の演習のすべてのステップが正しく実行されたことを確認するには、次の手順に従います。

ブラウザーで開かれたアプリケーションでは、次の点に注意する必要があります。

  1. ビュー テンプレートが標準の名前付け規則に従っているため、"戻り値 View()" と呼ばれるコードであっても、HomeController の Index アクション メソッドは \Views\Home\Index.cshtml ビュー テンプレートを見つけて表示しました。

  2. ホーム ページには、 \Views\Home\Index.cshtml ビュー テンプレート内で定義されたウェルカム メッセージが表示されます。

  3. ホーム ページは _layout.cshtml テンプレートを使用しているため、ウェルカム メッセージは標準サイトの HTML レイアウトに含まれています。

    定義済みの LayoutPage とスタイルを使用したホーム インデックス ビュー

    定義済みの LayoutPage とスタイルを使用したホーム インデックス ビュー

演習 5: ビュー モデルを作成する

ここまでは、ビューにハードコーディングされた HTML を表示させましたが、動的 Web アプリケーションを作成するには、ビュー テンプレートがコントローラーから情報を受け取る必要があります。 その目的で使用する一般的な手法の 1 つは ViewModel パターンです。これにより、コントローラーは、適切な HTML 応答を生成するために必要なすべての情報をパッケージ化できます。

この演習では、ViewModel クラスを作成し、必要なプロパティ (ストア内のジャンルの数とそれらのジャンルの一覧) を追加する方法について説明します。 また、作成した ViewModel を使用するように StoreController を更新します。最後に、前述のプロパティをページに表示する新しいビュー テンプレートを作成します。

タスク 1 - ViewModel クラスの作成

このタスクでは、ストア ジャンル登録情報シナリオを実装する ViewModel クラスを作成します。

  1. まだ開いていない場合は、VS Express for Web 2012 を起動します。

  2. [ファイル] メニューの [プロジェクトを開く] を選択します。 [プロジェクトを開く] ダイアログで、Source\Ex05-CreatingAViewModel\Begin を参照し、[Begin.sln] を選択し、[開く] をクリックします。 または、前の演習を完了した後に取得したソリューションで続行するという方法もあります。

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

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

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

      Note

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

  3. ViewModel を保持する ViewModels フォルダーを作成します。 これを行うには、最上位の [MvcMusicStore プロジェクト] を右クリックし、[追加] を選択し、[新しいフォルダー] を選択します。

    新しいフォルダーの追加

    新しいフォルダーの追加

  4. フォルダーに「ViewModels」という名前を付けます。

    ソリューション エクスプローラーの ViewModels フォルダー

    ソリューション エクスプローラーの ViewModels フォルダー

  5. ViewModel クラスを作成します。 これを行うには、最近作成した [ViewModels] フォルダーを右クリックし、[追加] を選択し、[新しい項目] を選択します。 [コード] で [クラス] 項目を選択し、ファイルに "StoreIndexViewModel.cs" という名前を付け、[追加] をクリックします。

    新しいクラスの追加

    新しいクラスの追加

    StoreIndexViewModel クラスの作成

    StoreIndexViewModel クラスの作成

タスク 2 - ViewModel クラスへのプロパティの追加

予想される HTML 応答を生成するために、StoreController からビュー テンプレートに渡されるパラメーターは 2 つあります。ストア内のジャンルの数と、それらのジャンルの一覧です。

このタスクでは、StoreIndexViewModel クラスに NumberOfGenres (整数) と Genres (文字列のリスト) の 2 つのプロパティを追加します。

  1. NumberOfGenres プロパティと Genres プロパティを StoreIndexViewModel クラスに追加します。 これを行うには、クラス定義に次の 2 行を追加します。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex5 StoreIndexViewModel プロパティ)

    public class StoreIndexViewModel
{
    public int NumberOfGenres { get; set; }

    public List<string> Genres { get; set; }
}

Note

{ get; set; } 表記では、C# の自動実装プロパティ機能が使用されます。 これにより、バッキング整数を宣言しなくてもプロパティを利用することができます。

タスク 3 - StoreController を更新してStoreIndexViewModel を使用する

StoreIndexViewModel クラスは、応答を生成するために、StoreController の Index メソッドからビュー テンプレートに渡される必要のある情報をカプセル化します。

このタスクでは、StoreController を更新して StoreIndexViewModel を使用します。

  1. StoreController クラスを開きます。

    StoreController クラスを開く

    StoreController クラスを開く

  2. StoreController から StoreIndexViewModel クラスを使用するには、StoreController コードの先頭に次の名前空間を追加します。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex5 ViewModels を使用した StoreIndexViewModel)

    using MvcMusicStore.ViewModels;

  3. StoreIndexViewModel オブジェクトを作成して入力できるように StoreController の Index アクション メソッドを変更し、それをビュー テンプレートに渡して HTML 応答を生成します。

    Note

    ラボ "ASP.NET MVC モデルとデータ アクセス" では、データベースからストア ジャンルの一覧を取得するコードを記述します。 次のコードでは、StoreIndexViewModel を設定するダミー データ ジャンルのリストを作成します。

    StoreIndexViewModel オブジェクトを作成して設定すると、View メソッドに引数として渡されます。 これは、ビュー テンプレートがそのオブジェクトを使用して HTML 応答を生成することを示します。

  4. Index メソッドを次のコードに置き換えます。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex5 StoreController Index メソッド)

    public ActionResult Index()
{
    // Create a list of genres
    var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"};

    // Create our view model
    var viewModel = new StoreIndexViewModel { 
        NumberOfGenres = genres.Count(),
        Genres = genres
    };

    return this.View(viewModel);
}

Note

C# に慣れていない場合は、var を使うと viewModel の変数が遅延バインドされると考えるかもしれません。 これは正しくありません。C# コンパイラは、変数に割り当てられた内容から型推論を行い、viewModel が StoreIndexViewModel 型であると判断しています。 また、ローカル viewModel 変数を StoreIndexViewModel 型としてコンパイルすると、コンパイル時のチェックと Visual Studio コード エディターのサポートが得られます。

タスク 4 - StoreIndexViewModel を使用するビュー テンプレートの作成

このタスクでは、コントローラーから渡された StoreIndexViewModel オブジェクトを使用してジャンルの一覧を表示するビュー テンプレートを作成します。

  1. 新しいビュー テンプレートを作成する前に、[ビューの追加] ダイアログ で StoreIndexViewModel クラスが認識されるようにプロジェクトをビルドしましょう。 [ビルド] メニュー項目から [Build MvcMusicStore]\(MvcMusicStore をビルド\) を選択してプロジェクトをビルドします。

    プロジェクトのビルド

    プロジェクトのビルド

  2. 新しいビュー テンプレートを作成します。 Index メソッド内を右クリックして、[ビューの追加] を選択します。

    ビューの追加

    ビューの追加

  3. [ビューの追加] ダイアログ が StoreController から起動されたため、\Views\Store\Index.cshtml ファイルに既定でビュー テンプレートが追加されます。 [厳密に型指定されたビューを作成] チェックボックスをオンにし、モデル クラスとして [StoreIndexViewModel] を選択します。 また、選択したビュー エンジンが "Razor" であることを確認します。 追加をクリックします。

    [ビューの追加] ダイアログ ボックスのスクリーンショット。使用可能なオプションと、厳密に型指定されたビュー モデル クラスを作成するための選択が示されています。

    [ビューの追加] ダイアログ

    \Views\Store\Index.cshtml ビュー テンプレート ファイルが作成され、開かれます。 最後のステップで [ビューの追加] ダイアログに提供された情報に基づいて、ビュー テンプレートでは、HTML 応答の生成に使用するデータとして StoreIndexViewModel インスタンスが想定されます。 テンプレートが C# で ViewPage<musicstore.viewmodels.storeindexviewmodel> を継承していることがわかります。

タスク 5 - ビュー テンプレートの更新

このタスクでは、最後のタスクで作成したビュー テンプレートを更新して、ページ内のジャンルとその名前の数を取得します。

Note

@ 構文 (多くの場合、"コード ナゲット" と呼ばれます) を使用して、ビュー テンプレート内でコードを実行します。

  1. Index.cshtml ファイルの Store フォルダー内で、そのコードを次のように置き換えます。
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>
  1. StoreIndexViewModel のジャンル リストをループ処理し、foreachループを使用して HTML <ul> リストを作成します。 (C#)
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
@foreach (string genreName in Model.Genres)
{
    <li>
        @genreName
    </li>
}
</ul>
  1. F5 キーを押してアプリケーションを実行し、/Store を参照します。 StoreIndexViewModel オブジェクトで、StoreController からビュー テンプレートに渡されたジャンルの一覧が表示されます。

ジャンルの一覧を表示するビュー

ジャンルの一覧を表示するビュー

  1. ブラウザーを閉じます。

演習 6: ビューでパラメーターを使用する

演習 3 では、コントローラーにパラメーターを渡す方法を説明しました。 この演習では、ビュー テンプレートでこれらのパラメーターを使用する方法について説明します。 そのために、まず、データとドメイン ロジックの管理に役立つモデル クラスについて説明します。 さらに、URL パスのエンコードなどを気にせずに、ASP.NET MVC アプリケーション内のページへのリンクを作成する方法について説明します。

タスク 1 - モデル クラスの追加

コントローラーからビューに情報を渡すためだけに作成される ViewModels とは異なり、モデル クラスはデータとドメイン ロジックを格納および管理するためにビルドされています。 このタスクでは、Genre と Album という概念を表す 2 つのモデル クラスを追加します。

  1. まだ開いていない場合は、VS Express for Web 2012 を起動します。

  2. [ファイル] メニューの [プロジェクトを開く] を選択します。 [プロジェクトを開く] ダイアログで、[Source\Ex06-UsingParametersInView\Begin] を参照し、[Begin.sln] を選択し、[開く] をクリックします。 または、前の演習を完了した後に取得したソリューションで続行するという方法もあります。

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

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

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

      Note

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

  3. Genre モデル クラスを追加します。 これを行うには、ソリューション エクスプローラーで [Models] フォルダーを右クリックし、[追加] を選択してから、[新しい項目] を選択します。 [コード] で [クラス] 項目を選択し、ファイルに "Genre.cs" という名前を付け、[追加] をクリックします。

    クラスの追加

    新しい項目の追加

    Genre モデル クラスの追加

    Genre モデル クラスの追加

  4. Name プロパティを Genre クラスに追加します。 これを行うには、次のコードを使用します。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex6 Genre)

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Genre
    {
        public string Name { get; set; }
    }
}

  5. 前と同じ手順に従って、Album クラスを追加します。 これを行うには、ソリューション エクスプローラーで [Models] フォルダーを右クリックし、[追加] を選択してから、[新しい項目] を選択します。 [コード] で [クラス] 項目を選択し、ファイルに "Album.cs" という名前を付け、[追加] をクリックします。

  6. Album クラスに、Genre と Titleの 2 つのプロパティを追加します。 これを行うには、次のコードを使用します。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex6 Album)

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Album
    {
        public string Title { get; set; }

        public Genre Genre { get; set; }
    }
}

タスク 2 - StoreBrowseViewModel の追加

このタスクでは、StoreBrowseViewModel を使用して、選択したジャンルに一致するアルバムを表示します。 このタスクでは、このクラスを作成し、ジャンル とその アルバムのリストを処理する 2 つのプロパティを追加します。

  1. StoreBrowseViewModel クラスを追加します。 これを行うには、ソリューション エクスプローラーで [ViewModels] フォルダーを右クリックし、[追加] を選択してから、[新しい項目] を選択します。 [コード] で [クラス] 項目を選択し、ファイルに "StoreBrowseViewModel.cs" という名前を付け、[追加] をクリックします。

  2. StoreBrowseViewModel クラスの Models への参照を追加します。 これを行うには、名前空間を使用して次を追加します。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex6 UsingModel)

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcMusicStore.Models;

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
    }
}

  3. StoreBrowseViewModel クラスに、 Genre と Albumsの 2 つのプロパティを追加します。 これを行うには、次のコードを使用します。

    (コード スニペット - ASP.NET MVC 4 Fundamentals - Ex6 ModelProperties)

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcMusicStore.Models;

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
        public Genre Genre { get; set; }

        public List<Album> Albums { get; set; }
    }
}

Note

List<Album> とは何ですか?: この定義は List<T> 型を使用しています。ここで、T は、このListの要素が属する型 (この場合は Album またはその子孫) に制約されます。

クラスまたはメソッドがクライアント コードによって宣言およびインスタンス化されるまで、1 つ以上の型の指定を延期するクラスとメソッドを設計するこの機能は、ジェネリック と呼ばれる C# 言語の機能です。

List<T> は ArrayList 型に相当するジェネリックであり、System.Collections.Generic 名前空間で使用できます。 ジェネリックを使用する利点の 1 つは、型が指定されているため、ArrayList の場合のように要素を Album にキャストするといった型チェック操作を処理する必要がない点です。

タスク 3 - StoreController での新しい ViewModel の使用

このタスクでは、StoreController の Browse および Details アクション メソッドを変更して、新しい StoreBrowseViewModel を使用します。

  1. StoreController クラスの Models フォルダーへの参照を追加します。 これを行うには、ソリューション エクスプローラーの Controllers フォルダーを展開し、StoreController クラスを開きます。 次のコードを追加します。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex6 UsingModelInController)

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.ViewModels;
using MvcMusicStore.Models;

  2. Browse アクション メソッドを置き換えて、StoreViewBrowseController クラスを使用します。 ダミー データを含む Genre オブジェクトと 2 つの新しい Albums オブジェクトを作成します (次のハンズオン ラボでは、データベースから実際のデータを使用します)。 これを行うには、Browse メソッドを次のコードに置き換えます。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex6 BrowseMethod)

    //
// GET: /Store/Browse?genre=Disco

public ActionResult Browse(string genre)
{
    var genreModel = new Genre()
    {
        Name = genre
    };

    var albums = new List<Album>()
    {
        new Album() { Title = genre + " Album 1" },
        new Album() { Title = genre + " Album 2" }
    };

    var viewModel = new StoreBrowseViewModel()
    {
        Genre = genreModel,
        Albums = albums
    };

    return this.View(viewModel);
}

  3. Details アクション メソッドを置き換えて、StoreViewBrowseController クラスを使用します。 ビュー に返される新しい Albumオブジェクトを作成します。 これを行うには、Details メソッドを次のコードに置き換えます。

    (コード スニペット - ASP.NET MVC 4 の基礎 - Ex6 DetailsMethod)

    //
// GET: /Store/Details/5

public ActionResult Details(int id)
{
  var album = new Album { Title = "Sample Album" };

  return this.View(album);
}

タスク 4 - 参照ビュー テンプレートの追加

このタスクでは、特定のジャンルで見つかったアルバムを表示する参照ビューを追加します。

  1. 新しいビュー テンプレートを作成する前に、 [ビューの追加] ダイアログで使用する ViewModel クラスが認識されるようにプロジェクトをビルドする必要があります。 [ビルド] メニュー項目から [Build MvcMusicStore]\(MvcMusicStore をビルド\) を選択してプロジェクトをビルドします。

  2. 参照ビューを追加します。 これを行うには、StoreController の Browse アクション メソッドを右クリックし、[ビューの追加] をクリックします。

  3. [ビューの追加] ダイアログ ボックスで、[ビュー名] が "参照" になっていることを確認します。 [厳密に型指定されたビューを作成] チェックボックスをオンにし、[モデル クラス]ドロップダウンから [StoreBrowseViewModel] を選択します。 他のフィールドは既定値のままにしておきます。 [追加] をクリックします。

    参照ビューの追加

    参照ビューの追加

  4. Browse.cshtml を変更してジャンルの情報を表示し、ビュー テンプレートに渡される StoreBrowseViewModel オブジェクトにアクセスします。 これを行うには、コンテンツを次のように置き換えます:(C#)

    @model MvcMusicStore.ViewModels.StoreBrowseViewModel

@{
    ViewBag.Title = "Browse Albums";
}

<h2>Browsing Genre: @Model.Genre.Name</h2>

<ul>
    @foreach (var album in Model.Albums)
    {
        <li>@album.Title</li>
    }
</ul>

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

このタスクでは、 Browse メソッドによる Browse メソッド アクションからのアルバムを取得をテストします。

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

  2. プロジェクトはホーム ページから開始します。 URLを /Store/Browse?Genre=Disco に変更して、アクションが2つのアルバムを返すことを確認します。

    ストア ディスコ アルバムの参照

    ストア ディスコ アルバムの参照

タスク 6 - 特定のアルバムに関する情報の表示

このタスクでは、特定のアルバムに関する情報を表示する Store/Details ビューを実装します。 このハンズオン ラボでは、アルバムに関して表示されるすべてのものが、ビュー テンプレートに既に含まれています。 そのため、StoreDetailsViewModel クラスを作成する代わりに、現在の StoreBrowseViewModel テンプレートを使用してアルバムを渡します。

  1. 必要に応じてブラウザーを閉じ、Visual Studio ウィンドウに戻ります。 StoreController の Details アクション メソッドのために新しい詳細ビューを追加します。 これを行うには、StoreController クラスの [Details メソッド] を右クリックし、[ビューの追加] をクリックします。

  2. [ビューの追加] ダイアログ ボックスで、[ビュー名] が "詳細" になっていることを確認します。 [厳密に型指定されたビューを作成] チェックボックスをオンにし、[モデル クラス]ドロップダウンから [Album] を選択します。 他のフィールドは既定値のままにしておきます。 [追加] をクリックします。 これにより、\Views\Store\Details.cshtml ファイルが作成されて開きます。

    詳細ビューの追加

    詳細ビューの追加

  3. Details.cshtml ファイルを変更してアルバムの情報を表示し、ビュー テンプレートに渡される Album オブジェクトにアクセスします。 これを行うには、コンテンツを次のように置き換えます:(C#)

    @model MvcMusicStore.Models.Album

@{
    ViewBag.Title = "Details";
}

<h2>Album: @Model.Title</h2>

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

このタスクでは、詳細ビューが Details アクション メソッドからアルバムの情報を取得することをテストします。

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

  2. プロジェクトはホーム ページから開始します。 URL を /Store/Details/5 に変更して、アルバムの情報を確認します。

    アルバムの詳細の閲覧

    アルバムの詳細を参照

タスク 8 - ページ間のリンクの追加

このタスクでは、ストア ビューにリンクを追加して、すべてのジャンル名に適切な /Store/Browse URL へのリンクを設定します。 こうすると、たとえば、"Disco" などのジャンルをクリックすると、 /Store/Browse?genre=Disco という URL に移動します。

  1. 必要に応じてブラウザーを閉じ、Visual Studio ウィンドウに戻ります。 [インデックス] ページを更新して、[参照] ページへのリンクを追加します。 これを行うには、ソリューション エクスプローラーで [ビュー] フォルダーを展開し、[ストア] フォルダーを展開し、[Index.cshtml] ページをダブルクリックします。

  2. 選択したジャンルを示すリンクを参照ビューに追加します。 これを行うには、<li> タグ内で強調表示されている次のコードを置き換えます: (C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p> Select from @Model.NumberOfGenres genres</p>

<ul>
    @foreach (string genreName in Model.Genres) {
        <li>
            @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
        </li>
        }
</ul>

    Note

    もう 1 つの方法は、次のようなコードを使用して、ページに直接リンクすることです。

    <a href="/Store/Browse?genre=@genreName">@genreName</a&gt;

    この方法は機能しますが、ハードコーディングされた文字列に左右されます。 後でコントローラーの名前を変更する場合は、この命令を手動で変更する必要があります。 代わりに、HTML ヘルパー メソッドを使用することをお勧めします。 ASP.NET MVC には、このようなタスクで使用できる HTML ヘルパー メソッドが含まれています。 Html.ActionLink() ヘルパー メソッドを使用すると、HTML <a> リンクを簡単に作成できるため、URL パスが適切に URL エンコードされていることを確認できます。

    Html.ActionLink には、いくつかのオーバーロードがあります。 この演習では、次の 3 つのパラメーターを受け取るものを使用します。

    1. ジャンル名を表示するリンク テキスト
    2. コントローラー アクション名 (Browse)
    3. 名前 (Genre) と値 (Genre name) の両方を指定するルート パラメーター値

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

このタスクでは、各ジャンルが適切な /Store/Browse URL へのリンクと共に表示されることをテストします。

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

  2. プロジェクトはホーム ページから開始します。 URL を /Store に変更して、各ジャンルが適切な /Store/Browse URL にリンクしていることを確認します。

    参照 ページへのリンクを含むジャンルの参照

    参照 ページへのリンクを含むジャンルの参照

タスク 10 - 動的 ViewModel コレクションを使用して値を渡す

このタスクでは、モデルに変更を加えずにコントローラーとビューの間で値を渡すシンプルで強力な方法について説明します。 ASP.NET MVC 4 には、任意の動的な値に割り当てることができ、コントローラーとビュー内でもアクセスできるコレクション "ViewModel" が用意されています。

ViewBag 動的コレクションを使用して、コントローラーからビューに "スター付きジャンル" のリストを渡します。 ストア インデックス ビューは、ViewModel にアクセスし、情報を表示します。

  1. 必要に応じてブラウザーを閉じ、Visual Studio ウィンドウに戻ります。 StoreController.cs を開き、Index メソッドを変更して、ViewModel コレクションにスター付きジャンルのリストを作成します。

    public ActionResult Index()
{
    // Create list of genres
    var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" };

    // Create your view model
    var viewModel = new StoreIndexViewModel
    {
        NumberOfGenres = genres.Count,
        Genres = genres
    };

    ViewBag.Starred = new List<string> { "Rock", "Jazz" };

    return this.View(viewModel);
}

    Note

    ViewBag["Stared"] という構文を使用してプロパティにアクセスすることもできます。

  2. スター アイコン "starred.png" は、このラボの Source\Assets\Images フォルダーに含まれています。 アプリケーションに追加するには、次に示すように、[Windows エクスプローラー] ウィンドウから Visual Web Developer Express のソリューション エクスプローラー にコンテンツをドラッグします。

    ソリューションへのスター イメージの追加

    ソリューションへのスター イメージの追加

  3. ビュー "Store/Index.cshtml" を開き、内容を変更します。 ViewBag コレクションの "スター付き" プロパティを読み取り、現在のジャンル名がリスト内にあるかどうかを確認します。 その場合は、ジャンル リンクの右にスター アイコンが表示されます。 (C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
     ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
     @foreach (string genreName in Model.Genres)
     {
          <li>
                @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)

                @if (ViewBag.Starred.Contains(genreName))
                { 
                     <img src="../../Content/Images/starred.png" alt="Starred element" />
                }
          </li>
     }
</ul>
<br />
<h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>

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

このタスクでは、スター付きジャンルにスター アイコンが表示されることをテストします。

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

  2. プロジェクトはホーム ページから開始します。 URL を /Store に変更して、各おすすめジャンルに関連ラベルがあることを確認します。

    スター付き要素を持つジャンルの参照

    スター付き要素を持つジャンルの参照

演習 7: MVC 4 の新しいテンプレート ASP.NET を短時間でチェックする

この演習では、新しいテンプレートの最も関連性の高い機能を見て、ASP.NET MVC 4 プロジェクト テンプレートの機能強化について確認します。

タスク 1: ASP.NET MVC 4 インターネット アプリケーション テンプレートの探索

  1. まだ開いていない場合は、VS Express for Web 2012 を起動します。

  2. [ファイル | 新規 | プロジェクト] メニュー コマンドを選択します。 [新しいプロジェクト] ダイアログで、左側のウィンドウ ツリーの [Visual C#|Web] テンプレートを選択して、[ASP.NET MVC 4 Web アプリケーション] を選択します。 プロジェクトに "MusicStore" という名前を付け、ソリューション名を "Begin" に更新し、場所を選択して (または既定のままにして)、[OK] をクリックします。

    新しい ASP.NET MVC 4 プロジェクトの作成

    新しい ASP.NET MVC 4 プロジェクトの作成

  3. [新しい ASP.NET MVC 4 プロジェクト] ダイアログで、インターネット アプリケーション プロジェクト テンプレートを選択し、[OK] をクリックします。 ビュー エンジンとして Razor または ASPX を選択できることに注意してください。

    新しい ASP.NET MVC 4 インターネット アプリケーションを作成する

    新しい ASP.NET MVC 4 インターネット アプリケーションを作成する

    Note

    Razor 構文は、ASP.NET MVC 3 で導入されました。 その目的は、ファイルに必要な文字数とキーストロークを最小限に抑え、高速で流動的なコーディング ワークフローを可能にすることです。 Razor は、既存の C#/VB (またはその他の) 言語スキルを活用し、優れた HTML 構築ワークフローを可能にするテンプレート マークアップ構文を提供します。

  4. F5 キーを押 してソリューションを実行し、更新されたテンプレートを確認します。 次の機能をご覧ください:

    1. モダンスタイルのテンプレート

      テンプレートが更新され、モダンスタイルが提供されます。

      ASP.NET MVC 4 のテンプレートをリスタイルする

      ASP.NET MVC 4 のテンプレートをリスタイルする

    2. アダプティブ レンダリング

      ブラウザー ウィンドウのサイズ変更を確認し、ページ レイアウトが新しいウィンドウ サイズにどのように動的に適応するかを確認します。 これらのテンプレートでは、アダプティブ レンダリング手法を使用して、カスタマイズなしでデスクトップ プラットフォームとモバイル プラットフォームの両方で適切にレンダリングします。

      さまざまなブラウザー サイズの ASP.NET MVC 4 プロジェクト テンプレート

      さまざまなブラウザー サイズの ASP.NET MVC 4 プロジェクト テンプレート

  5. ブラウザーを閉じてデバッガーを停止し、Visual Studio に戻ります。

  6. これで、ソリューションを調べ、プロジェクト テンプレートの ASP.NET MVC 4 によって導入された新機能の一部を確認できます。

    MVC4-internet-application-project-template の ASP.NET

    ASP.NET MVC 4 インターネット アプリケーション プロジェクト テンプレート

    1. HTML5 マークアップ

      テンプレート ビューを参照して新しいテーマのマークアップを確認します。たとえば、[Home] フォルダー内で [About.cshtml] ビューを開きます。

      Razor と HTML5 マークアップを使用した新しいテンプレート

      Razor と HTML5 マークアップを使用した新しいテンプレート

    2. JavaScript ライブラリが含まれます

      1. jQuery: jQuery を使用すると、HTML ドキュメントの走査、イベント処理、アニメーション化、Ajax の操作が簡略化されます。

      2. jQuery UI: このライブラリは、jQuery JavaScript ライブラリ上に構築された、低レベルの操作とアニメーション、高度な効果、テーマ設定可能なウィジェットの抽象化を提供します。

        Note

        jQuery と jQuery UI については、[http://docs.jquery.com/](http://docs.jquery.com/) で確認できます。

      3. KnockoutJS: ASP.NET MVC 4 の既定のテンプレートには、JavaScript と HTML を使用して高度で応答性の高い Web アプリケーションを作成できる JavaScript MVVM フレームワークである KnockoutJS が含まれるようになりました。 ASP.NET MVC 3 と同様に、ASP.NET MVC 4 には jQuery と jQuery UI ライブラリも 含まれています。

        Note

        KnockOutJS ライブラリの詳細については、次のリンクを参照してください: http://learn.knockoutjs.com/

      4. Modernizr: このライブラリは、HTML5 と CSS3 のテクノロジを使用する場合、古いブラウザーとの互換性を保つために自動的に実行されます。

        Note

        Modernizr ライブラリの詳細については、次のリンクを参照してください: http://www.modernizr.com/

    3. ソリューションに含まれる SimpleMembership

      SimpleMembership は、以前の ASP.NET Role および メンバーシップ プロバイダー システムの代わりとして設計されました。 開発者がより簡単に、より柔軟な方法で Web ページを保護できるようにする、多くの新機能があります。

      インターネット テンプレートには、SimpleMembership を統合するためのいくつかの設定が既に用意されています。たとえば、AccountController は OAuthWebSecurity (OAuth アカウントの登録、ログイン、管理など) と Web セキュリティを使用する準備が整っています。

      ソリューションに含まれる SimpleMembership

      ソリューションに含まれる SimpleMembership

      Note

      OAuthWebSecurity の詳細については、MSDN を参照してください。

Note

さらに、このアプリケーションは Windows Azure Web サイトにデプロイできます。手順については、「付録 B: Web 配置を使用した ASP.NET MVC 4 アプリケーションの発行」を参照してください。

まとめ

このハンズオン ラボを完了することで、次の ASP.NET MVC の基礎を学習しました。

  • MVC アプリケーションの主要な要素とその相互作用
  • ASP.NET MVC アプリケーションを作成する方法
  • URL とクエリ文字列を介して渡されたパラメーターを処理するようにコントローラーを追加および構成する方法
  • レイアウト マスター ページを追加して、一般的な HTML コンテンツのテンプレート、外観とフィーリングを向上させるスタイルシート、HTML コンテンツを表示するビュー テンプレートを設定する方法
  • ViewModel パターンを使用してビュー テンプレートにプロパティを渡して動的な情報を表示する方法
  • ビュー テンプレートでコントローラーに渡されるパラメーターを使用する方法
  • ASP.NET MVC アプリケーション内のページへのリンクを追加する方法
  • ビューに動的プロパティを追加して使用する方法
  • ASP.NET MVC 4 プロジェクト テンプレートの機能強化

付録 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. [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?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: Web 配置を使用した ASP.NET MVC 4 アプリケーションの発行

この付録では、Windows Azure 管理ポータルから新しい Web サイトを作成し、ラボに従って取得したアプリケーションを発行する方法について説明します。これは、Windows Azure によって提供される Web 配置発行機能を利用することです。

タスク 1 - Windows Azure Portal から新しい Web サイトを作成する

  1. Windows Azure 管理ポータルに移動し、サブスクリプションに関連付けられている Microsoft 資格情報を使用してサインインします。

    Note

    Windows Azure では、10 ASP.NET Web サイトを無料でホストし、トラフィックの増加に合わせてスケーリングできます。 こちらからサインアップできます。

    Windows Azure portal にログオンする

    Windows Azure 管理ポータルにログオン

  2. コマンド バーの [新規] をクリックします。

    新しい Web サイトの作成

    新しい Web サイトの作成

  3. [コンピューティング] | [Web サイト] をクリックします。 続いて、[簡易作成] オプションを選択します。 新しい Web サイト用の使用可能な URL を指定し、[Web サイトの作成] をクリックします。

    Note

    Windows Azure Web サイトは、制御および管理できるクラウドで実行されている Web アプリケーションのホストです。 [簡易作成] オプションを使用すると、完成した Web アプリケーションをポータルの外部から Windows Azure Web サイトにデプロイできます。 データベースをセットアップするための手順は含まれません。

    簡易作成を使用した新しい Web サイトの作成

    簡易作成を使用した新しい Web サイトの作成

  4. 新しい Web サイトが作成されるまで待機します。

  5. Web サイトが作成されたら、URL 列の下にあるリンクをクリックします。 新しい Web サイトが動作していることを確認します。

    新しい Web サイトの参照

    新しい Web サイトの参照

    実行中の Web サイト

    実行中の Web サイト

  6. ポータルに戻って [名前] 列の下にある Web サイトの名前をクリックして、管理ページを表示します。

    Web サイト管理ページを開く

    Web サイト管理ページを開く

  7. [ダッシュボード] ページの [概要] セクションで、[発行プロファイルのダウンロード] リンクをクリックします。

    Note

    発行プロファイル には、有効になっている各発行方法について、Windows Azure Web サイトに Web アプリケーションを発行するために必要なすべての情報が含まれています。 発行プロファイルには、発行メソッドが有効化される各エンドポイントに接続して認証するために必要な URL、ユーザーの資格情報、およびデータベース文字列が含まれています。 Microsoft WebMatrix 2、Microsoft Visual Studio Express for Web 、および Microsoft Visual Studio 2012 では、Windows Azure Web サイトに Web アプリケーションを発行するためのこれらのプログラムの構成を自動化するための発行プロファイルの読み取りがサポートされています。

    Web サイト発行プロファイルのダウンロード

    Web サイト発行プロファイルのダウンロード

  8. 発行プロファイル ファイルを既知の場所にダウンロードします。 この演習では、このファイルを使用して、Visual Studio から Windows Azure Web サイトに Web アプリケーションを発行する方法について説明します。

    発行プロファイル ファイルの保存

    発行プロファイル ファイルの保存

タスク 2 - データベース サーバーの構成

アプリケーションで SQL Server データベースを使用する場合は、SQL Database サーバーを作成する必要があります。 SQL Server を使用しないシンプルなアプリケーションをデプロイする場合は、このタスクをスキップできます。

  1. アプリケーション データベースを格納するための SQL Database サーバーが必要です。 [SQL データベース] | [サーバー] | [サーバーのダッシュボード] で Windows Azure 管理ポータルのサブスクリプションから SQL データベース サーバーを表示することができます。 サーバーを作成していない場合は、コマンド バーの [追加] ボタンを使用して作成できます。 次のタスクで使用するため、サーバー名と URL、管理者ログイン名、パスワードを書き留めます。 データベースは後の段階で作成されるため、まだ作成しないでください。

    SQL Database サーバー ダッシュボード

    SQL Database サーバー ダッシュボード

  2. 次のタスクでは、Visual Studio からのデータベース接続をテストします。そのため、ローカル IP アドレスをサーバーの許可された IP アドレスの一覧に含める必要があります。 これを行うには、[構成] をクリックし、[現在のクライアント IP アドレス] から IP アドレスを選択し、[開始 IP アドレス] テキスト ボックスと [終了 IP アドレス] テキスト ボックスに貼り付けて、add-client-ip-address-ok-button ボタンをクリックします。

    クライアント IP アドレスの追加

    クライアント IP アドレスの追加

  3. クライアント IP アドレスが許可された IP アドレスの一覧に追加されたら、[保存] をクリックして変更を確認します。

    変更を確認

    変更を確認

タスク 3 - Web 配置を使用した ASP.NET MVC 4 アプリケーションの発行

  1. ASP.NET MVC 4 ソリューションに戻ります。 ソリューション エクスプローラーで、プロジェクトを右クリックして [発行] を選択します。

    アプリケーションの発行

    Web サイトの発行

  2. 最初のタスクで保存した発行プロファイルをインポートします。

    発行プロファイルのインポート

    公開プロファイルのインポート

  3. [接続の検証] をクリックします。 検証が完了したら、[次へ] をクリックします。

    Note

    [接続の検証] ボタンの横に緑色のチェックマークが表示されたら、検証は完了しています。

    接続の検証

    接続の検証

  4. [設定] ページの [データベース] セクションで、データベース接続のテキスト ボックス (DefaultConnection) の横にあるボタンをクリックします。

    Web 配置の構成

    Web 配置の構成

  5. 次のようにデータベース接続を構成します:

    • [サーバー名] に、tcp: プレフィックスを使用して SQL Database サーバーの URL を入力します。

    • [ユーザー名] に、サーバー管理者のログイン名を入力します。

    • [パスワード] に、サーバー管理者のログイン パスワードを入力します。

    • 新しいデータベース名を入力します (例: MVC4SampleDB)。

      同期先接続文字列の構成

      同期先接続文字列の構成

  6. 次に、 [OK] をクリックします データベースの作成を求められたら、[はい] をクリックします。

    データベースの作成

    データベースの作成

  7. Windows Azure の SQL Database への接続に使用する接続文字列は、[既定の接続] ボックス内に表示されます。 続けて、 [次へ] をクリックします。

    SQL Database を指す接続文字列

    SQL Database を指す接続文字列

  8. [プレビュー] ページで [発行] をクリックします。

    Web アプリケーションの発行

    Web アプリケーションの発行

  9. 発行プロセスが完了すると、既定のブラウザーで発行された Web サイトが開きます。

    Windows Azure に発行されたアプリケーション

    Windows Azure に発行されたアプリケーション

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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