ビューの追加 (VB)

[アーティクル]
05/30/2024

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

Visual Studio Web Developer Express SP1 の前提条件

ASP.NET MVC 3 Tools Update

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

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

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

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

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

Public Function Index() As ActionResult
            Return View()
        End Function

次に、Index メソッドで呼び出すことができるビューテンプレートをプロジェクトに追加しましょう。そのために、Index メソッドの内側で右クリックして、[ビューの追加] をクリックします。

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

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

<h2> タグの下に HTML を何か追加します。次に示すのは、変更後の MvcMovie\Views\HelloWorld\Index.vbhtml ファイルです。

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

<b>Hello</b> World!

アプリケーションを実行し、"hello world" コントローラー (http://localhost:xxxx/HelloWorld) を参照します。コントローラーの Index メソッドで多くの処理は行われませんでした。クライアントへの応答のレンダリングにビューテンプレートファイルを使用するように指定したステートメント return View() を実行しただけです。使用するビューテンプレートファイルの名前を明示的に指定していないため、ASP.NET MVC は、\Views\HelloWorld フォルダー内の Index.vbhtml ビューファイルを使用するように既定で設定されています。次の図では、ビューでハードコーディングされた文字列が示されています。

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

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

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

ファイルの末尾の近くにある @RenderBody() というコード行に注意してください。 RenderBody は、作成したページがすべて表示されるプレースホルダーで、レイアウトページに "ラップ" されています。 <h1> 見出しを " My MVC Application" から "MVC Movie App" に変更します。

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

アプリケーションを実行して、"MVC Movie App" と表示されるようになったことを確認します。 [About] リンクをクリックすると、そのページにも "MVC Movie App" と表示されます。

完成した _Layout.vbhtml ファイルは次のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData("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", "HelloWorld")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

次に、[Index] ページ (ビュー) のタイトルを変更してみましょう。

@Code
    ViewData("Title") = "Movie List"
End Code

<h2>My Movie List</h2>

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

MvcMovie\Views\HelloWorld\Index.vbhtml を開きます。変更する場所は 2 つあります。まず、ブラウザーのタイトルに表示されるテキストを変更して、2 番目の見出し (<h2> 要素) のテキストを変更します。これを少し変えれば、コードのどの部分でアプリのどの部分が変更されるかを確認することができます。

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

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

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

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

以前の HelloWorldController クラスでは、Welcome アクションメソッドは name と numTimes パラメーターを受け取り、パラメーター値をブラウザーに出力していました。コントローラーにこの応答を直接レンダリングし続けるのではなく、代わりにそのデータをビューのバッグに入れてみましょう。コントローラーとビューは、ViewBag オブジェクトを使用してそのデータを保持できます。それはビューテンプレートに自動的に渡され、バッグの内容をデータとして使って HTML 応答をレンダリングするために使用されます。そうすることで、コントローラーは 1 つのことに関係し、ビューテンプレートは別のことに関係するようになり、アプリケーション内でクリーンな "懸念事項の分離" を維持できます。

または、カスタムクラスを定義し、そのオブジェクトのインスタンスを独自に作成し、データを入力してビューに渡すことができます。それはビューのカスタムモデルであるため、ViewModel と呼ばれることがよくあります。ただし、少量のデータの場合は ViewBag が適しています。

HelloWorldController.vb ファイルに戻り、コントローラー内の Welcome メソッドを変更して、Message と NumTimes を ViewBag に配置します。 ViewBag は動的オブジェクトです。つまり、必要なものを何でもその中に入れることができます。 ViewBag には、内部に何かを入れるまで、定義されたプロパティはありません。

同じファイル内に新しいクラスを持つ完成した HelloWorldController.vb です。

Namespace MvcMovie
    Public Class HelloWorldController
        Inherits System.Web.Mvc.Controller
        '
        ' GET: /HelloWorld

        Function Index() As ActionResult
            Return View()
        End Function

        Public Function Welcome(ByVal name As String, Optional ByVal numTimes As Integer = 1) As ActionResult
            ViewBag.Message = "Hello " & name
            ViewBag.NumTimes = numTimes
            Return View()
        End Function

    End Class
End Namespace

この時点で、ViewBag には、ビューに自動的に渡されるデータが格納されます。ここでも、別の方法として、希望する場合は次のように独自のオブジェクトを渡すこともできます。

return View(myCustomObject)

次に、WelcomeView テンプレートが必要です。新しいコードがコンパイルされるようにアプリケーションを実行します。ブラウザーを閉じ、Welcome メソッド内を右クリックし、[ビューの追加] をクリックします。

[ビューの追加] ダイアログボックスの内容は次のようになります。

新しい Welcome.vbhtml ファイルの <h2> 要素の下に次のコードを追加します。ループを作成し、ユーザーが指示した回数だけ "Hello" と表示します。

@Code 
    For i As Integer = 0 To ViewBag.NumTimes
@<h3> @ViewBag.Message @i.ToString </h3>
     Next i
 End Code

アプリケーションを実行して、http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 を参照します

自動的に、データが URL から取得されてコントローラーに渡されるようになります。コントローラーはデータを Model オブジェクトにパッケージ化し、そのオブジェクトをビューに渡します。次にビューは、ユーザーに HTML としてデータを表示します。

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

前へ次へ

次の方法で共有

ビューの追加 (VB)

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

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

フィードバック

その他のリソース

次の方法で共有

ビューの追加 (VB)

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

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

フィードバック

その他のリソース

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