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

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

このチュートリアルでは、コードを使用して同じページで 2 つのメニューを調整して、ASP.NET Menu コントロールをプログラムで操作する方法について説明します。

ASP.NET Menu コントロールを使用して Web サイトのナビゲーションメニューを作成できます。このチュートリアルでは、ASP.NET Menu コントロールのプログラムについて説明するだけでなく、2 つのメニューを作成し、同じ Web.sitemap ファイルにバインドして連携させます。最初のメニューは、製品、サービス、サポートなどのカテゴリを静的に表示するメニューです。このメニューは、ページの最上部に水平方向に表示されます。2 つ目のメニューは、最初のメニューの下に水平方向に表示されます。2 つ目のメニューの内容は、最初のメニューで選択されたメニュー項目によって異なります。最初のメニューの現在の選択に基づいて、2 つ目のメニューのサイトマップデータソースをプログラムで調整して、選択したカテゴリに関連する Web.sitemap ファイル部分だけを表示します。

前提条件

このチュートリアルを完了するための要件を次に示します。

Microsoft Visual Web Developer (Visual Studio)
.NET Framework

Web サイトの作成

Visual Web Developer で (「チュートリアル : Visual Web Developer での基本的な Web ページの作成」の手順を実行するなどして) 既に Web サイトを作成してある場合は、その Web サイトを使用できるので、このチュートリアルの「サイトマップファイルの作成」に進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

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

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

[新しい Web サイト] ダイアログボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。

たとえば、フォルダ名として「C:\WebSites」と入力します。
[言語] ボックスで、作業に使用する言語をクリックします。
[OK] をクリックします。

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

サイトマップファイルの作成

どちらのメニューの内容も、サイトの Web.sitemap ファイルから派生します。作成する SiteMapDataSource オブジェクトは、両方のメニューで使用され、それぞれのメニューに適したサイトマップの部分を表示します。

Web.sitemap ファイルを作成するには

ソリューションエクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログボックスの [サイトマップ] をクリックし、[追加] をクリックします。

新しいファイルに次の XML コードを追加します。この XML コードは、メニュー選択項目の階層構造を表します。<siteMapNode> 要素は入れ子になっています。各ノードは、サブ項目を含むメニュー項目を表します。サブ項目の下位に、さらにサブ項目が存在する場合もあります。Home ノードの下には第 2 レベルの 3 つのノード (Hardware、Software、および Support) が存在します。これらのノードの下にはさまざまなサブカテゴリが含まれます。

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="Home">
    <siteMapNode title="Products">
      <siteMapNode title="Hardware" url="Default.aspx?node=hardware">
        <siteMapNode title="Mouse"/>
        <siteMapNode title="Keyboard"/>
        <siteMapNode title="NetCard"/>
        <siteMapNode title="Monitor"/>
        <siteMapNode title="PC"/>
      </siteMapNode>
      <siteMapNode title="Software" url="Default.aspx?node=software">
        <siteMapNode title="Spreadsheet"/>
        <siteMapNode title="Word Processor"/>
        <siteMapNode title="Presentation"/>
        <siteMapNode title="Mail"/>
        <siteMapNode title="Games"/>
      </siteMapNode>
      <siteMapNode title="Books" url="Default.aspx?node=books">
        <siteMapNode title="Programming"/>
        <siteMapNode title="Debugging"/>
        <siteMapNode title="Testing"/>
        <siteMapNode title="Web Apps"/>
        <siteMapNode title="WinForm Apps"/>
      </siteMapNode>
    </siteMapNode>
    <siteMapNode title="Services">
      <siteMapNode title="Consulting" url="Default.aspx?node=consulting">
        <siteMapNode title="Processes"/>
        <siteMapNode title="Management"/>
        <siteMapNode title="Recruiting"/>
      </siteMapNode>
      <siteMapNode title="Development" url="Default.aspx?node=development">
        <siteMapNode title="Web Apps"/>
        <siteMapNode title="Enterprise Apps"/>
        <siteMapNode title="Database"/>
      </siteMapNode>
    </siteMapNode>
    <siteMapNode title="Support">
      <siteMapNode title="Drivers" url="Default.aspx?node=drivers">
        <siteMapNode title="Audio"/>
        <siteMapNode title="Network"/>
        <siteMapNode title="Printer"/>
        <siteMapNode title="Modem"/>
      </siteMapNode>
      <siteMapNode title="Manuals" url="Default.aspx?node=manuals">
        <siteMapNode title="Applications"/>
        <siteMapNode title="Troubleshooting"/>
        <siteMapNode title="Installation"/>
        <siteMapNode title="Internet"/>
      </siteMapNode>
      <siteMapNode title="Updates" url="Default.aspx?node=updates">
        <siteMapNode title="Release 1"/>
        <siteMapNode title="Game Package"/>
      </siteMapNode>
    </siteMapNode>
  </siteMapNode>
