ビューの追加 - ビューテンプレートファイルを使用して、生成する HTML 応答をクライアントにクリーンにカプセル化する方法

[アーティクル]
04/24/2024

これは、ASP.NET MVC の基本について説明する初心者向けチュートリアルです。データベースから読み書きする単純な Web アプリを作成します。他の ASP.NET MVC のチュートリアルとサンプルについては、ASP.NET MVC ラーニングセンターにアクセスしてください。

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

まず、Index メソッドでビューテンプレートを使用してみましょう。このメソッドは Index と呼ばれ、HelloWorldController にあります。現在、Index() メソッドは、コントローラークラス内でハードコーディングされたメッセージを含む文字列を返します。

public string Index()
{
    return "<html><body>This is my default action...</body></html>";
}

次に、Index メソッドを次のように変更します。

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

次に、Index() メソッドに使用できるビューテンプレートをプロジェクトに追加しましょう。これを行うには、Index メソッドの途中でマウスを右クリックし、[ビューの追加...] をクリックします。

[ビューの追加] ダイアログが表示され、Index メソッドで使用できるビューテンプレートを作成する方法に関するいくつかのオプションが表示されます。ここでは、何も変更せず、[追加] ボタンをクリックします。

[追加] をクリックすると、次に示すように、新しいフォルダーと新しいファイルが [ソリューション] フォルダーに表示されます。 [ビュー] の下に [HelloWorld] フォルダーがあり、そのフォルダー内に Index.aspx ファイルがあります。

新しいインデックスファイルも既に開いており、編集できる状態となっています。最初の <h2>Index</h2> の下に "Hello World" のようなテキストを追加します。

<h2>Index</h2>
Hello world!

アプリケーションを実行し、ブラウザーでもう一度 http://localhost:xx/HelloWorld にアクセスします。この例のコントローラーの Index メソッドは何も処理しませんでしたが、"return View()" を呼び出しました。これは、ビューテンプレートファイルを使用してクライアントに応答をレンダリングすることを示しています。使用するビューテンプレートファイルの名前を明示的に指定していないため、ASP.NET MVCは、\Views\HelloWorld フォルダー内の Index.aspx ビューファイルを使用するように既定で設定されています。これで、ビューでハードコーディングした文字列が表示されます。

見栄えは良いですね。ただし、ブラウザーのタイトルに "Index" と表示され、ページのメインタイトルに "My MVC Application" と表示されていることに注意してください。これを変えてみましょう。

ビューとマスターページの変更

まず、"My MVC Application" というテキストを変更します。そのテキストは共有され、すべてのページに表示されます。アプリ内のすべてのページに表示されていますが、実際にはコード内では 1 つの場所にのみ表示されます。ソリューションエクスプローラーで /Views/Shared フォルダーに移動し、Site.Master ファイルを開きます。このファイルはマスターページと呼ばれ、他のすべてのページで使用される共有の「シェル」です。

このファイルの ContentPlaceholder "MainContent" というテキストに注目してください。

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

このプレースホルダーは、作成したすべてのページが表示される場所であり、マスターページに「ラップ」されます。タイトルを変更してから、アプリを実行し、複数のページにアクセスしてみてください。 1 つの変更が複数のページに表示されていることがわかると思います。

<div id="title">
    <h1>My MVC Movie Application</h1>
</div>

これで、すべてのページのプライマリ見出し (H1) が "My MVC Movie Application" となります。すべてのページで共有されている上部の白いテキストが処理されます。

タイトルを変更した Site.Master の全体は次のとおりです。

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Movie Application</h1>
            </div>
             
            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>
           
            <div id="menucontainer">
           
                <ul id="menu">             
                    <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%: Html.ActionLink("About", "About", "Home")%></li>
                </ul>
           
            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

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

/HelloWorld/Index.aspx を開きます。変更する場所は 2 箇所あります。まず、ブラウザーのタイトルに表示されるタイトルを変更し、次にセカンダリヘッダー (H2) も変更します。これらを少し変えることで、コードのどの部分を変更するとアプリのどの部分が変更されるかを確認することができます。

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Movie List
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>My Movie List</h2>
    Hello World!

</asp:Content>

アプリを実行し、/Movies にアクセスします。ブラウザーのタイトル、プライマリ見出し、およびセカンダリ見出しが変更されていることに注意してくださいビューに小さな変更を加えることで、簡単にアプリに大きな変更を加えることができます。

