Share via

チュートリアル : Web ページでのメニューの表示

  • [アーティクル]

更新 : 2007 年 11 月

このチュートリアルでは、ASP.NET Menu コントロールを Web ページに配置して設定する方法について説明します。

Web サイトの複雑さに関係なく共通する機能の 1 つに、ナビゲーション メニューがあります。Menu コントロールを ASP.NET で使用して、コードを作成せずに複雑なナビゲーション メニューを簡単に設定できます。

Menu コントロールを使用すると、複数の表示オプションを表示できます。これらのオプションには、メニューが完全に公開される静的表示、親メニュー項目にマウス ポインタを合わせるとメニューの一部が表示される動的表示などが含まれます。また、このコントロールでは静的表示モードと動的表示モードを組み合わせることができます。これにより、静的な一連のルート項目と動的に表示される子メニュー項目を同時に表示できます。

ページに静的にリンクされた ASP.NET Menu コントロールをデザイナで設定したり、これを XmlDataSource コントロールや SiteMapDataSource コントロールなどの階層構造のデータ ソースに自動的にバインドしたりできます。

このチュートリアルでは、以下のタスクを行います。

  • 基本的なメニューの作成、および静的な設定によるページへのリンク

  • Web.sitemap XML ファイルにバインドされた、より複雑なメニューの作成

  • メニューの向きの調整

  • 静的表示と動的表示の複数レベルの設定

前提条件

このチュートリアルを実行するための要件は次のとおりです。

  • Microsoft Visual Web Developer (Visual Studio)

  • .NET Framework

Web サイトの作成

チュートリアル : Visual Web Developer での基本的な Web ページの作成 の手順などを完了して Visual Web Developer で既に Web サイトを作成してある場合は、その Web サイトを使用できるので、次のセクション「基本的なメニューの作成」に進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

