[ ASP.NET ] マスターページとコンテンツフォームの作成 ( ContentPlaceHolder / Content )

2016年2月12日まさお Comment

ASP.NET でマスターページとコンテンツフォームを作成して Windows フォームアプリケーションのフォームの継承に近いイメージで処理を記述することができます。ここでは、マスターページ及びコンテンツフォームの作成方法について記載しています。

マスターページの作成

[ プロジェクト ]－[ 新しい項目の追加 ] からマスターページを選択すると以下のマスターページが作成されます。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無題のページ</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
        <!-- それぞれのページで記述する -->    
    </asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
        <!-- ヘッダーを定義する場合は、この位置に記述する -->
    
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
	        <!-- それぞれのページで記述する -->            
        </asp:ContentPlaceHolder>
    
        <!-- フッターを定義する場合は、この位置に記述する -->
</div>
</form>
</body>
</html>

デフォルトでは、head タグ内と body タグ内に 1箇所ずつ ContentPlaceHolder タグが作成されています。任意に追加することもできます。

マスターページは共通部分を記述するため head タグもわざわざ各ページで作成する必要はないと思うかもしれませんが、head タグ内でスタイルシートや Javascript の外部ファイルを読み込む時には各ページで必要なリソースをそれぞれ読み込むようにし、無駄なトラフィックを避けるためだと思われます。

コンテンツフォームの作成

マスターページを利用して、各ページ固有の内容のみを記述するページを ASP.NET では、Web コンテンツフォームと呼びます。 [ プロジェクト ] ― [ 新しい項目の追加 ] から Web コンテンツフォームを選択すると、以下のコンテンツフォームが作成されます。

<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication3.WebForm1" title="無題のページ" %>
         
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <!-- headタグ内の内容を記述する -->
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!-- bodyタグ内の内容を記述する -->
</asp:Content>

マスターページでは asp:ContentPlaceHolder が作成されましたが、コンテンツフォームでは、asp:Content タグが作成されます。それぞれの ContentPlaceHolderID 属性にはマスターページに作成された ContentPlaceHolder タグの ID を指定して対応付けを行っています。

マスターページのプロパティをコンテンツフォームから呼び出す

例えば、マスターページにテキストボックスコントロールを追加して、以下のようなプロパティをマスターページに作成したとします。

VB.NET

    Public Property Text() As String
        Get
            Return TextBox1.Text
        End Get
        Set(ByVal value As String)
            TextBox1.Text = value
        End Set
    End Property

    public string Text
    {
        set { TextBox1.Text = value; }
        get { return TextBox1.Text; }
    }

マスターページの準備は整いました。次はコンテンツフォームからこのプロパティを基底クラスのプロパティの感覚で呼び出せるようにします。

コンテンツフォームに MasterType ディレクティブを追加

コンテンツフォームに MasterType ディレクティブを追加します。

<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication3.WebForm1" title="無題のページ" %>
<%@ MasterType VirtualPath="~/Site1.Master" %>

これでマスターページに定義したプロパティを呼び出すことができるようになります。なお、呼び出すプロパティはメソッドは Public 宣言されている必要があります。Protected ではアクセスできません。

VB.NET

Master.Text = "テキストを設定する"

Master.Text = "テキストを設定する";

Web コンテンツフォームとマスターページの Page_Load イベント

マスターページとコンテンツフォームにはそれぞれ Page_Load イベントを追加できますが、呼び出される順番は

Web コンテンツフォームの Page_Load イベント
マスターページの Page_Load イベント

の順になります。

子マスターページ

子マスターページの作成方法は、[追加] – [新しい項目] から “入れ子にされたマスタページ” テンプレートを選択して、マスターページは親マスタページを指定します。親マスターページは先に作成しておく必要があります。なお、子マスターページを作成した時点では、コンテンツフォーム用のコンテンツプレイスホルダーが用意されていませんので、用意する必要があります。

<%@ Master Language="VB" AutoEventWireup="false" MasterPageFile="~/ParentHeader.Master" CodeBehind="ChildHeader.master.vb" Inherits="WebApplication1.ChildHeader" %>

<asp:Content ID="ChildContent" ContentPlaceHolderID="ChildHeader" runat="server">
    <!-- 子マスターページの内容をここに記述する -->
    I am Child Master Page Header

    <!-- 各コンテンツを記述するコンテンツプレイスホルダーを用意する -->
    <!-- 自動作成されないので、追記する -->
    <asp:ContentPlaceHolder ID="Content" runat="server">
                
    </asp:ContentPlaceHolder>
</asp:Content>