テンプレート化されたビューを使用する
MVC 2から新しく追加されたヘルパーのメソッドの中で、DisplayFor/DisplayForModel/DisplayTextFor/EditorFor/EditorForModelメソッドは、Viewフォルダー内のViewPageに対して、テンプレート（部分ビュー）表示を実現できます。テンプレートとなる部分ビューは、ViewPageにモデルのデータを埋め込んでカスタマイズもできます（図6～7）。
例えば、Eコマースサイトの商品名のフォントサイズを拡大する、在庫状況を色づけして表示する、書式を設定して表示するといった調整をテンプレートの設定で実現できます。もちろん部分ビューはViewsフォルダー内の一覧ページや詳細ページ、カート確認時の編集ページでもヘルパーメソッドを記載するだけで利用できます。
それぞれのヘルパーメソッドの概要は次のとおりです。
| ヘルパーメソッド名 | 概要 | 基本構文 |
| DisplayFor | ViewPageに型付されたモデル、または特定の型付を使用してテンプレートの値を取得するメソッド。返される値はエスケープされる。主にデータの表示画面で使用される | DisplayFor(モデルを使用した式（ラムダ式）,"部分ビュー名") |
| DisplayForModel | ViewPageに型付されたモデルをパラメタとして使用するDisplayForメソッド。返される値はエスケープされる。主にデータの表示画面で使用される | DisplayForModel("部分ビュー名") |
| DisplayTextFor | ViewPageに型付されたモデル、または特定の型付を使用してテンプレートの値を取得するメソッド。DisplayForメソッドと違い、返される値はエスケープされない。主にデータの表示画面で使用される | DisplayTextFor(モデルを使用した式（ラムダ式）) |
| EditorFor | ViewPageに型付されたモデル、または特定の型付を使用してテンプレートの値（input要素）を取得するメソッド。主に編集/作成画面で使用するテンプレートを指定。 | EditorFor(モデルを使用した式（ラムダ式）,"部分ビュー名") |
| EditorForModel | ViewPageに型付されたモデルをパラメタとして使用するEditorForメソッド。主に編集/作成画面で使用するテンプレート（input要素）を指定。 | EditorForModel("部分ビュー名") |
忘れていけないポイントとして、Display/Editorそれぞれの部分ビュー格納フォルダー「DisplayTemplates」と、「EditTemplates」フォルダーをそれぞれ作成する必要があります。名前が異なる場合部分ビューを適用できないため注意してください。
今回は最も多く使うであろう、DisplayFor/DisplayForModelメソッドの使い方を紹介します。実際のヘルパーメソッド使用例の前にモデルを作成します。
モデルの作成
今回はEntity Data Model（以下、EDM）をモデルとして使用します。EDMの作成手順は次のとおりです。
- Pubsデータベースをプロジェクトに追加
- ソリューション エクスプローラを展開し、Modelsフォルダー上で［追加］-［新しい項目］を選択
- 選択後［新しい項目の追加］ダイアログが表示されるので、［データ］テンプレートから「ADO.NET Entity Data Model」を選択し、名前を「Pubs.edmx」と設定後、［追加］ボタンをクリック
- Entity Data Modelウィザードが起動する。「モデルに含めるコンテンツ」では、［データベースから生成］を選択して［次へ］ボタンをクリック
- 「データ接続の選択」では、Pubsデータベースの接続設定を行い［次へ］ボタンをクリック
- 「データベース・オブジェクトの選択」では、［テーブル］-［publishers］にチェックし（publishersテーブル選択）、［完了］ボタンをクリック。
以上で、EDMが生成されます。ViewやController側で、Modelを利用する際にModelを参照するために、EDM生成後必ずプロジェクトのビルドを行ってください。Modelの準備は以上です。
DisplayFor/DisplayTextForメソッド使用例
DisplayFor/DiplayTextForメソッドの使用方法は基本的に同じです。必要な作業は次の2つです。
- テンプレートフォルダーとテンプレートとなる部分ビューの作成
- テンプレートを適用するページ作成とコントローラーの設定
まずは、DisplayForメソッドの使用から説明します。
- /Views/Homeフォルダーの直下にDisplayTemplatesフォルダーを作成
- DisplayTemplatesフォルダー上のコンテキストメニューで［追加］-［ビュー］と選択し、表示される［ビューの追加ダイアログ］で、以下の表同様に項目を入力し、［追加］ボタンを押す
| ビュー名 | pub_name |
| 部分ビュー(.ascx)を作成する | チェック有 |
| 厳密に型指定されたビューを作成する | チェック有 |
| ビュー データ クラス | プロジェクト名.Models.publishers |
| ビュー コンテンツ | Empty |
- pub_name.ascx内に下記のコードを記述
今回はシンプルにpub_nameの文字色を赤色に変更しています。
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<CodeZineMVC2.Models.publishers>" %> <span style="color:red;"><%: Model.pub_name %> </span>
- Homeフォルダー上のコンテキストメニューで［追加］-［ビュー］と選択し、表示される［ビューの追加ダイアログ］で、以下の表同様に項目を入力し、［追加］ボタンを押す
| ビュー名 | List |
| 部分ビュー(.ascx)を作成する | チェック無 |
| 厳密に型指定されたビューを作成する | チェック有 |
| ビュー データ クラス | プロジェクト名.Models.publishers |
| ビュー コンテンツ | List |
- Listビューの一部を下記に修正
<%--修正前--%> <%: item.pub_name %> <%--修正後--%> <%= Html.DisplayFor(c => item, "pub_name") %>
DisplayForメソッドの第1パラメタにモデルを使用したラムダ式を、第2パラメタに部分ビューの名前を設定します。これにより、pub_nameの要素は部分ビューでレンダリングされます。
- コントローラーの設定を行う
HomeController内に下記のActionResultメソッドを記述します。
public ActionResult List()
{
PUBSEntities pubs = new PUBSEntities();
var publist = from p in pubs.publishers
select p;
return View(publist);
}
処理内容はEDMのエンティティの値をそのままビューページに渡しています。
ここまでの設定完了後に、実行すると図6のように表示されます。
DisplayForModelメソッドの使用方法
続いて、DisplayForModelメソッドの使い方について説明します。
- DisplayTemplatesフォルダー上のコンテキストメニューで［追加］-［ビュー］と選択し、表示される［ビューの追加ダイアログ］で、以下の表同様に項目を入力し、［追加］ボタンを押す
| ビュー名 | DetailsModel |
| 部分ビュー（.ascx）を作成する | チェック有 |
| 厳密に型指定されたビューを作成する | チェック有 |
| ビュー データ クラス | プロジェクト名.Models.publishers |
| ビュー コンテンツ | Details |
ビュー コンテンツを選択すると、部分ビュー内にビューページ同様のHTMLとHTMLヘルパーメソッドが記述されますので特に追記/修正は行いません。
- Homeフォルダー上のコンテキストメニューで［追加］-［ビュー］と選択し、表示される［ビューの追加ダイアログ］で、以下の表同様に項目を入力し、［追加］ボタンを押す
| ビュー名 | Details |
|
部分ビュー（.ascx）を作成する |
チェック無 |
| 厳密に型指定されたビューを作成する | チェック有 |
| ビュー データ クラス | プロジェクト名.Models.publishers |
| ビュー コンテンツ | Details |
- Detailsビューにコメントアウトと追記の修正を行う
部分ビュー内にビューページ同様のHTMLとHTMLヘルパーメソッドが記述されますので、<asp:Content />内の要素をコメントアウトします（冒頭のh2タグのみ残してもOKです）。
続いて、DisplayForModelメソッドの記載です。
<%: Html.DisplayForModel("DetailsModel") %>
概要部分で記載しましたが、DisplayForModelメソッドは既定でビューページのモデルを部分ページに渡します。第一パラメタに部分ビューの名前を設定します。
- コントローラーの設定を行う
HomeController内に下記のActionResultメソッドを記述します。
public ActionResult Details(string id)
{
PUBSEntities pubs = new PUBSEntities();
var publist = (from p in pubs.publishers
where p.pub_id == id
select p).First();
return View(publist);
}
処理内容はListビューのDetailsボタンを押された時のidをパラメタとして、LINQによる抽出を行い、戻り値をDetailsビューへと渡しています。ここまでの設定完了後に、実行すると図7のように表示されます。
DisplayTextFor/EditorFor/EditorForModelメソッドも同様の手順で利用できます（EditTor系のメソッドはEditemplateフォルダーにinput要素を配置という流れになります）。
テンプレートの活用はMVCアプリケーションのアクセントに成り得るので、汎用的な表示などでは積極的に利用しましょう。