</siteMap>

ファイルを保存します。

最初のメニューの作成

最初のメニューには、単一のレベルの静的メニュー項目が表示されます。このメニューは、ページの最上部に水平に表示されます。

最初のメニューを作成するには

ソリューションエクスプローラで Default.aspx ページをダブルクリックして開きます。
デザインビューに切り替えます。
ツールボックスの [ナビゲーション] コントロールグループから、Menu コントロールをページにドラッグします。
[プロパティ] ウィンドウで、Orientation プロパティを Horizontal に設定します。
[MaximumDynamicDisplayLevels] を 0 に設定します。

これにより、どのメニューも動的にフライアウト形式で表示されることはありません。
[StaticDisplayLevels] は 1 に設定します。

このように設定しておくと、メニューは 1 レベルしか表示されません。
Menu コントロールのスマートタグをクリックします。

[Menu タスク] ダイアログボックスが表示されます。
[データソースの選択] ボックスの [新しいデータソース] をクリックします。
データソース構成ウィザードで、[サイトマップ] をクリックします。
既定の名前 SiteMapDataSource1 をそのまま使用し、[OK] をクリックします。

最初のデータソースの設定

最初のメニューには単一レベルの静的メニュー項目だけが表示されるので、Web.sitemap ファイルの適切な部分を表示するには、データソースを構成する必要があります。このチュートリアルでは、第 2 レベルの要素 (Products、Services、および Support) を表示します。

既定では、Menu コントロールを SiteMapDataSource コントロールにバインドすると、各メニュー項目がナビゲーションリンクになります。ここでは、もう 1 つのメニューの動作をプログラムで制御するので、カスタムバインディングを使用して、これらのメニュー項目をナビゲーションリンクとして動作させずにポストバックを発生させて 2 つ目のメニューを更新できるようにします。

最初のデータソースを設定するには

デザインビューで Default.aspx ページを表示し、Menu コントロールのスマートタグをクリックします。

[Menu タスク] ダイアログボックスが表示されます。
[MenuItem DataBindings を編集します。] をクリックします。
メニュー DataBindings エディタの [使用できるデータバインド] ボックスの [SiteMapNode] をクリックし、[追加] をクリックします。
[データバインドのプロパティ] ボックスの [textfield] をクリックし、このドロップダウンメニューの [タイトル] をクリックします。[OK] をクリックします。
SiteMapDataSource コントロールを選択します。
[プロパティ] で [ShowStartingNode] を [False] に設定します。

2 番目のメニューの作成

2 番目のメニューは動的です。そのデータソースでは、プログラムによって最初のメニューで決定されたサイトマップの一部だけが使用されます。前の手順と同様に第 1 レベルのメニュー項目は静的に表示しますが、Web.sitemap ファイルのその他の部分は動的に表示します。

2 番目のメニューを作成するには

デザインビューで Default.aspx ページを表示し、2 番目の Menu コントロールをページの最初の Menu コントロールの下にドラッグします。
[プロパティ] で Orientation を Horizontal に設定します。
2 番目の Menu コントロールのスマートタグをクリックします。

[Menu タスク] ダイアログボックスが表示されます。
[データソースの選択] ボックスの [新しいデータソース] をクリックします。
データソース構成ウィザードで、[サイトマップ] をクリックします。
既定の名前 SiteMapDataSource2 をそのまま使用し、[OK] をクリックします。

2 番目のデータソースの設定

このセクションでは、Web.sitemap ファイルの特定のセクションだけを選択するようにデータソースを設定します。このように設定するには、まず、最初のメニューに表示される既定の最初のカテゴリ (Web.sitemap ファイルの Products セクション) について作業します。次に StartingNodeURL プロパティを使用して、このファイル内の特定の URL 属性を示します。

2 番目のデータソースの開始点を設定するには

[SiteMapDataSource2] をクリックし、その StartingNodeURL プロパティを "Default.aspx?node=hardware" に設定します。
StartingNodeOffset を -1 に設定します。
ShowStartingNode を False に設定します。

