ASP.NET MVC ビュー概要 (C#)

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

ASP.NET MVC ビューとは何ですか。また、HTML ページとの違いは何ですか? このチュートリアルでは、Stephen Walther で Views について説明し、ビュー内のビューデータと HTML ヘルパーを利用する方法について説明します。

このチュートリアルの目的は、ASP.NET MVC ビュー、ビューデータ、および HTML ヘルパーの簡単な概要を提供することです。このチュートリアルを終了すると、新しいビューを作成し、コントローラーからビューにデータを渡し、HTML ヘルパーを使用してビュー内のコンテンツを生成する方法を理解する必要があります。

ビューについて

ASP.NET または Active Server Pages の場合、ASP.NET MVC にはページに直接対応するものは含まれません。 ASP.NET MVC アプリケーションでは、ブラウザーのアドレスバーに入力した URL のパスに対応するページがディスク上にありません。 ASP.NET MVC アプリケーションのページに最も近いものは 、ビューと呼ばれます。

ASP.NET MVC アプリケーションでは、受信したブラウザー要求がコントローラーアクションにマップされます。コントローラーアクションはビューを返す場合があります。ただし、コントローラーアクションでは、別のコントローラーアクションへのリダイレクトなど、他の種類のアクションが実行される場合があります。

リスト 1 には、HomeController という名前の単純なコントローラーが含まれています。 HomeController は、Index() と Details() という名前の 2 つのコントローラーアクションを公開します。

リスト 1 - HomeController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Details()
        {
            return RedirectToAction("Index");
        }
    }
}

最初のアクション Index() アクションを呼び出すには、ブラウザーのアドレスバーに次の URL を入力します。

/Home/Index

次のアドレスをブラウザーに入力することで、2 番目のアクション Details() アクションを呼び出すことができます。

/Home/Details

Index() アクションはビューを返します。作成したほとんどのアクションは、ビューを返します。ただし、アクションは他の種類のアクションの結果を返すことができます。たとえば、Details() アクションは、受信要求を Index() アクションにリダイレクトする RedirectToActionResult を返します。

Index() アクションには、次の 1 行のコードが含まれています。

View();

このコード行は、Web サーバー上の次のパスにある必要があるビューを返します。

\Views\Home\Index.aspx

ビューへのパスは、コントローラーの名前とコントローラーアクションの名前から推論されます。

必要に応じて、ビューについて明示的に指定できます。次のコード行は、Fred という名前のビューを返します。

View( Fred );

このコード行が実行されると、次のパスからビューが返されます。

\Views\Home\Fred.aspx

Note

ASP.NET MVC アプリケーションの単体テストを作成する場合は、ビュー名について明示的に指定することをお勧めします。こうすることで、単体テストを作成して、コントローラーアクションによって期待されるビューが返されたことを確認できます。

ビューへのコンテンツの追加

ビューは、スクリプトを含めることができる標準 (X) HTML ドキュメントです。スクリプトを使用して、ビューに動的コンテンツを追加します。

たとえば、リスト 2 のビューには、現在の日付と時刻が表示されます。

リスト 2 - \Views\Home\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    The current date and time is
    <% Response.Write(DateTime.Now);%>

    </div>
</body>
</html>

リスト 2 の HTML ページの本文には、次のスクリプトが含まれていることに注意してください。

<% Response.Write(DateTime.Now);%>

スクリプトの先頭と末尾を <マークするには、スクリプト区切り記号 % と %> を使用します。このスクリプトは C# で記述されています。 Response.Write() メソッドを呼び出してコンテンツをブラウザーにレンダリングすることで、現在の日付と時刻を表示します。スクリプト区切 <り記号 % と % を> 使用して、1 つ以上のステートメントを実行できます。

Response.Write() を頻繁に呼び出すので、Microsoft は Response.Write() メソッドを呼び出すためのショートカットを提供します。リスト 3 のビューでは、Response.Write() を呼び出すためのショートカットとして区切り記号 <%= と %> が使用されます。

リスト 3 - Views\Home\Index2.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>

    The current date and time is
    <%=DateTime.Now %>

    </div>
</body>
</html>

任意の .NET 言語を使用して、ビューで動的コンテンツを生成できます。通常は、Visual Basic .NET または C# を使用してコントローラーとビューを記述します。

HTML ヘルパーを使用したビューコンテンツの生成

ビューにコンテンツを追加しやすくするために、 HTML ヘルパーと呼ばれるものを利用できます。 HTML ヘルパーは、通常、文字列を生成するメソッドです。 HTML ヘルパーを使用すると、テキストボックス、リンク、ドロップダウンリスト、リストボックスなどの標準の HTML 要素を生成できます。

たとえば、リスト 4 のビューでは、3 つの HTML ヘルパー (BeginForm()、TextBox() ヘルパー、Password() ヘルパー) を利用してログインフォームを生成します (図 1 を参照)。

リスト 4 -- \Views\Home\Login.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form</title>
</head>
<body>
    <div>
    
    <% using (Html.BeginForm())
       { %>

        <label for="UserName">User Name:</label>
        <br />
        <%= Html.TextBox("UserName") %>
        
        <br /><br />
            
        <label for="Password">Password:</label>
        <br />
        <%= Html.Password("Password") %>
        
        <br /><br />

        <input type="submit" value="Log in" />        
    
    <% } %>
    
    </div>
