マスター ページ

作成者: Microsoft

成功した Web サイトの重要なコンポーネントの 1 つは、一貫した外観です。 ASP.NET 1.x では、開発者はユーザー コントロールを使用して、Web アプリケーション全体で共通のページ要素をレプリケートしました。 これは確かに実行可能なソリューションですが、ユーザー コントロールを使用するといくつかの欠点があります。 たとえば、ユーザー コントロールの位置を変更するには、サイト全体で複数のページを変更する必要があります。 ユーザー コントロールは、ページに挿入された後もデザイン ビューにレンダリングされません。

成功した Web サイトの重要なコンポーネントの 1 つは、一貫した外観です。 ASP.NET 1.x では、開発者はユーザー コントロールを使用して、Web アプリケーション全体で共通のページ要素をレプリケートしました。 これは確かに実行可能なソリューションですが、ユーザー コントロールを使用するといくつかの欠点があります。 たとえば、ユーザー コントロールの位置を変更するには、サイト全体で複数のページを変更する必要があります。 ユーザー コントロールは、ページに挿入された後もデザイン ビューにレンダリングされません。

ASP.NET 2.0 では、一貫した外観を維持する方法としてマスター ページが導入されており、すぐに表示されるように、マスター ページはユーザーコントロールメソッドよりも大幅に改善されています。

マスター ページの理由

ASP.NET 2.0 でマスター ページが必要だった理由を疑問に思うかもしれません。 結局のところ、Web サイト開発者は既に ASP.NET 1.x のユーザー コントロールを使用して、ページ間でコンテンツ領域を共有しています。 ユーザー コントロールが一般的なレイアウトを作成するための最適でないソリューションである理由はいくつかあります。

ユーザー コントロールは、実際にはページ レイアウトを定義しません。 代わりに、ページの一部のレイアウトと機能を定義します。 これら 2 つの違いは、ユーザー コントロール ソリューションの管理がはるかに困難になるため重要です。 たとえば、ページ上のユーザー コントロールの位置を変更する場合は、ユーザー コントロールが表示される実際のページを編集する必要があります。 ページ数が少ない場合は問題ありませんが、大規模なサイトでは、すぐにサイト管理の悪夢になります。

共通レイアウトを定義するためにユーザー コントロールを使用するもう 1 つの欠点は、ASP.NET 自体のアーキテクチャに根ざしています。 ユーザー コントロールのパブリック メンバーが変更された場合は、ユーザー コントロールを使用するすべてのページを再コンパイルする必要があります。 さらに、ASP.NET は、最初にアクセスされたときにページを再 JIT します。 これは、もう一度、大規模なサイトのスケーラブルでないアーキテクチャとサイト管理の問題を生成します。

これらの問題 (およびそれ以上) の両方が、ASP.NET 2.0 のマスター ページによってうまく対処されています。

マスター ページのしくみ

マスター ページは、他のページのテンプレートに似ています。 他のページ間で共有する必要があるページ要素 (メニュー、罫線など) がマスター ページに追加されます。 サイトに新しいページを追加すると、マスター ページに関連付けることができます。 マスター ページに関連付けられているページは、 コンテンツ ページと呼ばれます。 既定では、コンテンツ ページはマスター ページから外観を取得します。 ただし、マスター ページを作成する場合は、コンテンツ ページが独自のコンテンツに置き換えることができるページの一部を定義できます。 これらの部分は、ASP.NET 2.0 で導入された新しいコントロールを使用して定義されます。 ContentPlaceHolder コントロール。

マスター ページには、任意の数の ContentPlaceHolder コントロールを含めることができます (またはまったく含められません)。コンテンツ ページでは、ContentPlaceHolder コントロールのコンテンツが Content コントロール内に表示されます。 これは 、ASP.NET 2.0 の別の新しいコントロールです。 既定では、コンテンツ ページのコンテンツ コントロールは空であるため、独自のコンテンツを提供できます。 コンテンツ コントロール内のマスター ページのコンテンツを使用する場合は、このモジュールの後半で説明するように使用できます。 Content コントロールは、Content コントロールの ContentPlaceHolderID 属性を使用して ContentPlaceHolder コントロールにマップされます。 次のコードは、Content コントロールをマスター ページの mainBody と呼ばれる ContentPlaceHolder コントロールにマップします。

<asp:Content ID="Content1" ContentPlaceHolderID="mainBody" Runat="Server">

Note

多くの場合、マスター ページが他のページの基本クラスであると説明されているのが聞こえます。 これは実際には当てはまりません。 マスター ページとコンテンツ ページの間のリレーションシップは、継承の 1 つではありません。

図 1 は、Visual Studio 2005 に表示されるマスター ページと関連するコンテンツ ページを示しています。 マスター ページの ContentPlaceHolder コントロールと、コンテンツ ページ内の対応する Content コントロールを確認できます。 ContentPlaceHolder の外部にあるマスター ページのコンテンツは表示されますが、コンテンツ ページでは淡色表示されます。 ContentPlaceHolder 内のコンテンツのみをコンテンツ ページでサポートできます。 マスター ページから取得される他のすべてのコンテンツは変更できません。

