Share via

ステップ 7 ハンズオン:ASP.NET 2.0 Web サイトナビゲーションの実装 その 1

  • [アーティクル]

ナビゲーション コントロールの利用

グローバル ナレッジ ネットワーク株式会社
ナレッジ ソリューション本部 鈴木和久

最終更新日 2005 年 11 月 11 日

目標 ナビゲーション コントロールを利用したサイトの利便性の向上
使用技術
  • ASP.NET 2.0
  • Visual Basic 2005
取り上げるトピックス
  • ASP.NET 2.0 ナビゲーション コントロール
前提知識
目次
備考  

ナビゲーション コントロールの利用

ここでは、ナビゲーション コントロールを使用してサイトの利便性を向上するための方法について説明します。

 

ページのナビゲーション情報は、サイト内の全てのページに共通に表示されるものです。そのため、マスタ ページにナビゲーション コントロールを配置します。

[Web サイト] － [新しい項目の追加] から [マスタ ページ]を選択します。
[レイアウト] － [テーブルの挿入] から 1 行 2 列のテーブルを配置し、1 行 1 列目のセルにはツールボックスのナビゲーション タブから TreeView コントロールを配置します。

ContentPlaceHolder は 1 行 2 列目に移動します。この例では、ヘッダーとフッター 用のイメージ ファイルを持つ Web ユーザー コントロールも配置しています。

マスタ ページの詳細は 「ステップ 7 ハンズオン : ASP.NET 2.0 を利用したマスタ ページによるページ テンプレートの実装 」を参考にしてください。

 

TreeView コントロールに表示する項目は、XML ドキュメントで定義することができます。

[Web サイト] - [新しい項目の追加]から[サイト マップ]を選択し、ファイル名を既定の web.sitemap として以下のような内容で項目を編集します。
XML 要素のネスト関係は TreeView の項目の階層と対応します。

Web.sitemap ファイル

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="https://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/Default.aspx" title="製品情報" description="製品情報">
        <siteMapNode url="~/Default2.aspx" title="Windows" description="Windows">
            <siteMapNode url="~/Default3.aspx" title="Windows XP" description="Windows XP" />
        </siteMapNode>
        <siteMapNode url="~/Default4.aspx" title="Office" description="Office" />
        <siteMapNode url="~/Default5.aspx" title="Windows server System" description="Windows server System" />
        <siteMapNode url="~/Default6.aspx" title="開発ツール" description="開発ツール" />
        <siteMapNode url="~/Default7.aspx" title="家庭用ソフトウェア" description="家庭用ソフトウェア" />
        <siteMapNode url="~/Default8.aspx" title="Macintosh 対応製品" description="Macintosh 対応製品" />
        <siteMapNode url="~/Default9.aspx" title="周辺機器" description="周辺機器" />
        <siteMapNode url="~/Default10.aspx" title="PC ゲーム" description="PC ゲーム" />
        <siteMapNode url="~/Default11.aspx" title="Xbox" description="Xbox" />
        <siteMapNode url="~/Default12.aspx" title="MSN" description="MSN" />
        <siteMapNode url="~/Default13.aspx" title="モバイル" description="モバイル" />
        <siteMapNode url="~/Default14.aspx" title="製品カタログ" description="製品カタログ" />
        <siteMapNode url="~/SiteMap.aspx" title="サイトマップ" description="サイトマップ"/>
    </siteMapNode>
</siteMap>

TreeView タスク メニューの[データソースの選択]から<新しいデータソース...>を選択します。
データソース構成ウィザード ダイアログから [サイト マップ] を選択すると TreeView コントロールから項目が表示されます。

 

 

 

TreeView タスク メニューの[データソースの選択]から<新しいデータソース...>を選択します。
データソース構成ウィザード ダイアログから [サイト マップ] を選択すると TreeView コントロールから項目が表示されます。

 

[Web サイト] － [新しい項目の追加]から ファイル名 Menu.xml として XML ファイルを追加し、以下の定義をします。

Menu.xml ファイル

<?xml version="1.0" encoding="utf-8" ?>
<menuitems title="Home" url="~/Default.aspx">
    <item title="お知らせ" url="~/Announce.aspx" />
    <item title="イベント" url="~/Event.aspx" />
    <item title="QA" url="~/QAlist.aspx" />
</menuitems>

メニューとして表示する項目は title 属性、項目が選択された時にアクセスするページの URL は、url 属性として定義します。

 

SiteMapPath コントロールと同じ行に Menu コントロールを配置するためにテーブルを利用します。

[レイアウト] - [テーブルの挿入]から 1 行 4 列のテーブルを配置し、1 行 1 列目のセルに SiteMapPath コントロールを移動し、1 行 2 列目のセルに Menu コントロールを配置します。

Menu タスク メニューの [データソースの選択] から <新しいデータソース...> を選択して、データソースの選択 ダイアログから [XML ファイル] を選び、Menu.xml ファイルを指定します。

 

Menu タスク メニューの [MenuItem Databindings の編集] からメニュー DataBindings エディタを表示し、XML ファイルで定義した属性とメニュー 項目との対応を定義します。

XML ファイルの title 属性を TextField に、url 属性を NavigateUrlField に対応させます。

 

 

以上で、ナビゲーション コントロールを使用したページが作成できます。

次に、 『XML ファイルを利用したメニュー操作』 について説明します。

 

ページのトップへ