CodeZine(コードジン)

特集ページ一覧

ASP.NET MVC 2によるエリアとテンプレート活用

ASP.NET MVC 2入門(前編)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/07/08 14:00
目次

テンプレート化されたビューを使用する

 MVC 2から新しく追加されたヘルパーのメソッドの中で、DisplayFor/DisplayForModel/DisplayTextFor/EditorFor/EditorForModelメソッドは、Viewフォルダー内のViewPageに対して、テンプレート(部分ビュー)表示を実現できます。テンプレートとなる部分ビューは、ViewPageにモデルのデータを埋め込んでカスタマイズもできます(図6~7)。

図6 DisplayForメソッド使用例
図6 DisplayForメソッド使用例
図7 DisplayForModelメソッド使用例
図7 DisplayForModelメソッド使用例

 例えば、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の作成手順は次のとおりです。

  1. Pubsデータベースをプロジェクトに追加
  2. ソリューション エクスプローラを展開し、Modelsフォルダー上で[追加]-[新しい項目]を選択
  3. 選択後[新しい項目の追加]ダイアログが表示されるので、[データ]テンプレートから「ADO.NET Entity Data Model」を選択し、名前を「Pubs.edmx」と設定後、[追加]ボタンをクリック
  4. Entity Data Modelウィザードが起動する。「モデルに含めるコンテンツ」では、[データベースから生成]を選択して[次へ]ボタンをクリック
  5. 「データ接続の選択」では、Pubsデータベースの接続設定を行い[次へ]ボタンをクリック
  6. 「データベース・オブジェクトの選択」では、[テーブル]-[publishers]にチェックし(publishersテーブル選択)、[完了]ボタンをクリック。

 以上で、EDMが生成されます。ViewやController側で、Modelを利用する際にModelを参照するために、EDM生成後必ずプロジェクトのビルドを行ってください。Modelの準備は以上です。

DisplayFor/DisplayTextForメソッド使用例

 DisplayFor/DiplayTextForメソッドの使用方法は基本的に同じです。必要な作業は次の2つです。

  • テンプレートフォルダーとテンプレートとなる部分ビューの作成
  • テンプレートを適用するページ作成とコントローラーの設定

 まずは、DisplayForメソッドの使用から説明します。

  1. /Views/Homeフォルダーの直下にDisplayTemplatesフォルダーを作成
  2. DisplayTemplatesフォルダー上のコンテキストメニューで[追加]-[ビュー]と選択し、表示される[ビューの追加ダイアログ]で、以下の表同様に項目を入力し、[追加]ボタンを押す
pub_name部分ビューの追加
ビュー名 pub_name
部分ビュー(.ascx)を作成する チェック有
厳密に型指定されたビューを作成する チェック有
ビュー データ クラス プロジェクト名.Models.publishers
ビュー コンテンツ Empty
  1. pub_name.ascx内に下記のコードを記述

 今回はシンプルにpub_nameの文字色を赤色に変更しています。

pub_name.ascxファイルの記述
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<CodeZineMVC2.Models.publishers>" %>

<span style="color:red;"><%: Model.pub_name %> </span>
  1. Homeフォルダー上のコンテキストメニューで[追加]-[ビュー]と選択し、表示される[ビューの追加ダイアログ]で、以下の表同様に項目を入力し、[追加]ボタンを押す
Listビューの追加
ビュー名 List
部分ビュー(.ascx)を作成する チェック無
厳密に型指定されたビューを作成する チェック有
ビュー データ クラス プロジェクト名.Models.publishers
ビュー コンテンツ List
  1. Listビューの一部を下記に修正
pub_name.ascxファイルの記述
<%--修正前--%>
<%: item.pub_name %>
<%--修正後--%>
<%= Html.DisplayFor(c => item, "pub_name") %>

 DisplayForメソッドの第1パラメタにモデルを使用したラムダ式を、第2パラメタに部分ビューの名前を設定します。これにより、pub_nameの要素は部分ビューでレンダリングされます。

  1. コントローラーの設定を行う

 HomeController内に下記のActionResultメソッドを記述します。

HomeController.csファイルの記述
public ActionResult List()
{
    PUBSEntities pubs = new PUBSEntities();

    var publist = from p in pubs.publishers
                  select p;

    return View(publist);
}

 処理内容はEDMのエンティティの値をそのままビューページに渡しています。

 ここまでの設定完了後に、実行すると図6のように表示されます。

DisplayForModelメソッドの使用方法

 続いて、DisplayForModelメソッドの使い方について説明します。

  1. DisplayTemplatesフォルダー上のコンテキストメニューで[追加]-[ビュー]と選択し、表示される[ビューの追加ダイアログ]で、以下の表同様に項目を入力し、[追加]ボタンを押す
DetailsModel部分ビューの追加
ビュー名 DetailsModel
部分ビュー(.ascx)を作成する チェック有
厳密に型指定されたビューを作成する チェック有
ビュー データ クラス プロジェクト名.Models.publishers
ビュー コンテンツ Details

 ビュー コンテンツを選択すると、部分ビュー内にビューページ同様のHTMLとHTMLヘルパーメソッドが記述されますので特に追記/修正は行いません。

  1. Homeフォルダー上のコンテキストメニューで[追加]-[ビュー]と選択し、表示される[ビューの追加ダイアログ]で、以下の表同様に項目を入力し、[追加]ボタンを押す
Detailsビューの追加
ビュー名 Details

部分ビュー(.ascx)を作成する

チェック無
厳密に型指定されたビューを作成する チェック有
ビュー データ クラス プロジェクト名.Models.publishers
ビュー コンテンツ Details
  1. Detailsビューにコメントアウトと追記の修正を行う

 部分ビュー内にビューページ同様のHTMLとHTMLヘルパーメソッドが記述されますので、<asp:Content />内の要素をコメントアウトします(冒頭のh2タグのみ残してもOKです)。

 続いて、DisplayForModelメソッドの記載です。

HomeController.csファイルの記述
<%: Html.DisplayForModel("DetailsModel") %>

 概要部分で記載しましたが、DisplayForModelメソッドは既定でビューページのモデルを部分ページに渡します。第一パラメタに部分ビューの名前を設定します。

  1. コントローラーの設定を行う

 HomeController内に下記のActionResultメソッドを記述します。

HomeController.csファイルの記述
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アプリケーションのアクセントに成り得るので、汎用的な表示などでは積極的に利用しましょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ASP.NET MVC 2入門

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト ナオキ(ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5