ビューの追加 (VB)

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

このチュートリアルでは、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 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# バージョンに切り替えます。

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

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

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

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

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

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

タグの下に HTML を <h2> 追加します。変更された 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()を実行しました。これは、ビューテンプレートファイルを使用してクライアントへの応答をレンダリングすることを示しています。使用するビューテンプレートファイルの名前を明示的に指定していないため、MVC ASP.NET\Views\HelloWorld フォルダー内の Index.vbhtml ビューファイルを使用するように既定で設定されています。次の図は、ビューでハードコーディングされた文字列を示しています。

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

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

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

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

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

アプリケーションを実行し、"MVC ムービーアプリ" と表示されることに注意してください。 [ バージョン情報 ] リンクをクリックすると、そのページに "MVC ムービーアプリ" も表示されます。

完全な _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>

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

@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 つあります。最初に、ブラウザーのタイトルに表示されるテキスト、次にセカンダリヘッダー ( <h2> 要素) に表示されるテキストです。アプリのどの部分を変更するかを確認できるように、少し異なります。

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

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

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

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

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

または、カスタムクラスを定義し、そのオブジェクトのインスタンスを独自に作成し、データを入力して View に渡すことができます。これは、ビューのカスタムモデルであるため、多くの場合、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 の要素の下に <h2> 次のコードを追加 します。vbhtml ファイル。ループを作成し、ユーザーが必要と言う回数だけ "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)

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

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

フィードバック

フィードバック

その他のリソース

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