ASP.NET EC のホームへ戻る

■マスタページ

 

「ドットネット書店」では、Webページにツリー型メニューと水平型メニューを常時表示します。ツリー型メニューには、書籍のジャンルがツリー構造で表示されます。メニューからジャンルを選択すると関連する書籍が表示されます。水平型メニューには、「ホーム」、「書籍検索」、「買い物かご」などのメニュー項目が表示されます。

 

すべてのWebページにメニューを常時表示させるには、ASP.NET 2.0で追加されたマスタページを利用します。ASP.NET 1.1で同等機能を実現するにはユーザーコントロールを利用しますが、マスタページを利用すると保守性が格段に向上します。

 

●マスタページ作成

 

マスタページは、ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、テンプレートから[マスタページ]を選択して作成します。「ドットネット書店」のマスタページ(MasterPage.master)は、2x2の表を作成して4個のセルに分離しています。1行目の左側のセルには、LoginViewコントロールを配置して[ログイン][ログアウト]のリンクを表示させます。1行目の右側のセルには、本システムのタイトル「ドットネット書店」を配置しています。

 

2行目の左側のセルには、TreeViewコントロールを配置してツリー型メニューを表示します。2行目の右側のセルの上段には、Menuコントロールを配置して水平型メニューを表示します。下段には、ContentPlaceHolderコントロールを配置します。ContentPlaceHolderには、マスタページを参照しているWebページのコンテンツが挿入されます。

 

図2:マスタページをデザインビューで表示 (MasterPage.master)

fig2

 

 

●水平型メニュー

 

水平型メニューを表示するには、サイトマップファイル(Web.sitemap)にメニューの構成を格納して、SiteMapDataSourceコントロールとMenuコントロールを配置します。サイトマップファイルは、プロジェクトの右クリックから[新しい項目の追加]を選択してテンプレートから[サイトマップ]を選択して作成します。

 

水平型のメニューを表示するには、SiteMapDataSourceShowStartingNodeプロパティに「False」を設定します。さらに、MenuOrientationプロパティに「Horizontal」を設定します。MenuDataSourceIDプロパティにSiteMapDataSourceIDを設定するとサイトマップファイルがバインドされて水平型メニューが表示されます。なお、SiteMapDataSourceは自動的にサイトマップファイルWeb.sitemapを関連付けします。

 

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"

  ShowStartingNode="False" />

<asp:Menu ID="Menu1" runat="server"

  DataSourceID="SiteMapDataSource1" />

 

Web.sitemapファイルの内容

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

  <siteMapNode url="" title="">

    <siteMapNode url="~/Default.aspx" title="ホーム" … />

    <siteMapNode url="~/SearchBooks.aspx" title="書籍検索"… />

    <siteMapNode url="~/ShoppingCart.aspx" title="買い物かご"… />

    <siteMapNode url="~/Faq.aspx" title="問い合わせ"… />

    <siteMapNode url="~/CompanyInfo.aspx" title="会社案内"… />

    <siteMapNode url="~/Admin/Admin.aspx" title="サイト管理"… />

    <siteMapNode url="http://blog.friendlysw.com/" title="私のブログ" roles="*"… />

  </siteMapNode>

</siteMap>

 

MenuOrientationプロパティは、App_Themesフォルダのスキンファイル(SkinFile.skin)で設定しています。スキンファイルの使い方については、後編の「テーマ/スキン」で説明します。

 

※ サイトマップの「roles="*"」属性の使い方については、後述する「セキュリティ」で説明します。

 

 

●ツリー型メニュー

 

ツリー型メニューを表示するには、TreeViewコントロールを使用します。メニューの階層は、XMLファイル(Books.xml)に保存します。XMLファイルを作成するには、App_Dataフォルダの右クリックから[新しい項目の追加]を選択して、テンプレートから[XMLファイル]を選択します。

 

XMLファイルをTreeViewに表示するには、XmlDataSourceコントロールを配置してDataFileプロパティにXMLファイルのパスを設定します。さらに、TreeViewDataSourceIDプロパティにXmlDataSourcenIDを設定してバインドします。TreeViewXMLデータの各要素を対応させるには、TreeNodeBindingDataMemberNagigateUrlFieldTextField属性にXMLデータの要素名「Genre」、「Url」、「Title」を設定します。これで、XMLファイルがツリー型メニューとして表示されます。

 

<asp:XmlDataSource ID="XmlDataSource1" runat="server"

  DataFile="~/App_Data/Books.xml">

</asp:XmlDataSource>

 

<asp:TreeView ID="TreeView1" runat="server"

  SkinID="masterPageTreeView"

  DataSourceID="XmlDataSource1">

  <DataBindings>

    <asp:TreeNodeBinding DataMember="Genre"

      NavigateUrlField="Url" TextField="Title" />

  </DataBindings>

</asp:TreeView>

 

Books.xmlファイルの内容

<Books>

  <Genre Title=".NET" Url="">

    <Genre Title="ASP.NET" Url="BooksByCategory.aspx?cat=ASP.NET" />

    <Genre Title="ADO.NET" Url="BooksByCategory.aspx?cat=ADO.NET" />

    <Genre Title="VB.NET" Url="BooksByCategory.aspx?cat=VB.NET" />

    <Genre Title="C#.NET" Url="BooksByCategory.aspx?cat=C%23.NET" />

  </Genre>

  ・・・

</Books>

 

 

XMLファイルの<Genre>要素の「Url>属性にクエリ文字列を指定するとき、「#」は特殊文字のためURLエンコードされた「%23」を記述します。「C#.NET」⇒「C%23.NET

 

 

Webフォームからマスタページを参照

 

新規Webフォームを作成してマスタページを参照させるには、プロジェクトの右クリックから[新しい項目の追加]を選択します。「新しい項目の追加」が表示されたら、テンプレートから[Webフォーム]を選択します。さらに「マスタページを参照する」をクリックしてチェックマークを付けます。[追加]ボタンをクリックすると「マスタページを選択してください」のダイアログが表示されますので[MasterPage.master]を選択して[OK]をクリックします。

 

マスタページを参照するとWebフォームの@Pageディレクティブに「MasterPageFile="~/MasterPage.master"」属性が追加されます。Webフォームの<Content>…</Content>内に記述したデータは、マスタページの<ContentPlaceHolder>…</ContentPlaceHolder>に挿入されます。

 

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"... %>

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

 ここに記述したデータがマスタページに挿入される

</asp:Content>

 

ASP.NET EC のホームへ戻る