您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> 關於ASP.NET

ASP.NET 2.0 頁面導航控制項完整入門：SiteMapDataSource、TreeView、Menu 實作指南

編輯：關於ASP.NET

ASP.NET 2.0 引入完整的導航架構：Web.sitemap 定義站點結構，SiteMapDataSource 提供資料來源，搭配 TreeView、Menu、SiteMapPath 等導航控制項，快速建構靈活的網站導航體驗。

站點地圖檔案結構

建立 Web.sitemap（XML 格式），根節點為 <siteMap>，包含巢狀 <siteMapNode>：

<?xml version="1.0" encoding="utf-8"?>
<siteMap xmlns="https://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
  <siteMapNode title="Default" description="Home" url="Default.aspx">
    <siteMapNode title="Members" description="Members" url="Members.aspx">
      <siteMapNode title="My Account" description="My Account" url="MyAccount.aspx" />
      <siteMapNode title="Products" description="Products" url="Products.aspx" />
    </siteMapNode>
    <siteMapNode title="Administration" description="Administration" url="~/Admin/Default.aspx">
      <siteMapNode title="Customer" description="Customer Admin" url="~/Admin/Customer/default.aspx" />
      <siteMapNode title="Products Admin" description="Products Admin" url="~/Admin/ProductsAdmin.aspx" />
    </siteMapNode>
  </siteMapNode>
  <siteMapNode title="Contact Us" description="Contact Us" url="Contact.aspx" />
</siteMap>

siteMapNode 核心屬性

屬性	用途
`url`	導航目標相對 URL，支援 `~` 應用程式根目錄運算子
`title`	顯示文字，導航控制項呈現標題
`description`	工具提示文字，滑鼠懸停顯示
`roles`	授權角色清單（逗號分隔），配合安全性修剪使用

三大導航控制項特色比較

控制項	呈現樣式	適用場景
`SiteMapPath`	麵包屑路徑	頁面頂部顯示目前位置：Home > Products > Detail
`TreeView`	可摺疊階層樹狀	側邊欄完整站點地圖，支援展開/摺疊、核取方塊選取
`Menu`	水平/垂直動態選單	頂部導覽列、側邊選單，支援彈出子選單、樣式客製化

宣告式繫結範例

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">
  <NodeStyle Font-Names="Verdana" Font-Size="10pt" />
  <HoverNodeStyle Font-Underline="True" ForeColor="Red" />
</asp:TreeView>

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" 
    Orientation="Horizontal" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="3">
  <StaticMenuStyle BackColor="#336699" />
  <StaticMenuItemStyle ForeColor="White" />
  <DynamicMenuStyle BackColor="White" />
</asp:Menu>

程式化動態導航

SiteMap.CurrentNode：取得目前頁面對應節點。
SiteMap.RootNode：根節點，遞迴走訪全站結構。
SiteMapProvider.FindSiteMapNode(url)：依 URL 查找節點。
SiteMapResolve 事件：動態修改/擴充節點屬性（如加入查詢字串、權限判斷）。

安全性修剪

在 web.config 啟用：

<siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
  <providers>
    <add name="XmlSiteMapProvider" type="System.Web.XmlSiteMapProvider" 
         siteMapFile="Web.sitemap" securityTrimmingEnabled="true" />
  </providers>
</siteMap>

導航控制項將自動隱藏目前使用者無權存取的節點（依 roles 屬性與 <authorization> 規則）。