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

.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」のようなアドレスでアクセスした結果、上のような結果が得られれば、マスター・ページは正しく動作している（ポート番号の部分は環境によって異なる）。

利用可能バージョン：.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メールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日月間

＠IT