ビューの追加 (C#)

[アーティクル]
07/13/2023

Note

このチュートリアルの更新版は、MVC 5 とVisual Studio 2013 ASP.NET 使用するこちらにあります。より安全で、従う方がはるかに簡単で、より多くの機能を示します。

このチュートリアルでは、Microsoft Visual Studio の無料バージョンである Microsoft Visual Web Developer 2010 Express Service Pack 1 を使用して、ASP.NET MVC Web アプリケーションを構築する基本について説明します。開始する前に、以下に示す前提条件がインストールされていることを確認してください。これらのすべてをインストールするには、 Web プラットフォームインストーラーのリンクをクリックします。または、次のリンクを使用して、前提条件を個別にインストールすることもできます。

Visual Studio Web Developer Express SP1 の前提条件

ASP.NET MVC 3 ツールの更新

SQL Server Compact 4.0(ランタイム + ツールのサポート)

Visual Web Developer 2010 ではなく Visual Studio 2010 を使用している場合は、Visual Studio 2010 の前提条件のリンクをクリックして前提条件をインストールします。

このトピックでは、C# ソースコードを含む Visual Web Developer プロジェクトを使用できます。 C# バージョンをダウンロードします。 Visual Basic を使用する場合は、このチュートリアルの Visual Basic バージョンに切り替えます。

このセクションでは、クラスを HelloWorldController 変更して、ビューテンプレートファイルを使用して、クライアントに対する HTML 応答を生成するプロセスをクリーンにカプセル化します。

ASP.NET MVC 3 で導入された新しい Razor ビューエンジンを使用して、ビューテンプレートファイルを作成します。 Razor ベースのビューテンプレートには .cshtml ファイル拡張子があり、C# を使用して HTML 出力を作成するエレガントな方法が提供されます。 Razor は、ビューテンプレートを作成するときに必要な文字数とキーストロークを最小限に抑え、高速で流動的なコーディングワークフローを可能にします。

まず、クラスのメソッドで Index ビューテンプレートを HelloWorldController 使用します。現在、Index メソッドは、コントローラークラスでハードコーディングされるメッセージを含む文字列を返します。次に Index 示すように、メソッドを View 変更してオブジェクトを返します。

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

このコードでは、ビューテンプレートを使用して、ブラウザーに対する HTML 応答を生成します。プロジェクトで、メソッドで使用できるビューテンプレートを Index 追加します。これを行うには、メソッド内を右クリックし、 [ビューのIndex追加] をクリックします。

[インデックス] が強調表示された後のかっこを示すスクリーンショット。右クリックメニューで [ビューの追加] が選択されています。

[ ビューの追加] ダイアログボックスが表示されます。既定値をそのままにして、[ 追加 ] ボタンをクリックします。

[ビューの追加] ダイアログを示すスクリーンショット。[ビュー名] フィールドにインデックスがあります。

MvcMovie\Views\HelloWorld フォルダーと MvcMovie\Views\HelloWorld\Index.cshtml ファイルが作成されます。 ソリューションエクスプローラーで確認できます。

ソリューションエクスプローラーウィンドウを示すスクリーンショット。Hello World サブフォルダーと Index ドット c s h t m l は、Views フォルダーの下で赤で囲まれています。

作成された Index.cshtml ファイルを 次に示します。

タグの下に HTML を <h2> 追加します。変更された MvcMovie\Views\HelloWorld\Index.cshtml ファイルを 次に示します。

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

アプリケーションを実行し、コントローラー (http://localhost:xxxx/HelloWorld) をHelloWorld参照します。コントローラーのメソッドはあまり Index 機能しませんでした。単にステートメントを実行しました。このステートメント return View()では、メソッドがビューテンプレートファイルを使用してブラウザーへの応答をレンダリングする必要があることを指定しました。使用するビューテンプレートファイルの名前を明示的に指定していないため、MVC ASP.NET 既定では、\Views\HelloWorld フォルダー内の Index.cshtml ビューファイルを使用するように設定されています。次の図は、ビューでハードコーディングされた文字列を示しています。

My M V C アプリケーションの [インデックス] ページを示すスクリーンショット。

かなり良い見えます。ただし、ブラウザーのタイトルバーに "Index" と表示され、ページ上の大きなタイトルに "My MVC アプリケーション" と表示されていることに注意してください。それらを変更してみましょう。

ビューとレイアウトページの変更

まず、ページの上部にある "My MVC アプリケーション" タイトルを変更します。そのテキストはすべてのページに共通です。実際には、アプリケーション内のすべてのページに表示される場合でも、プロジェクト内の 1 つの場所にのみ実装されます。 ソリューションエクスプローラーの /Views/Shared フォルダーに移動し、_Layout.cshtml ファイルを開きます。このファイルは レイアウトページ と呼ばれ、他のすべてのページで使用される共有 "シェル" です。

[レイアウト] テンプレートでは、1 か所でサイトの HTML コンテナーレイアウトを指定し、それをサイト内の複数のページに適用できます。ファイルの @RenderBody() 下部付近の行をメモします。 RenderBody は、作成したすべてのビュー固有のページがレイアウトページに "ラップ" されて表示されるプレースホルダーです。レイアウトテンプレートのタイトル見出しを "My MVC アプリケーション" から "MVC Movie App" に変更します。

<div id="title">
      <h1>MVC Movie App</h1>
  </div>

アプリケーションを実行し、"MVC Movie App" と表示されます。 [ バージョン情報 ] リンクをクリックすると、そのページに "MVC Movie App" も表示されます。レイアウトテンプレートで変更を 1 回行うことができ、サイト上のすべてのページに新しいタイトルが反映されました。

M V C ムービーアプリの [バージョン情報] ページを示すスクリーンショット。

完全な _Layout.cshtml ファイルを次に示します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>MVC Movie App</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

次に、インデックスページ (ビュー) のタイトルを変更してみましょう。

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 のセクションの一部として要素で <title> この値を <head> 使用していることがわかります。この方法を使用すると、ビューテンプレートとレイアウトファイルの間で他のパラメーターを簡単に渡すことができます。

アプリケーションを実行し、を参照します http://localhost:xx/HelloWorld。ブラウザーのタイトル、プライマリ見出し、およびセカンダリ見出しが変更されていることに注意してください (ブラウザーに変更が表示されない場合は、キャッシュされたコンテンツを表示している可能性があります。ブラウザーで Ctrl + F5 キーを押して、サーバーからの応答を強制的に読み込みます)。

また、 Index.cshtml ビューテンプレート内のコンテンツが _Layout.cshtml ビューテンプレートとマージされ、単一の HTML 応答がブラウザーに送信されたことにも注目してください。レイアウトテンプレートを使用すれば、アプリケーションのすべてのページに適用される変更をとても簡単に行うことができます。

M V C ムービーアプリの [マイムービーリスト] を示すスクリーンショット。

ただし、少しの "data" (この場合は "View Template!" メッセージの Hello) はハードコーディングされています。 MVC アプリケーションには "V" (ビュー) があり、"C" (コントローラー) もありますが、"M" (モデル) はまだありません。次に、データベースを作成し、そこからモデルデータを取得する方法について説明します。

コントローラーからビューへのデータの受け渡し

ただし、データベースに移動してモデルについて説明する前に、まずコントローラーからビューに情報を渡す方法について説明します。コントローラークラスは、受信 URL 要求に応答して呼び出されます。コントローラークラスは、受信パラメーターを処理し、データベースからデータを取得し、最終的にブラウザーに返送する応答の種類を決定するコードを記述する場所です。その後、ビューテンプレートをコントローラーから使用して、ブラウザーに対する HTML 応答を生成して書式設定できます。

コントローラーは、ビューテンプレートがブラウザーに応答をレンダリングするために必要なデータまたはオブジェクトを提供する役割を担います。ビューテンプレートでは、ビジネスロジックを実行したり、データベースを直接操作したりしないでください。代わりに、コントローラーによって提供されるデータでのみ機能する必要があります。この "懸念事項の分離" を維持すると、コードのクリーンを維持し、保守しやすくなります。

現在、クラスの WelcomeHelloWorldController action メソッドは、パラメーターとパラメーターをnumTimes受け取りname、値をブラウザーに直接出力します。コントローラーでこの応答を文字列としてレンダリングするのではなく、代わりにビューテンプレートを使用するようにコントローラーを変更しましょう。このビューテンプレートでは動的応答が生成されます。これは、応答を生成するために、コントローラーからビューに適量のデータを渡す必要があることを意味します。これを行うには、ビューテンプレートがアクセスできるオブジェクトに、ビューテンプレートに必要な ViewBag 動的データをコントローラーに配置します。

HelloWorldController.cs ファイルに戻り、メソッドをWelcome変更して、と NumTimes の値をオブジェクトにViewBag追加Messageします。 ViewBag は動的オブジェクトです。つまり、必要なものは何でも配置できます。オブジェクト内に ViewBag 何かを配置するまで、オブジェクトには定義されたプロパティがありません。完全な 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追加] をクリックします。 [ ビューの追加] ダイアログボックスは次のようになります。

[ビューの追加] ダイアログを示すスクリーンショット。[表示名] フィールドにようこそ。

[追加] をクリックし、新しい 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 ムービーアプリの [ようこそ] ページを示すスクリーンショット。

"M" (モデル) については学習しましたが、データベースについてはまだです。学習したことを確認し、ムービーのデータベースを作成してみましょう。

前へ次へ

ビューの追加 (C#)

ビューとレイアウトページの変更

コントローラーからビューへのデータの受け渡し

その他のリソース

その他のリソース

ビューの追加 (C#)

ビューとレイアウト ページの変更

コントローラーからビューへのデータの受け渡し

その他のリソース

その他のリソース

ビューとレイアウトページの変更