ビューの追加 (2012)
作成者 : Rick Anderson
Note
このチュートリアルの更新版は、MVC 5 とVisual Studio 2013 ASP.NET 使用するこちらにあります。 より安全で、従う方がはるかに簡単で、より多くの機能を示します。
このセクションでは、 クラスを HelloWorldController 変更して、ビュー テンプレート ファイルを使用して、クライアントに対する HTML 応答を生成するプロセスをクリーンにカプセル化します。
ASP.NET MVC 3 で導入された Razor ビュー エンジン を使用して、ビュー テンプレート ファイルを作成します。 Razor ベースのビュー テンプレートには .cshtml ファイル拡張子があり、C# を使用して HTML 出力を作成するエレガントな方法が提供されます。 Razor は、ビュー テンプレートを作成するときに必要な文字数とキーストロークを最小限に抑え、高速で流動的なコーディング ワークフローを可能にします。
現在、Index メソッドは、コントローラー クラスでハード コーディングされるメッセージを含む文字列を返します。 次の Index コードに示すように、 メソッドを View 変更して オブジェクトを返します。
public ActionResult Index()
{
return View();
}
上記のメソッドは Index 、ビュー テンプレートを使用して、ブラウザーに対する HTML 応答を生成します。 上記のメソッドなどのIndexコントローラー メソッド (アクション メソッドとも呼ばれます) は、通常、string のようなプリミティブ型ではなく、ActionResult (または ActionResult から派生したクラス) を返します。
プロジェクトで、 メソッドで使用できるビュー テンプレートを Index 追加します。 これを行うには、 メソッド内を右クリックし、 [ビューのIndex追加] をクリックします。
![右クリック メニューで [ビューの追加] が選択されていることを示すスクリーンショット。](adding-a-view/_static/image1.png)
[ ビューの追加] ダイアログ ボックスが表示されます。 既定値をそのままにして、[ 追加 ] ボタンをクリックします。
![[ビューの追加] ダイアログを示すスクリーンショット。[ビュー名] フィールドにインデックスがあります。](adding-a-view/_static/image2.png)
MvcMovie\Views\HelloWorld フォルダーと MvcMovie\Views\HelloWorld\Index.cshtml ファイルが作成されます。 ソリューション エクスプローラーで確認できます。
作成された Index.cshtml ファイルを 次に示します。
タグの下に次の HTML を <h2> 追加します。
<p>Hello from our View Template!</p>
完全な MvcMovie\Views\HelloWorld\Index.cshtml ファイルを 次に示します。
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
Visual Studio 2012 を使用している場合は、ソリューション エクスプローラーで Index.cshtml ファイルを右クリックし、[Page Inspectorで表示] を選択します。
Page Inspector チュートリアルには、この新しいツールに関する詳細情報が含まれています。
または、アプリケーションを実行し、コントローラー (http://localhost:xxxx/HelloWorld) をHelloWorld参照します。 コントローラーの メソッドはあまり Index 機能しませんでした。単に ステートメント を実行しました。このステートメント return View()では、メソッドがビュー テンプレート ファイルを使用してブラウザーへの応答をレンダリングする必要があることを指定しました。 使用するビュー テンプレート ファイルの名前を明示的に指定していないため、MVC ASP.NET 既定では、\Views\HelloWorld フォルダー内の Index.cshtml ビュー ファイルを使用するように設定されています。 次の図は、ビューでハードコーディングされた文字列 "Hello from our View Template!" を示しています。
![[My A S P dot NET Index]\(MY A S P ドット NET インデックス\) ページを示すスクリーンショット。](adding-a-view/_static/image6.png)
かなり良い見えます。 ただし、ブラウザーのタイトル バーに "Index My ASP.NET A" と表示され、ページ上部の大きなリンクに "ここにロゴがあります" と表示されていることに注意してください。「ここにあなたのロゴ」リンクの下に登録とログインリンクがあり、その下にはホーム、バージョン情報、連絡先の各ページへのリンクがあります。 これらの一部を変更してみましょう。
ビューとレイアウト ページの変更
最初に、ページの上部にある "ここにロゴ" というタイトルを変更します。 そのテキストはすべてのページに共通です。 実際には、アプリケーション内のすべてのページに表示される場合でも、プロジェクト内の 1 つの場所にのみ実装されます。 ソリューション エクスプローラーの /Views/Shared フォルダーに移動し、_Layout.cshtml ファイルを開きます。 このファイルは レイアウト ページ と呼ばれ、他のすべてのページで使用される共有 "シェル" です。
[レイアウト] テンプレートでは、1 か所でサイトの HTML コンテナー レイアウトを指定し、それをサイト内の複数のページに適用できます。 @RenderBody() という行を見つけます。 RenderBody は、作成したすべてのビュー固有のページがレイアウト ページに "ラップ" されて表示されるプレースホルダーです。 たとえば、[バージョン情報] リンクを選択すると、 Views\Home\About.cshtml ビューが メソッド内に RenderBody レンダリングされます。
レイアウト テンプレートのサイト タイトルの見出しを "ここでロゴ" から "MVC Movie" に変更します。
<div class="float-left">
<p class="site-title">@Html.ActionLink("MVC Movie", "Index", "Home")</p>
</div>
title 要素の内容を次のマークアップに置き換えます。
<title>@ViewBag.Title - Movie App</title>
アプリケーションを実行し、"MVC Movie" と表示されます。 [ バージョン情報 ] リンクをクリックすると、そのページに "MVC ムービー" と表示される方法も表示されます。 レイアウト テンプレートで変更を 1 回行うことができ、サイト上のすべてのページに新しいタイトルが反映されました。
![M V C ムービーの [バージョン情報] ページを示すスクリーンショット。](adding-a-view/_static/image8.png)
次に、インデックス ビューのタイトルを変更してみましょう。
MvcMovie\Views\HelloWorld\Index.cshtml を開きます。 変更する場所は 2 つあります。最初に、ブラウザーのタイトルに表示されるテキスト、次にセカンダリ ヘッダー ( <h2> 要素) に表示されるテキストです。 これを少し変えれば、コードのどの部分でアプリのどの部分が変更されるかを確認することができます。
@{
ViewBag.Title = "Movie List";
}
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
表示する HTML タイトルを示すために、上記のコードは オブジェクトの ViewBag プロパティ (Index.cshtml ビュー テンプレート内) を設定Titleします。 レイアウト テンプレートのソース コードを振り返ると、テンプレートでは、前に変更した HTML のセクションの<head>一部として、 要素で<title>この値が使用されていることがわかります。 この ViewBag 方法を使用すると、ビュー テンプレートとレイアウト ファイルの間で他のパラメーターを簡単に渡すことができます。
アプリケーションを実行し、 を参照します http://localhost:xx/HelloWorld。 ブラウザーのタイトル、プライマリ見出し、およびセカンダリ見出しが変更されていることに注意してください (ブラウザーに変更が表示されない場合は、キャッシュされたコンテンツを表示している可能性があります。ブラウザーで Ctrl + F5 キーを押して、サーバーからの応答を強制的に読み込みます)。ブラウザーのタイトルは、Index.cshtml ビュー テンプレートで設定した を使用して作成ViewBag.Titleされ、レイアウト ファイルに追加された "- Movie App" が追加されます。
また、 Index.cshtml ビュー テンプレート内のコンテンツが _Layout.cshtml ビュー テンプレートとマージされ、単一の HTML 応答がブラウザーに送信されたことにも注目してください。 レイアウト テンプレートを使用すれば、アプリケーションのすべてのページに適用される変更をとても簡単に行うことができます。
ただし、少しの "data" (この場合は "View Template!" メッセージの Hello) はハードコーディングされています。 MVC アプリケーションには "V" (ビュー) があり、"C" (コントローラー) もありますが、"M" (モデル) はまだありません。 次に、データベースを作成し、そこからモデル データを取得する方法について説明します。
コントローラーからビューへのデータの受け渡し
ただし、データベースに移動してモデルについて説明する前に、まずコントローラーからビューに情報を渡す方法について説明します。 コントローラー クラスは、受信 URL 要求に応答して呼び出されます。 コントローラー クラスは、受信したブラウザー要求を処理し、データベースからデータを取得し、最終的にブラウザーに返送する応答の種類を決定するコードを記述する場所です。 その後、ビュー テンプレートをコントローラーから使用して、ブラウザーに対する HTML 応答を生成して書式設定できます。
コントローラーは、ビュー テンプレートがブラウザーに応答をレンダリングするために必要なデータまたはオブジェクトを提供する役割を担います。 ベスト プラクティス: ビュー テンプレートでは、ビジネス ロジックを実行したり、データベースを直接操作したりしないでください。 代わりに、ビュー テンプレートは、コントローラーによって提供されるデータでのみ機能する必要があります。 この "懸念事項の分離" を維持すると、コードのクリーン、テスト可能、保守性が維持しやすくなります。
現在、 クラスの WelcomeHelloWorldController action メソッドは、 パラメーターと パラメーターをnumTimes受け取りname、値をブラウザーに直接出力します。 コントローラーでこの応答を文字列としてレンダリングするのではなく、代わりにビュー テンプレートを使用するようにコントローラーを変更しましょう。 このビュー テンプレートでは動的応答が生成されます。これは、応答を生成するために、コントローラーからビューに適量のデータを渡す必要があることを意味します。 これを行うには、ビュー テンプレートがアクセスできるオブジェクトに、ビュー テンプレートに必要な ViewBag 動的データ (パラメーター) をコントローラーに配置します。
HelloWorldController.cs ファイルに戻り、 メソッドをWelcome変更して、 と NumTimes の値を オブジェクトにViewBag追加Messageします。 ViewBag は動的オブジェクトです。つまり、必要なものは何でも配置できます。オブジェクト内に ViewBag 何かを配置するまで、オブジェクトには定義されたプロパティがありません。 ASP.NET MVC モデル バインド システムは、名前付きパラメーター (name と numTimes) をアドレス バーのクエリ文字列からメソッド内のパラメーターに自動的にマップします。 完全な HelloWorldController.cs ファイルは次のようになります。
using System.Web;
using System.Web.Mvc;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
ViewBag.Message = "Hello " + name;
ViewBag.NumTimes = numTimes;
return View();
}
}
}
これで、 ViewBag オブジェクトにビューに自動的に渡されるデータが含まれます。
次に、ウェルカム ビュー テンプレートが必要です。 [ ビルド ] メニューの [ Build MvcMovie]\(MvcMovie のビルド \) を選択して、プロジェクトがコンパイルされていることを確認します。
次に、 メソッド内を右クリックし、 [ビューのWelcome追加] をクリックします。
![Hello World コントローラーのドット cs タブを示すスクリーンショット。ソリューション エクスプローラー ウィンドウで、Hello World コントローラーのドット c の右クリック メニューで [ビューの追加] が選択されています。](adding-a-view/_static/image10.png)
[ ビューの追加] ダイアログ ボックスは次のようになります。
![[ビューの追加] ダイアログを示すスクリーンショット。[表示名] フィールドにようこそ。](adding-a-view/_static/image11.png)
[追加] をクリックし、新しい Welcome.cshtml ファイルの 要素の下<h2>に次のコードを追加します。 ユーザーが必要と言う回数だけ "Hello" というループを作成します。 完全な Welcome.cshtml ファイルを次に示します。
@{
ViewBag.Title = "Welcome";
}
<h2>Welcome</h2>
<ul>
@for (int i=0; i < ViewBag.NumTimes; i++) {
<li>@ViewBag.Message</li>
}
</ul>
アプリケーションを実行し、次の URL を参照します。
http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4
これで、URL からデータが取得され、 モデル バインダーを使用してコントローラーに渡されます。 コントローラーはデータを オブジェクトにパッケージ化 ViewBag し、そのオブジェクトをビューに渡します。 その後、ビューはデータを HTML としてユーザーに表示します。
![M V C ムービーの [ようこそ] ページを示すスクリーンショット。](adding-a-view/_static/image12.png)
上のサンプルでは、 オブジェクトを ViewBag 使用してコントローラーからビューにデータを渡しました。 後者のチュートリアルでは、ビュー モデルを使用して、コントローラーからビューにデータを渡します。 データを渡すためのビュー モデルアプローチは、一般にビュー バッグ アプローチよりも優先されます。 詳細については、 ブログ エントリ「動的 V 厳密に型指定されたビュー 」を参照してください。
"M" (モデル) については学習しましたが、データベースについてはまだです。 学習したことを確認し、ムービーのデータベースを作成してみましょう。