以前、USERS GROUP で使おうと思っていると書いた MasterPages のコンポーネントに関する解説です。実際に動いているものを後ほど原水商店に用意をしておきます。

MasterPages コンポーネント

Visual Studio .NET 2003 を使っていると非常に簡単に記述することができます。まずは、MetaBuilder から MasterPages のコンポーネント?をダウンロードしてください。ダウンロードした Zip ファイルを解凍して MetaBuilders.WebControls.MasterPages.dll を bin フォルダにコピーし、メニューの「プロジェクト」-「参照の追加」を設定して DLL ファイルを指定してください。

テンプレートコンポーネントの準備

次に、テンプレートになるコンポーネントを用意します。テンプレートとしては2つのタイプを設定することができますので使い方はある程度考えたほうが良いです。2つのタイプというのは、大枠の全体に対して適用するテンプレートと、階層化をしてテンプレートを作るものの2つになります。

マスターテンプレートのサンプルコード

マスターのテンプレートでは、コンポーネントを呼び出すのと HTML のコードを記述する程度で問題ありません。ポイントは mp のタグの記述方法のみです。ここではファイル名を templates.ascx とします。

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="templates.ascx.cs" Inherits="MasterPages.templates" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<%@ Register TagPrefix="mp" Namespace="MetaBuilders.WebControls.MasterPages" Assembly="MetaBuilders.WebControls.MasterPages" %>
<mp:nobugform runat="server" ID="Nobugform1">
        <h1>この部分はヘッダーとして表示する項目になります</h1>
        <p>メインメニューなどを作ってすべてのページで表示するものを入れるといいでしょう。</p>
        <hr>
        <mp:region id="BasicContent" runat="server">Default Content</mp:region>
        <hr>
        <p>この部分はフッタとして表示することになります。</p>
</mp:nobugform>

マスターテンプレートを使ったページ

上記のテンプレートを使う場合は以下のようにコンポーネントを呼び出す形でできます。ファイル名としては、masterpate.aspx とします。

<%@ Page language="c#" Codebehind="masterpage.aspx.cs" AutoEventWireup="false" Inherits="MasterPages.WebForm1" %>
<%@ Register TagPrefix="mp" Namespace="MetaBuilders.WebControls.MasterPages" Assembly="MetaBuilders.WebControls.MasterPages" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>MasterPages : サンプルページ1</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    </HEAD>
    <body>
        <mp:contentcontainer runat="server" id="MPContainer" MasterPageFile="templates.ascx">
        <mp:content id="BasicContent" runat="server">
 
            標準的なページをこのように作ることができます。サブメニューを持たせる場合は、<a href="masterpage2.aspx">もうひとつの使い方</a>のページになります。
 
        </mp:content>
        </mp:contentcontainer>
    </body>
</HTML>

contentcontainer のところにヘッダ、フッタが追加されてページが表示されるようになります。

サブとなるテンプレートのサンプル

このテンプレートを若干カスタマイズしたテンプレートを作ることができます。基本的には、テンプレートがテンプレートを呼び出すという形での記述方法になります。以下のように2つ目のテンプレートのコードを紹介します。ファイル名としては、subtemplates.ascx にして作成をしました。

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="subtemplates.ascx.cs" Inherits="MasterPages.subtemplates" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<%@ Register TagPrefix="mp" Namespace="MetaBuilders.WebControls.MasterPages" Assembly="MetaBuilders.WebControls.MasterPages" %>
<mp:contentcontainer runat="server" MasterPageFile="templates.ascx" ID="Contentcontainer1">
<mp:content id="BasicContent" runat="server">
 
    <h2>階層化することができます</h2>    
    <p>サブメニューになる部分を表示するのに最適です。</p>
    <hr>
    <mp:region runat="server" Id="ComplexContent" />
    <hr>
    <p>階層化を持たせたときのフッタ</p>
</mp:content>
</mp:contentcontainer>

このコンポーネントは、マスターのテンプレートである templates.ascx を呼び出しています。そして上下に HTML のコードを追加して新しいテンプレートとして動作する形になります。

サブとなるテンプレートを使ったページ

上記のテンプレートを使う方法はそれほど違いはありません。コードを見ていただければ、違いはほぼ1箇所というのがわかると思います。

<%@ Page language="c#" Codebehind="masterpage2.aspx.cs" AutoEventWireup="false" Inherits="MasterPages.masterpage2" %>
<%@ Register TagPrefix="mp" Namespace="MetaBuilders.WebControls.MasterPages" Assembly="MetaBuilders.WebControls.MasterPages" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<html>
  <head>
    <title>MasterPages : サンプルページ2</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
  </head>
  <body MS_POSITIONING="FlowLayout">
        <mp:contentcontainer runat="server" id="MPContainer" MasterPageFile="subtemplates.ascx">
        <mp:content id="ComplexContent" runat="server">
 
            階層化させたときのページ
 
        </mp:content>
        </mp:contentcontainer>
  </body>
</html>

さて違いを見ると、呼び出しているコンポーネントが subtemplates.ascx であること、id が BasicContent ではなく ComplexContent と変更をしているだけです。つまり、テンプレートの使い方としては、どのテンプレートを指定するのかというのが異なるだけとなります。

次世代 ASP.NET では標準で強力に

実はこのような機能は次の ASP.NET では標準で提供されるだけでなく、機能が強力になります。そのあたりの記事はうにさんのページの中で説明されていますので、一度ご覧ください。

広告