.NET TIPS

[ASP.NET MVC]ASP.NET MVCでマスター・ページを適用するには?[3.5、C#、VB]

山田 祥寛
2010/01/07

 ASP.NETでは、ヘッダやフッタ、サイド・メニューなどなど、サイト共通のレイアウトをテンプレートとして用意しておき、コンテンツ部分だけをページ単位に切り替えるための仕組みを提供している。そう、ASP.NETを利用している方であれば、恐らくほとんどの方が知っているであろうマスター・ページの機能である。

 マスター・ページはASP.NETに導入されてからすでに多くの時間がたっているのと、その大きな有用性から、常用している、すでに手放せないという読者も少なくないはずだ。そして、うれしいことに、このマスター・ページの機能はASP.NET MVCでもASP.NETとほとんど同じ要領で利用できるようになっている。本稿では、その具体的な方法について紹介する。

* マスター・ページそのものについては、「TIPS:[ASP.NET]サイト共通のヘッダ/フッタを一元管理するには?」を参照。

 なお、本サンプル・プログラムを動作させるに当たっては、「連載:ASP.NET MVC入門 第1回 ASP.NET MVCフレームワーク 基本のキ」で紹介した手順に従って、ASP.NET MVCをインストールし、また、「ASP.NET MVC Web Application」プロジェクトを作成しておく必要がある。

1. マスター・ページを作成する

 マスター・ページを新規に作成するには、ソリューション・エクスプローラから「/Views/Shared」フォルダを右クリックし、表示されたコンテキスト・メニューから[追加]−[新しい項目]を選択する。

[新しい項目の追加]ダイアログ
マスター・ページのテンプレートを追加する。
  「MVC View Master Page」テンプレートを選択。
  「MyApp.master」と入力。

 [新しい項目の追加]ダイアログが表示されるので、画面の要領で必要な情報を入力して、[追加]ボタンをクリックする。テンプレート欄には、このほかにも「マスタ ページ」「入れ子にされたマスタ ページ」テンプレートが存在するが、こちらは従来のASP.NETから利用するためのマスター・ページであるので、間違えないよう注意されたい。

 なお、本稿ではマスター・ページを、共有ビューを格納するための「/Views/Shared」フォルダに作成しているが、(必要であれば)ほかのフォルダに保存しても構わない。ただし、後々にアクション・メソッドからマスター・ページを操作する場合には追加のコードが必要になるなど、面倒の元でもある。基本は、マスター・ページは「/Views/Shared」フォルダに配置する、と覚えておくのがよいだろう。

2. マスター・ページを編集する

 自動生成されたマスター・ページがコード・エディタ上で開くので、以下の要領で必要最低限のコードを追加しておこう(追記部分は太字で表している)。

<%@ Master Language="VB" Inherits="System.Web.Mvc.ViewMasterPage" %> 

<!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 runat="server">
  <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
  <asp:ContentPlaceHolder ID="ScriptCssContent" runat="server">
  </asp:ContentPlaceHolder> 
</head>
<body>
<div>
  <img src="http://www.wings.msn.to/image/wings.jpg"
      alt="WINGSプロジェクト" />
  <hr />
  <asp:ContentPlaceHolder ID="MainContent" runat="server">
  </asp:ContentPlaceHolder>
  <hr />
  Presented By WINGS Project, 2010 -
</div>
</body>
</html>
ASP.NET MVC対応のマスター・ページ(MyApp.master)

 ASP.NETのマスター・ページを利用したことがある方ならば、「ASP.NET MVCだからといって特別なことはほとんどない」ことがお分かりいただけるだろう。あえていうならば、マスター・ページがMasterPageクラス(System.Web.UI名前空間)ではなくViewMasterPageクラス(System.Web.Mvc名前空間)を継承している点が異なるが()、これはもともとのテンプレートに含まれる部分なので、アプリケーション開発者が特に意識する必要はないはずだ。

 コンテンツの埋め込み先も、ASP.NET同様、ContentPlaceHolderコントロールで表すことができる。デフォルトでは、「TitleContent」(ページ・タイトルの置き場所)、「MainContent」(ページ本体)が配置されているので、通常はそのままで構わない。本稿では、これらに加えて、もう1つ、「ScriptCssContent」というID名でContentPlaceHolderコントロールを配置してみた()。

 「ScriptCssContent」は、スクリプト・ファイルやスタイルシートをインポートするための<script>/<link>タグを埋め込むための用途を想定している。本来、スクリプト・ファイルやスタイルシートはマスター・ページの側でインポートしておくべきであるが、ページ固有で利用するスクリプトなどもあるだろう。このようなものは、必要なページでのみインポートするのが望ましい。

3. アクション・メソッドを作成する

 コントローラ・クラス、アクション・メソッドの作成方法については、前述の記事で示しているので、そちらを参照していただきたい。ここでは、マスター・ページを呼び出すために、最低限、ビュー・スクリプトを呼び出しているだけのアクションであるので、特筆すべき点はない。コードだけを示しておく。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MvcAppCs.Controllers {
  public class MasterController : Controller {
    public ActionResult Index() {
      return View();
    }
  }
}
Public Class MasterController
  Inherits System.Web.Mvc.Controller

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

End Class
マスター・ページをテストするためのアクション・メソッド(上がMasterController.cs、下がMasterController.vb)

4. マスター・ページ対応のビュー・スクリプトを作成する

 Master/Indexアクションに対応するビュー・スクリプトを作成するには、コード・エディタ上でIndexメソッドにマウス・カーソルを合わせた状態で右クリックし、表示されたコンテキスト・メニューから[Add View]を選択すればよい。

[Add View]ダイアログ
ビューを追加して、マスター・ページと関連付ける。
  ビュー名を指定。
  マスター・ページのパスを指定。
  ページ本体を表すContentPlaceHolderコントロールのID値を指定。

 [Add View]ダイアログが表示されるので、画面の要領で必要な情報を入力してほしい。マスター・ページに関係するのは、[Select master page]チェック以降の部分である。[Select master page]欄にチェックを付けて、適用するマスター・ページのパスを指定する。[ContentPlaceHolder ID]欄には、ページ本体を表すContentPlaceHolderコントロールのID値を指定する。マスター・ページを作成した後、自分でID値を変更していなければ、この値はそのままで問題ない。

5. ビュー・スクリプトを編集する

 自動生成されたビュー・スクリプトがコード・エディタ上で開くので、以下の要領で必要最低限のコードを追加しておこう(追記部分は太字で表している)。

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/MyApp.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
  マスター・ページ
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

  <h2>マスター・ページは正しく動作しています。</h2>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptCssContent" runat="server"></asp:Content>
マスター・ページを適用したビュー・スクリプト(Views/Master/Index.aspx)

 コードを見ても分かるように、ビュー・スクリプトの側も取り立てて従来のASP.NETと変わるところはない。必要なコンテンツは、Contentコントロールの配下に記述することができる。

 ここではマスター・ページの最低限の動作を確認するのが目的であるので、タイトル(TitleContent)とページ本体(MainContent)に文字列をセットし、「ScriptCssContent」については空のままとしておく。

 以上の手順を終えたら、サンプルの動作を確認してみよう。

マスター・ページを適用したビュー・スクリプト

 「http://localhost:4419/Master/Index」のようなアドレスでアクセスした結果、上のような結果が得られれば、マスター・ページは正しく動作している(ポート番号の部分は環境によって異なる)。End of Article

利用可能バージョン:.NET Framework 3.5
カテゴリ:Webフォーム 処理対象:ASP.NET MVC
関連TIPS:[ASP.NET]サイト共通のヘッダ/フッタを一元管理するには?

この記事と関連性の高い別の.NET TIPS
[ASP.NET]サイト共通のヘッダ/フッタを一元管理するには?
[ASP.NET]コンテンツ・ページからマスター・ページの情報に簡単にアクセスするには?
[ASP.NET]ページのタイトルやメタ情報を動的に変更するには?
[ASP.NET]サイトマップ・データを非階層コントロールに表示するには?
[ASP.NET]ナビゲーションAPIで前後ページへのナビゲーション・バーを作成するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH