方法 : 簡単なサイト ナビゲーションを追加する
更新 : 2007 年 11 月
SiteMapPath、TreeView、または Menu コントロールを使用して、ユーザーが Web サイト内を移動するための一貫性のある方法を用意できます。
SiteMapPath コントロールは、現在のページの場所を示すナビゲーション パス (階層リンクまたはアイブロウとも呼ばれる) を表示し、さらにホーム ページに戻るパスをリンクとして表示します。
.gif "メモ") メモ : |
|---|
.aspx ページに SiteMapPath コントロールが含まれている場合、コントロールを表示するために、その .aspx ページを Web.sitemap ファイル内のリストに含める必要があります。 |
ユーザーが Web ページで Training ページを閲覧している場合、SiteMapPath コントロールは次のように表示されます。
[Home] > [Services] > [Training]
TreeView コントロールは、ユーザーがサイト内のさまざまなページへのリンクを確認できるツリー構造を表示します。子ノードを含むノードは、そのノードをクリックすることにより展開または折りたたむことができます。TreeView コントロールは、最初に表示されるときには完全に展開されています。Web ページでは、TreeView コントロールによって次のように表示されます。
- [Home]
- [Services]
+ [Training]
Menu コントロールは、ユーザーがサイト内のさまざまなページへのリンクを確認できる展開可能なメニューを表示します。子ノードを含むノードは、メニュー項目の上にカーソルを置ことにより展開されます。Menu コントロールでサイト マップを表示するコード例については、「方法 : 非階層 Web サーバー コントロール内にサイト マップ データを表示する」を参照してください。
これらのサイト ナビゲーション コントロールを使用するには、Web.sitemap ファイルで Web サイトの構造を指定する必要があります。
Web.sitemap ファイルを作成するには
Web サイトのルート ディレクトリで Web.sitemap という名前のファイルを作成します。
Web.sitemap ファイルを開いて、次のコードを追加します。
<?xml version="1.0" encoding="utf-8" ?> <siteMap> <siteMapNode title="Home" > <siteMapNode title="Services" > <siteMapNode title="Training" url="~/Training.aspx"/> </siteMapNode> </siteMapNode> </siteMap>メモ :存在しない URL をリストに含めたり、重複する URL を含めたりした場合は、Web アプリケーションが失敗します。url 属性の先頭に、アプリケーション ルートを示す "~/" ショートカットを付けることができます。詳細については、「ASP.NET Web サイトのパス」を参照してください。
このトピックの後半で、Training.aspx ページを作成します。
ファイルを保存して閉じます。
Web ページにサイト ナビゲーションを追加するには
Web サイトのルート ディレクトリで Training.aspx という名前のファイルを作成します。
Training.aspx を開いて、次のコードを追加します。
<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Simple Navigation Controls</title> </head> <body> <form id="form1" runat="server"> <div> <h2>Using SiteMapPath</h2> <asp:SiteMapPath ID="SiteMapPath1" Runat="server"> </asp:SiteMapPath> <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" /> <h2>Using TreeView</h2> <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1"> </asp:TreeView> <h2>Using Menu</h2> <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1"> </asp:Menu> <h2>Using a Horizontal Menu</h2> <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticDisplayLevels="2" > </asp:Menu> </div> </form> </body> </html><%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Simple Navigation Controls</title> </head> <body> <form id="form1" runat="server"> <div> <h2>Using SiteMapPath</h2> <asp:SiteMapPath ID="SiteMapPath1" Runat="server"> </asp:SiteMapPath> <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" /> <h2>Using TreeView</h2> <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1"> </asp:TreeView> <h2>Using Menu</h2> <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1"> </asp:Menu> <h2>Using a Horizontal Menu</h2> <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticDisplayLevels="2" > </asp:Menu> </div> </form> </body> </html>ファイルを保存して閉じます。これで、ブラウザでファイルを表示して、コントロールがどのように Web サイトのナビゲーション構造を表示しているかを確認できます。
セキュリティ
ナビゲーション構造内のリンクは、指定したセキュリティー ロールに属するメンバに対して非表示にすることもできます。詳細については、「ASP.NET のサイト マップ セキュリティ トリミング」を参照してください。
参照
処理手順
方法 : SiteMapPath Web サーバー コントロールの外観をカスタマイズする
概念
TreeView Web サーバー コントロールの外観と操作性のカスタマイズ