ASP.NET MVC ビュー概要 (C#)
ASP.NET MVC ビューとは何であり、HTML ページとの違いは何でしょうか。 このチュートリアルでは、Stephen Walther がビューについて概説し、ビュー内でビュー データと 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>
図 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 データベース テーブルのコンテンツをビューに表示する場合は、ビュー データ内のデータベース レコードのコレクションを渡します。
厳密に型指定されたビュー データをコントローラーからビューに渡すこともできます。 このトピックについては、厳密に型指定されたビュー データとビューの理解に関するチュートリアルで説明しています。
まとめ
このチュートリアルでは、ASP.NET MVC ビュー、ビュー データ、HTML ヘルパーについて簡単に説明しました。 最初のセクションでは、プロジェクトに新しいビューを追加する方法について説明しました。 特定のコントローラーからビューを呼び出すには、それを適切なフォルダーに追加する必要があることを説明しました。 次に、HTML ヘルパーのトピックについて説明しました。 HTML ヘルパーを使用して標準の HTML コンテンツを簡単に生成する方法について説明しました。 最後に、ビュー データを利用してコントローラーからビューにデータを渡す方法を説明しました。