メニューを調整するためのコードの追加

最初のメニューの状態に基づいて 2 番目のメニューを制御するには、最初のメニューの MenuItemClick イベントを受け取り、コード内でサイトマップファイルの 2 番目のメニューのビューを指定します。

コード内でメニューを調整するには

デザインビューで Default.aspx ページを表示して、[Menu1] をクリックします。
[プロパティ] の [MenuItemClick] イベントを「Menu1_MenuItemClick」に設定します。

Menu1_MenuItemClick という名前のメソッドが、Default.aspx ページの分離コードファイル内に作成されます。シングルファイルページモデルを使用している場合は、.aspx ページの <script> タグ内に作成されます。

次の強調表示されたコードをメソッドに追加します。

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
  ByVal e As System.Web.UI.WebControls.MenuEventArgs) _
  Handles Menu1.MenuItemClick
  Select Case e.Item.Value
    Case "Products"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware"
    Case "Services"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting"
    Case "Support"
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers"
  End Select
End Sub

protected void Menu1_MenuItemClick(Object sender,    
      System.Web.UI.WebControls.MenuEventArgs e)
{
  switch(e.Item.Value)
  {
    case "Products":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware";
      return;
    case "Services":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting";
      return;
    case "Support":
      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers";
      return;
  }
}

前のコードで Menu1 のクリックイベントを受け取ります。別の場所に移動する代わりに、この値を使用して 2 番目の Menu コントロールに表示する内容を決定します。このように決定するには、2 番目の Menu コントロールの SiteMapDataSource コントロールに関する StartingNodeUrl プロパティを調整します。

ファイルを保存します。

メニューのテスト

2 つのメニュー間の対話をテストするには、最初のメニューの項目をクリックし、2 番目のメニューがそれに対応して変化するのを確認します。2 番目のメニューには、Web.sitemap ファイルの 3 番目のレベルの項目が動的に表示されます。

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

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

最初のメニューが表示されます。2 つ目のメニューには Web.sitemap ファイル内の [Products] の下にあるメニュー項目が表示されます。
最初のメニューの [サービス] をクリックします。

2 つ目のメニューには [Consulting] メニューと [開発] メニューが動的に表示されます。
[サポート] をクリックします。

2 つ目のメニューには、[Drivers]、[Manuals]、および [更新] メニュー項目が動的に表示されます。

次の手順

Menu コントロールを使用すると、ナビゲーションメニューを簡単に作成できるだけでなく、プログラムでより複雑なシナリオをサポートできます。次のオプションを試してみることもできます。

テーマまたはスキンを Menu コントロールに適用する。詳細については、「チュートリアル : Visual Studio でのテーマを使用した Web サイトのカスタマイズ」を参照してください。
サイトナビゲーションの詳細を学習する。詳細については、「ASP.NET サイトナビゲーションの概要」を参照してください。
マスタページで Menu コントロールを使用して、1 つのページで定義されたサイト全体のナビゲーションを提供する。詳細については、「チュートリアル : Visual Web Developer での ASP.NET マスタページの作成と使用」を参照してください。

次の方法で共有

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

前提条件

Web サイトの作成

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

サイトマップファイルの作成

Web.sitemap ファイルを作成するには

最初のメニューの作成

最初のメニューを作成するには

最初のデータソースの設定

最初のデータソースを設定するには

2 番目のメニューの作成

2 番目のメニューを作成するには

2 番目のデータソースの設定

2 番目のデータソースの開始点を設定するには

メニューを調整するためのコードの追加

コード内でメニューを調整するには

メニューのテスト

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

次の手順

参照

処理手順

概念

その他のリソース

次の方法で共有

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

前提条件

Web サイトの作成

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

サイト マップ ファイルの作成

Web.sitemap ファイルを作成するには

最初のメニューの作成

最初のメニューを作成するには

最初のデータ ソースの設定

最初のデータ ソースを設定するには

2 番目のメニューの作成

2 番目のメニューを作成するには

2 番目のデータ ソースの設定

2 番目のデータ ソースの開始点を設定するには

メニューを調整するためのコードの追加

コード内でメニューを調整するには

メニューのテスト

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

次の手順

参照

処理手順

概念

その他のリソース

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

サイトマップファイルの作成

最初のデータソースの設定

最初のデータソースを設定するには

2 番目のデータソースの設定

2 番目のデータソースの開始点を設定するには