図 1: マスター ページとそれに関連付けられているコンテンツ ページ

マスター ページの作成

新しいマスター ページを作成するには:

1. Visual Studio 2005 を開き、新しい Web サイトを作成します。
2. [ファイル]、[新規作成]、[ファイル] の順にクリックします。
3. 図 2 に示すように、[新しい項目の追加] ダイアログから [マスター ファイル] を選択します。
4. [追加] をクリックします。

図 2: 新しいマスター ページの作成

マスター ページのファイル拡張子は .master であることに注意してください。 これは、マスター ページが通常のページと異なる方法の 1 つです。 もう 1 つの主な違いは、ディレクティブの @Page 代わりに、マスター ページに ディレクティブが含まれていることです @Master 。 先ほど作成したマスター ページのソース ビューに切り替えて、コードを確認します。

新しいマスター ページには、既定で 1 つの ContentPlaceHolder コントロールがあります。 ほとんどの場合、最初に共通のページ要素を作成してから、カスタム コンテンツが必要な ContentPlaceHolder コントロールを挿入する方が理にかなっています。 このような場合、開発者は既定の ContentPlaceHolder コントロールを削除し、ページの開発時に新しいコントロールを挿入します。 ContentPlaceHolder コントロールは、サイズ変更ハンドルを表示するにもかかわらず、サイズ変更できません。 ContentPlaceHolder コントロールは、1 つの例外を除いて、コンテンツに基づいて自動的にサイズを設定します。テーブル セルなどのブロック要素の内部に ContentPlaceHolder コントロールを配置すると、要素のサイズに応じてサイズが変更されます。

ラボ 1 マスター ページの操作

このラボでは、新しいマスター ページを作成し、3 つの ContentPlaceHolder コントロールを定義します。 次に、新しい [コンテンツ] ページを作成し、ContentPlaceHolder コントロールの少なくとも 1 つのコンテンツを置き換えます。

1. マスター ページを作成し、ContentPlaceHolder コントロールを挿入します。

   1. 前述のように、新しいマスター ページを作成します。
   2. 既定の ContentPlaceHolder コントロールを削除します。
   3. コントロールの網かけの上罫線をクリックして ContentPlaceHolder コントロールを選択し、キーボードの DEL キーを押して削除します。
   4. 図 3 に示すように、 ヘッダーとサイド テンプレートを使用して新しいテーブルを挿入します。 テーブル全体がデザイナーに表示されるように、幅と高さをそれぞれ 90% に変更します。

図 3

1. テーブルの各セルにカーソルを置き、 valign プロパティを top に設定します。
2. ツールボックスから、テーブルの上部セル (ヘッダー セル) に ContentPlaceHolder コントロールを挿入します。
3. この ContentPlaceHolder コントロールを挿入すると、図 4 に示すように、行の高さがページ全体を占めます。 この時点で心配しないでください。

図 4: 空の領域は ContentPlaceHolder と同じセル内にある

1. ContentPlaceHolder コントロールを他の 2 つのセルに配置します。 他の ContentPlaceHolder コントロールが挿入されたら、表のセルのサイズは想定どおりにする必要があります。 このページは 、図 5 に示されているページのようになります。

図 5: すべての ContentPlaceHolder コントロールを持つマスター シェイプ。 ヘッダー セルのセルの高さが、現在のヘッダー セルの高さであることに注意してください

1. 3 つの ContentPlaceHolder コントロールのそれぞれに任意のテキストを入力します。
2. マスター ページを exercise1.master として保存します。
3. 新しい Web フォームを作成し、exercise1.master マスター ページに関連付けます。
4. Visual Studio 2005 で [ファイル]、[新規作成]、[ファイル] の順に選択します。
5. [新しい項目の追加] ダイアログで [ Web フォーム ] を選択します。
6. 図 6 に示すように、[マスター ページの選択] チェック ボックスがオンになっていることを確認します。

図 6: 新しいコンテンツ ページの追加

1. [追加] をクリックします。
2. 図 7 に示すように、[マスター ページの選択] ダイアログで [exercise1.master] を選択します。
3. [OK] をクリックして、新しいコンテンツ ページを追加します。

Visual Studio に新しいコンテンツ ページが表示され、マスター ページの ContentPlaceHolder コントロールごとに 1 つのコンテンツ コントロールが表示されます。 既定では、コンテンツ コントロールは空であるため、独自のコンテンツを追加できます。 マスター ページの ContentPlaceHolder コントロールのコンテンツを使用する場合は、スマート タグ記号 (コントロールの右上隅にある小さな黒い矢印) をクリックし、図 8 に示すように、スマート タグから [既定のマスター コンテンツ] を選択します。 この操作を行うと、メニュー項目が [ カスタム コンテンツの作成] に変わります。 その時点でクリックすると、マスター ページからコンテンツが削除され、その特定のコンテンツ コントロールのカスタム コンテンツを定義できます。

