ASP.NET 2.0のマスターページの詳細説明

著者：Eve Cole 更新時間：2009-06-30 16:37:05

Web デザイン中に 1 ページを変更するときにサイト全体が変更されるという問題を軽減するために、vs2003 から vs2005 にアップグレードされた後、マスターの概念が追加されました。

これを「Web ページテンプレート」と考えることができます。違いは、すべてのページを変更すると、すべての Web ページが完全に変更されるということです。

簡単なマスター使用法のデモから始めましょう。

1. まず Visual Studio 2005 を開き、新しい asp.net Web サイト、ファイルシステム、C# を作成します。

2. ソリューションエクスプローラーで右クリックして新しい項目を作成します。

3. マスターページを選択します。

4. MasterPage.master を開くと、中に contentplaceholder コントロールがあります。コントロールには何も書き込まないように注意してください。

デザインビューに移動し、このコントロールの外側にヘッダーとフッターのテキストを追加します。

5. 保存後、それを使用して他のページを作成できます。 2 つの方法があります。 1. マスターページの任意の場所を右クリックし、[コンテンツページの追加] をクリックします。 2. aspx ページの生成時に、ソリューションエクスプローラーで新しい項目を作成し、[マスターページの選択] をオンにします。

6. 対応するマスターページを選択します

7. 新しく生成されたページのソースコードには、次の数文だけが含まれています。

＜%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
CodeFile="Default2.aspx.cs"Inherits="Default2"Title="UntitledPage"%>
<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">
</asp:Content>

コンテンツコントロールが表示されます。これはマスターページの ContentPlaceHolder1 コントロールに対応し、ビューページに変換されます。

8. ヘッダーとフッターのテキストは灰色であり、コンテンツ内でのみ編集できます。

保存後、default2.aspx ページにアクセスし、F5 キーを押すと、次のページが表示されます。

9. 予想どおり、ソースコードを見てみましょう。

＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜htmlxmlns="http://www .w3.org/1999/xhtml">
<head><title>
UntitledPage
</title></head>
<body>
<formname="aspnetForm"method="post"action="Default2.aspx"id="aspnetForm ">
<div>
<inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/>
</div>
<div>
thisisthepage'sheader<br/>
thisisthepage'scontent:hello,world!<br/>
thisisthepage'sfooter </div>
</form>
</body>
＜/html＞

マスターコンテンツは div に配置されますが、コンテンツページは別の div に配置されません。つまり、マスターのサブページに冗長なコードが追加されません。これにより、プログラミングと Web ページのレイアウトに大きな柔軟性がもたらされ、CSS+DIV の配置を最大限に活用できるようになり、テーブルの配置も使用できるようになります。修正する場合、すべてのページを修正する必要はありません。

10. 固定コンテンツではないマスターの場合、レイアウトに複数の ContentPlaceHolder1 を使用できます。次の例では、テーブルを配置に使用します。

11. 対応するサブページには 2 つのコンテンツがあります。

生成されたコード:

＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜htmlxmlns="http://www .w3.org/1999/xhtml">
<head><title>
UntitledPage
</title></head>
<body>
<formname="aspnetForm"method="post"action="Default3.aspx"id="aspnetForm ">
<div>
<inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
value="/wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU="/>
</div>
<div>
thisisthepage'sheader<br/>
<table>
<tr>
<td>
ohmyContent1
</td>
<td>
hisyContent2
</td>
</tr>
< /table>
thisisthepage'sfooter 
</div>
</form>
</body>
</html>

12. 柔軟に使用します。CSS は DIV を使用してこの問題を解決することもできますが、一部の非標準コントロールの外観を CSS で制御するのは困難です。MasterPage2.master という別のマスターを作成する場合は、次のような中程度の動的設定を行うことができます。

protected void Page_PreInit(オブジェクト送信者、EventArgs e)
{
MasterPageFile = "~/MasterPage2.master";
}

まずはここからです。ネストしたアプリケーションも使えるとのことですが、今回はこれで十分ですので、次回のテーマと合わせてお話しましょう。