</body>
</html>

$[New Project]$新しいプロジェクト$ ダイアログボックス$

図 01: 標準のログインフォーム (フルサイズの画像を表示する場合にクリックします)

すべての HTML ヘルパーメソッドは、ビューの Html プロパティで呼び出されます。たとえば、Html.TextBox() メソッドを呼び出して TextBox をレンダリングします。

Html.TextBox() ヘルパーと Html.Password() ヘルパーの両方を呼び出すときは、スクリプト区切り記号 <%= と %> を使用していることに注意してください。これらのヘルパーは単に文字列を返します。文字列をブラウザーにレンダリングするには、Response.Write() を呼び出す必要があります。

HTML ヘルパーメソッドの使用は省略可能です。記述する必要がある HTML とスクリプトの量を減らすことで、生活を楽にします。リスト 5 のビューは、HTML ヘルパーを使用せずに、リスト 4 のビューとまったく同じ形式をレンダリングします。

リスト 5 -- \Views\Home\Login.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index4.aspx.cs" Inherits="MvcApp.Views.Home.Index4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form without Help</title>
</head>
<body>
    <div>

    <form method="post" action="/Home/Login">
    
    <label for="userName">User Name:</label>
    <br />
    <input name="userName" />
    
    <br /><br />
    
    <label for="password">Password:</label>
    <br />
    <input name="password" type="password" />
    
    <br /><br />
    <input type="submit" value="Log In" />
    
    </form>
    
    </div>
</body>
</html>

独自の HTML ヘルパーを作成することもできます。たとえば、HTML テーブル内のデータベースレコードのセットを自動的に表示する GridView() ヘルパーメソッドを作成できます。このトピックについては、 カスタム HTML ヘルパーの作成に関するチュートリアルを参照してください。

ビューデータを使用してビューにデータを渡す

ビューデータを使用して、コントローラーからビューにデータを渡します。ビューデータは、メールを通じて送信するパッケージと考えてください。コントローラーからビューに渡されるすべてのデータは、このパッケージを使用して送信する必要があります。たとえば、リスト 6 のコントローラーは、データを表示するメッセージを追加します。

リスト 6 - ProductController.cs

using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class ProductController : Controller
    {
        public ActionResult Index()
        {
            ViewData["message"] = "Hello World!";
            return View();
        }

    }
}

コントローラー ViewData プロパティは、名前と値のペアのコレクションを表します。リスト 6 では、Index() メソッドは、値が Hello World! の message という名前のビューデータコレクションに項目を追加します。 Index() メソッドによってビューが返されると、ビューデータがビューに自動的に渡されます。

リスト 7 のビューは、ビューデータからメッセージを取得し、そのメッセージをブラウザーにレンダリングします。

リスト 7 -- \Views\Product\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Product Index</title>
</head>
<body>
    <div>
    
    <%= Html.Encode(ViewData["message"]) %>
    
    </div>
</body>
</html>

ビューは、メッセージをレンダリングするときに Html.Encode() HTML ヘルパーメソッドを利用していることに注意してください。 Html.Encode() HTML ヘルパーは、やなどの<>特殊文字を、Web ページに安全に表示できる文字にエンコードします。ユーザーが Web サイトに送信するコンテンツをレンダリングするときは常に、JavaScript インジェクション攻撃を防ぐためにコンテンツをエンコードする必要があります。

(ProductController で自分でメッセージを作成したため、メッセージをエンコードする必要はありません。ただし、ビュー内のビューデータから取得したコンテンツを表示するときは、常に Html.Encode() メソッドを呼び出すのが良い習慣です。

リスト 7 では、ビューデータを利用して、コントローラーからビューに単純な文字列メッセージを渡しました。ビューデータを使用して、データベースレコードのコレクションなどの他の種類のデータをコントローラーからビューに渡すこともできます。たとえば、Products データベーステーブルの内容をビューに表示する場合は、ビューデータ内のデータベースレコードのコレクションを渡します。

また、コントローラーからビューに厳密に型指定されたビューデータを渡すこともできます。このトピックについては、「 厳密に型指定されたビューのデータとビューについて」のチュートリアルで説明します。

まとめ

このチュートリアルでは、MVC ビュー、ビューデータ、HTML ヘルパー ASP.NET 簡単に紹介しました。最初のセクションでは、プロジェクトに新しいビューを追加する方法について説明しました。特定のコントローラーからビューを呼び出すには、適切なフォルダーにビューを追加する必要があることを学習しました。次に、HTML ヘルパーのトピックについて説明しました。 HTML ヘルパーを使用して標準の HTML コンテンツを簡単に生成する方法について学習しました。最後に、ビューデータを利用してコントローラーからビューにデータを渡す方法について学習しました。

ASP.NET MVC ビュー概要 (C#)

ビューについて

ビューへのコンテンツの追加

HTML ヘルパーを使用したビューコンテンツの生成

ビューデータを使用してビューにデータを渡す

まとめ

その他のリソース

その他のリソース

ASP.NET MVC ビュー概要 (C#)

ビューについて

ビューへのコンテンツの追加

HTML ヘルパーを使用したビュー コンテンツの生成

ビュー データを使用してビューにデータを渡す

まとめ

その他のリソース

その他のリソース

HTML ヘルパーを使用したビューコンテンツの生成

ビューデータを使用してビューにデータを渡す