わずかな「データ」 (この場合は "Hello World!" メッセージ) がハードコーディングされました。 V (ビュー) があり、C (コントローラー) はありますが、M (モデル) はまだありません。次に、データベースを作成し、そこからモデルデータを取得する方法について説明します。

ViewModel を渡す

データベースに移動してモデルについて説明する前に、まず "ViewModels" について説明しましょう。これらは、HTML 応答をクライアントにレンダリングするためにビューテンプレートで必要なものを表すオブジェクトです。これらは通常、コントローラークラスによって作成され、ビューテンプレートに渡されるため、ビューテンプレートに必要なデータのみを含める必要があり、それ以上は含めてはなりません。

以前の HelloWorld サンプルでは、Welcome() アクションメソッドは名前と numTimes パラメーターを取得し、ブラウザーに出力しました。コントローラーにこの応答を直接レンダリングさせ続けるのではなく、そのデータを保持する小さなクラスを作成し、それをビューテンプレートに渡して、それを使用して HTML 応答をレンダリングしてみましょう。こうすることで、コントローラーは一方のことに関係し、ビューテンプレートはもう一方のことに関係することで、アプリケーション内でクリーンな「懸念事項の分離」を維持できます。

HelloWorldController.cs ファイルに戻り、新しい "WelcomeViewModel" クラスを追加し、コントローラー内の Welcome メソッドを変更します。同じファイル内に新しいクラスを持つ完全な HelloWorldController.cs を次に示します。

using System.Web.Mvc;

namespace Movies.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            var viewModel = new WelcomeViewModel
            {
                Message = "Hello " + name,
                NumTimes = numTimes
            };

            return View(viewModel);
        }

        public class WelcomeViewModel
        {
            public string Message { get; set; }
            public int NumTimes { get; set; }
        }
    }
}

複数行に記述されていても、Welcome メソッドは実際には 2 つのコードステートメントにすぎません。最初のステートメントは 2 つのパラメーターを ViewModel オブジェクトにパッケージ化し、2 番目のステートメントは結果のオブジェクトを View に渡します。

ここで、Welcome ビューテンプレートが必要になりました。 Welcome メソッドを右クリックし、[ビューの追加] を選択します。今回は、[厳密に型指定されたビューを作成する] をオンにし、ドロップダウンリストから WelcomeViewModel クラスを選択します。この新しいビューでは、WelcomeViewModels についてのみ認識され、他の種類のオブジェクトは認識されません。

注: ドロップダウンリストに表示するには、WelcomeViewModel を追加した後に 1 回コンパイルする必要があります。

[ビューの追加] ダイアログの外観を以下に示します。 [追加] をクリックします。 Add View circled

新しい Welcome.aspx の <h2> の下にこのコードを追加します。ループを作成し、ユーザーが言うのと同じ回数だけ Hello と言います。

<% for(int i=0;i<Model.NumTimes;i++) { %>
       <%h3><%: Model.Message %></h3>
<% } %>

また、入力時に WelcomeViewModel に関するこのビューについても指示していたので (両者は結合していることを覚えていますか?)、以下のスクリーンショットに示すように、モデルオブジェクトを参照するたびに役立つ Intellisense が得られます。

アプリケーションを実行し、もう一度 http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 にアクセスします。これで、URL からデータを取得するようになりました。そのデータはコントローラーに自動的に渡され、コントローラーはデータを ViewModel にパッケージ化し、そのオブジェクトをビューに渡します。次にビューは、ユーザーに HTML としてデータを表示します。

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

前へ次へ

次の方法で共有

ビューの追加 - ビューテンプレートファイルを使用して、生成する HTML 応答をクライアントにクリーンにカプセル化する方法

ビューとマスターページの変更

ViewModel を渡す

フィードバック

その他のリソース

次の方法で共有

ビューの追加 - ビュー テンプレート ファイルを使用して、生成する HTML 応答をクライアントにクリーンにカプセル化する方法

ビューとマスター ページの変更

ViewModel を渡す

フィードバック

その他のリソース

ビューの追加 - ビューテンプレートファイルを使用して、生成する HTML 応答をクライアントにクリーンにカプセル化する方法

ビューとマスターページの変更