Share via

  • [アーティクル]

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

SiteMap クラスを利用したサイト ナビゲーション

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

最終更新日 2005 年 11 月 11 日

目標
ASP.NET 2.0 の SiteMap クラスを使用したページの実装
使用技術
  • ASP.NET 2.0
  • Visual Basic 2005
取り上げるトピックス
  • ASP.NET 2.0 を SiteMap クラス
前提知識
目次
まとめ
ASP.NET 2.0 ではサイトの利便性を向上する手段としてナビゲーション コントロールを利用すると効果的です。 
備考
 

SiteMap クラスを利用したサイト ナビゲーション

ここでは、その 2 で作成したページに、SiteMap クラスを使用してナビゲーション情報を表示します。

 

SiteMap クラスを使用してコードからブレッド クラムを表示します。そこで、SiteMapPath コントロールを削除し、替わりに Label コントロールを配置し、コントロール名を lblMapPath と定義します。このラベルにブレッド クラムを表示します。

ラベルコントロールの配置 

 

マスタ ページに次のコードを追加します。

 
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
    ShowAdminMenu()   ' その 2 で実装済み 
    
    ' SiteMap オブジェクトから現在のノードを取得する 
    Dim currentNode As SiteMapNode = SiteMap.CurrentNode

    ShowMapPath(currentNode)  

End Sub 

Sub ShowMapPath(ByVal currNode As SiteMapNode) 

    ' 親ノードから現在のノードまでのタイトルを連結する 
    Dim path As String = currNode.Title 

    Do While currNode.ParentNode IsNot Nothing 
        currNode = currNode.ParentNode 
        path = " > " + path 
        path = currNode.Title + path 
    Loop 
    
    lblMapPath.Text = path 

End Sub

      

サイト マップの定義に基づいて、フッター 領域に現在のノードと同じレベルにある前後のノードのページを表示します。

フッター領域に 1 行 2 列のテーブルを配置し、それぞれのセルに Panel コントロールを配置します。左のパネルには PanelPrev、右のパネルには PanelNext とコントロール名を定義します。

テーブルとパネルの配置 

         

PanelPrev 内に Label コントロールと HyperLink コントロールを配置し、それぞれのコントロール名を lblPrev、HyperLinkPrev とし、lblPrev コントロールの Text プロパティを 「 << 前ページ 」と設定します。

PanelNext 内に Label コントロールと HyperLink コントロールを配置し、それぞれのコントロール名を lblNext、HyperLinkNext とし、lblNext コントロールの Text プロパティを 「 次ページ >> 」と設定します。

Label コントロールと HyperLink コントロールの配置 

     

HyperLink コントロールに SiteMap の定義に従って、現在のノードと同じレベルにある、前後のノードのページ情報が表示されるようにマスタ ページに以下のコードを記述します。

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
    
    ShowAdminMenu() ' その 2 で実装済み 

    ' SiteMap オブジェクトから現在のノードを取得する 
      Dim currentNode As SiteMapNode = SiteMap.CurrentNode 
    ShowMapPath(currentNode) 

    ShowNavigation(currentNode) 

End Sub 

Sub ShowNavigation(ByVal currNode As SiteMapNode) 
    ' 現在のノードと同じレベルの次のノード情報を HyperLink に設定する 
    If currNode.NextSibling IsNot Nothing Then 
        HyperLinkNext.NavigateUrl = currNode.NextSibling.Url 
        HyperLinkNext.Text = currNode.NextSibling.Title 
    End If 

    ' 現在のノードと同じレベルの前のノード情報を HyperLink に設定する 
    If currNode.PreviousSibling IsNot Nothing Then 
        HyperLinkPrev.NavigateUrl = currNode.PreviousSibling.Url 
        HyperLinkPrev.Text = currNode.PreviousSibling.Title 
    End If 

End Sub

    

現在のノードに対して同じレベルにある前後のノードが存在しない場合に、ナビゲーション情報を表示しないようにします。そのため、ラベルとリンクを非表示にします。ラベルとリンクはパネル内に配置しているので、パネルに対して非表示の設定を行います。

Sub ShowNavigation(ByVal currNode As SiteMapNode) 
    ' 現在のノードと同じレベルの次のノード情報をHyperLinkに設定する 
    If currNode.NextSibling IsNot Nothing Then 
        HyperLinkNext.NavigateUrl = currNode.NextSibling.Url 
        HyperLinkNext.Text = currNode.NextSibling.Title 
    Else 
        PanelNext.Visible = False 
    End If 

    ' 現在のノードと同じレベルの前のノード情報をHyperLinkに設定する 
    If currNode.PreviousSibling IsNot Nothing Then 
        HyperLinkPrev.NavigateUrl = currNode.PreviousSibling.Url 
        HyperLinkPrev.Text = currNode.PreviousSibling.Title 
    Else 
        PanelPrev.Visible = False 
    End If 

End Sub

   

以上の設定により、SiteMap クラスを使用して Web サイトのナビゲーション情報を表示できるようになります。


 SiteMap クラスを利用したページの実行結果

まとめ

ナビゲーション コントロールはサイト マップ定義 ファイルや XML ドキュメント ファイルと組み合わせて利用すると、サイトを利用するユーザーはページ間の関係やサイトの構造を理解しやすいサイトを構築することができます。

 

ページのトップへ