図 7: コンテンツ コントロールを既定のマスター ページ コンテンツに設定する

マスター ページとコンテンツ ページの接続

マスター ページとコンテンツ ページの関連付けは、次の 4 つの方法のいずれかで構成できます。

• ディレクティブの @PageMasterPageFile 属性
• コードで Page.MasterPageFile プロパティを設定する。
• アプリケーション構成ファイルの pages> 要素 (アプリケーションのルート フォルダーにweb.config)<
• サブフォルダー構成ファイル内の pages> 要素 (サブフォルダー内のweb.config)<

MasterPageFile 属性

MasterPageFile 属性を使用すると、特定の ASP.NET ページにマスター ページを簡単に適用できます。 また、演習 1 で行ったように、[マスター ページの選択] チェック ボックスをチェックするときにマスター ページを適用するために使用する方法でもあります。

コードでの Page.MasterPageFile の設定

コードで MasterPageFile プロパティを設定すると、実行時に特定のマスター ページをコンテンツに適用できます。 これは、ユーザー ロールまたはその他の条件に基づいて特定のマスター ページを適用する必要がある場合に便利です。 MasterPageFile プロパティは、PreInit メソッドで設定する必要があります。 PreInit メソッドの後に設定すると、InvalidOperationException がスローされます。 このプロパティを設定するページには、ページの最上位コントロールとして Content コントロールも必要です。 それ以外の場合、MasterPageFile プロパティが設定されると、HttpException がスローされます。

pages> 要素の<使用

web.config ファイルの pages 要素で masterPageFile 属性を設定することで、 <ページのマスター ページ> を構成できます。 このメソッドを使用する場合は、アプリケーション構造の下位にあるweb.configファイルがこの設定をオーバーライドできることに注意してください。 ディレクティブに @Page 設定された MasterPageFile 属性も、この設定をオーバーライドします。 pages 要素を<使用すると、特定のフォルダーまたはファイルで必要に応じてオーバーライドできるマスター マスター ページを簡単に作成できます。>

マスター ページのプロパティ

マスター ページでは、これらのプロパティをマスター ページ内でパブリックにするだけで、プロパティを公開できます。 たとえば、次のコードでは、SomeProperty という名前のプロパティを定義しています。

private string _SomeProperty; public string SomeProperty { get { return _SomeProperty; } set { _SomeProperty = value; } }

[コンテンツ] ページから SomeProperty プロパティにアクセスするには、Master プロパティを次のように使用する必要があります。

void Page_Load() { Master.SomeProperty = "Master Page Property"; }

マスター ページの入れ子

マスター ページは、大規模な Web アプリケーション全体で共通の外観を確保するための最適なソリューションです。 ただし、大きなサイトの特定の部分が共通のインターフェイスを共有し、他のパーツが異なるインターフェイスを共有することは珍しくありません。 そのニーズに対応するために、複数のマスター ページが最適なソリューションです。 ただし、それでも、大規模なアプリケーションには、すべてのページとサイトの特定のセクション間でのみ共有される他のコンポーネント間で共有される特定のコンポーネント (メニューなど) が存在する可能性があるという事実は解決されません。 この種の状況では、入れ子になったマスター ページがニーズをうまく満たします。 ご覧のように、通常のマスター ページはマスター ページとコンテンツ ページで構成されています。 入れ子になったマスター ページの状況では、2 つのマスター ページがあります。親マスターと子マスター。 子マスター ページもコンテンツ ページであり、そのマスター ページは親マスター ページです。

一般的なマスター ページのコードを次に示します。

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="parent.master.cs" Inherits="parent" %> <!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>Typical Master Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="MainMenuContent" runat="server" /> </div> </form> </body> </html>

入れ子になったマスター シナリオでは、これは親マスターになります。 別のマスター ページでは、このページがマスター ページとして使用され、そのコードは次のようになります。

<%@ Master Language="C#" MasterPageFile="~/parent.master" AutoEventWireup="true" CodeFile="child.master.cs" Inherits="child" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainMenuContent" Runat="Server"> <span>From the Child Master.</span> <asp:contentplaceholder id="ChildPlaceHolder1" runat="server" /> </asp:Content>

このシナリオでは、子マスターは親マスターのコンテンツ ページでもあります。 子マスターのコンテンツはすべて、親の ContentPlaceHolder コントロールからコンテンツを取得する Content コントロール内に表示されます。

Note

Designerのサポートは、入れ子になったマスター ページでは使用できません。 入れ子になったマスターシェイプを使用して開発する場合は、ソース ビューを使用する必要があります。

このビデオでは、入れ子になったマスター ページを使用するチュートリアルを示します。

ビデオFull-Screen開く

図 8: マスター ページの選択