ファイル システム Web サイトを作成するには

  1. Visual Web Developer を開きます。

  2. [ファイル] メニューの [新しい Web サイト] をクリックします。

    [新しい Web サイト] ダイアログ ボックスが表示されます。

  3. [Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。

  4. [場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。

    たとえば、フォルダ名として「C:\WebSites」と入力します。

  5. [言語] ボックスで、作業に使用する言語をクリックします。

  6. [OK] をクリックします。

    Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。

基本的なメニューの作成

ページのメニューを作成するための最初の手順として、Menu コントロールを配置します。

  1. Default.aspx に切り替えるか、このファイルを開きます。そしてデザイン ビューに切り替えます。

  2. ツールボックスの [ナビゲーション] コントロール グループから、Menu コントロールをページにドラッグします。

この例では、メニューの方向を垂直ではなく水平にします。

  • Menu コントロールを右クリックし、[プロパティ] をクリックして、Orientation を Horizontal に設定します。

基本的なメニューの設定

ここでは、メニュー項目エディタを使用してメニュー項目を定義します。

  1. Menu コントロールを右クリックして、[メニュー項目の編集] をクリックします。

    メニュー項目エディタが表示されます。

  2. [項目] の下の [ルート項目の追加] アイコンをクリックします。

  3. 新しい項目の [プロパティ] の下で、Text を Home に設定し、NavigateURL を Default.aspx に設定します。

  4. [項目] の下の [ルート項目の追加] アイコンをクリックします。

  5. [プロパティ] の下で Text を Products に設定し、NavigateURL を Products.aspx に設定します。

  6. [項目] の下の [ルート項目の追加] アイコンをクリックします。

  7. [プロパティ] の下で Text を Services に設定し、NavigateURL を Services.aspx に設定します。

  8. [OK] をクリックします。

Default.aspx のソースを調べると、メニュー項目とリンクがコントロール内で宣言で指定されているのがわかります。

ターゲット ページを作成するには

  1. ソリューション エクスプローラで、Web サイトのルートを右クリックし、[新しい項目の追加] をクリックします。

  2. [Web フォーム] をクリックし、ファイルに Products.aspx という名前を付けて、[追加] をクリックします。

  3. 前の手順を繰り返して、Services.aspx という名前のファイルを作成します。

メニューのテスト

ページとメニューを適切な場所に配置したら、メニューをテストできます。

  1. ソリューション エクスプローラで Default.aspx をクリックし、Ctrl キーを押しながら F5 キーを押して、Default.aspx ページを実行します。

  2. 項目上にポインタを移動します。ページの下部にあるブラウザのステータス バーに (表示している場合) リンク先のページが表示されます。

  3. リンクをクリックしてそのページにジャンプします。

サイト マップにバインドされたメニューの作成

最後のセクションでは、簡単な静的メニューを作成し、ページに宣言的に設定します。このセクションでは、Menu コントロールの項目を直接編集せずに、Web.sitemap ファイルに XML データ ソースとしてコントロールをバインドします。これにより、ページを変更したりデザイナを使用したりしなくても簡単に更新できる、独立した XML ファイル内で Menu コントロールの構造を維持できます。

この例では、2 つ目の Menu コントロールを使用します。

2 つ目の Menu コントロールを作成するには

  • ツールボックスの [ナビゲーション] グループから、2 つ目の Menu コントロールを Default.aspx ページにドラッグします。

次に、バインド先の Web.sitemap ファイルが必要になります。

サイト マップ ファイルを作成するには

  1. ソリューション エクスプローラで、Web サイトのルートを右クリックし、[新しい項目の追加] をクリックします。

  2. [新しい項目の追加 <Websitename>] ダイアログ ボックスの [サイト マップ] をクリックします。

  3. [追加] をクリックします。

  4. 次の XML コードを Web.sitemap ファイル内に配置します。

    XML は、メニュー構造を表します。入れ子になったノードは、親ノード メニュー項目の子メニュー項目になります。

    <siteMap>
  <siteMapNode title="Home" description="Home" url="default.aspx" >
    <siteMapNode title="Products" description="Our products" 
     url="Products.aspx">
      <siteMapNode title="Hardware" 
       description="Hardware choices"
       url="Hardware.aspx" />
      <siteMapNode title="Software" 
       description="Software choices" 
       url="Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" 
     description="Services we offer" 
     url="Services.aspx">
      <siteMapNode title="Training" 
       description="Training classes" 
       url="Training.aspx" />
      <siteMapNode title="Consulting" 
       description="Consulting services" 
       url="Consulting.aspx" />
      <siteMapNode title="Support" 
       description="Support plans" 
       url="Support.aspx" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

  5. ファイルを保存します。

サイト マップへのバインディング

ここでは、Web.sitemap ファイルを指すナビゲーション データ ソースを作成し、Menu コントロールをバインドできます。

  1. Default.aspx ファイルを開き、デザイン ビューに切り替えます。

  2. スマート タグをクリックし、[Menu タスク] ダイアログ ボックスを表示します。

  3. [Menu タスク] ダイアログ ボックスの [データ ソースの選択] ボックスの [新しいデータ ソース] をクリックします。

    [データ ソース構成ウィザード] ダイアログ ボックスが表示されます。

  4. [サイト マップ] をクリックします。

    [データ ソースに ID を指定します] の下に既定の名前 SiteMapDataSource1 が表示されます。

  5. [OK] をクリックします。

サイト マップ バインディングのテスト

ページとメニューを適切な場所に配置したら、メニューをテストできます。

サイト マップ バインディングをテストするには

  1. Ctrl キーを押しながら F5 キーを押して Default.aspx ページを実行します。

  2. ポインタを 2 つ目の縦方向のメニューの [ホーム] メニュー項目上に移動します。

    [Products] と [サービス] が表示されます。

  3. ポインタを [Products] 上に移動します。

    [Hardware] と [Software] が表示されます。

    Default.aspx のソース コードを調べると、最初のメニュー項目と異なり項目が宣言的に指定されていません。代わりに、データ ソースが Menu コントロールによって参照されています。

静的レベルと動的レベルの調整

前のセクションで作成した縦方向のメニューでは完全に動的な表示が使用されます。最も上のレベルだけが静的です。Menu コントロールを使用すると、マウス ポインタの配置に基づいた動作、およびメニューを動的または静的にするか、しないかに基づいた動作を指定できます。このセクションでは、Menu コントロールを動的および静的にします。

2 つのレベルに対して Menu コントロールを静的にするには

  1. デザイン ビューの Default.aspx ページで、2 つ目の Menu コントロールを右クリックし、[プロパティ] をクリックします。

  2. StaticDisplayLevels を 2 に設定します。

動的メニューのテスト

ページとメニューを適切な場所に配置したら、メニューをテストできます。

動的メニューをテストするには

  • Ctrl キーを押しながら F5 キーを押して Default.aspx ページを実行します。

    メニューの最初の 2 つのレベルが表示されます。第 3 レベルは動的です。

次の手順

Menu コントロールを使用すると、ナビゲーション メニューを簡単に作成できます。動的表示または静的表示についてコントロールを設定し、サイト マップ XML ファイルにバインドできます。次のオプションを試してみることもできます。

参照

処理手順

チュートリアル : プログラムによる ASP.NET メニューの制御

概念

メニュー コントロールの概要