ASP.NET Web Forms 導航控制項完整指南：SiteMap、Menu、TreeView、SiteMapPath

維護大型網站選單向來耗時費力。ASP.NET 內建導航架構，將網站結構定義於 XML 格式的 web.sitemap 檔案，搭配三大導航控制項（Menu、TreeView、SiteMapPath）實現動態選單、多層樹狀導航與麵包屑路徑顯示。

SiteMap 架構核心概念

• 資料來源：web.sitemap 放置於網站根目錄，定義頁面階層結構
• 資料繫結：SiteMapDataSource 控制項自動連接預設 sitemap 檔案
• 導航控制項：透過 DataSourceID 繫結至 SiteMapDataSource

web.sitemap 檔案結構規範

<?xml version="1.0" encoding="utf-8"?>
<siteMap>
  <siteMapNode title="Home" url="/Default.aspx">
    <siteMapNode title="Products" url="/Products.aspx">
      <siteMapNode title="Hardware" url="/Hardware.aspx" />
      <siteMapNode title="Software" url="/Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" url="/Services.aspx">
      <siteMapNode title="Training" url="/Training.aspx" />
      <siteMapNode title="Support" url="/Support.aspx" />
    </siteMapNode>
    <siteMapNode title="About Us" url="/About.aspx" />
  </siteMapNode>
</siteMap>

XML 結構規則（必遵守）

• 根元素必須為 <siteMap>
• <siteMap> 下僅能有一個根 <siteMapNode>（對應首頁）
• 每個 <siteMapNode> 可包含多個子節點
• 每個節點需有 title（顯示文字）與 url（相對根目錄路徑）屬性
• URL 必須相對於網站根目錄

三大導航控制項詳細比較

1. Menu 控制項 - 動態下拉式選單

適用於水平或垂直導覽列，支援滑鼠滑入展開子選單。

<asp:SiteMapDataSource ID="smdsMain" runat="server" />

<form runat="server">
    <asp:Menu runat="server" DataSourceID="smdsMain" 
        Orientation="Horizontal" 
        StaticDisplayLevels="2"
        MaximumDynamicDisplayLevels="3" />
</form>

關鍵屬性

• Orientation：Horizontal（水平）或 Vertical（垂直）
• StaticDisplayLevels：靜態顯示層級數
• MaximumDynamicDisplayLevels：動態展開最大層級
• StaticMenuStyle、DynamicMenuStyle、StaticMenuItemStyle、DynamicMenuItemStyle：CSS 樣式自訂

2. TreeView 控制項 - 多層樹狀導航

類似 Windows 檔案總管左側樹狀結構，支援節點展開/摺疊（+/- 圖示）。

<asp:SiteMapDataSource ID="smdsMain" runat="server" />

<form runat="server">
    <asp:TreeView runat="server" DataSourceID="smdsMain"
        ExpandDepth="1"
        ShowLines="true"
        NodeIndent="15" />
</form>

關鍵屬性

• ExpandDepth：初始展開深度（0=全摺疊，-1=全展開）
• ShowLines：顯示連接線
• NodeIndent：子節點縮排像素
• NodeStyle、ParentNodeStyle、LeafNodeStyle、SelectedNodeStyle：各狀態樣式
• 支援 TreeNodePopulate 事件實現按需載入大型樹狀結構

3. SiteMapPath 控制項 - 麵包屑導航路徑

顯示當前頁面在網站架構中的路徑（如：Home > Products > Hardware），每層皆為可點擊連結。

<form runat="server">
    <asp:SiteMapPath runat="server" 
        PathSeparator=" > "
        PathDirection="RootToCurrent"
        RenderCurrentNodeAsLink="false" />
</form>

特殊行為

• 不使用 SiteMapDataSource，直接讀取 web.sitemap
• 若顯示異常，通常是 web.sitemap 中 URL 路徑拼寫錯誤
• PathDirection：RootToCurrent（預設）或 CurrentToRoot
• RenderCurrentNodeAsLink：目前節點是否為超連結

進階應用技巧

多重 Sitemap 來源

大型網站可將不同區域拆分為多個 sitemap 檔案，透過 SiteMapDataSource.SiteMapProvider 屬性指定不同 Provider，需在 web.config 註冊多個 XmlSiteMapProvider。

安全性修剪

SiteMapDataSource 預設啟用 SecurityTrimmingEnabled="true"，會根據使用者角色自動隱藏無權限存取的節點，需配合 web.config authorization 設定。

自訂 SiteMapProvider

繼承 StaticSiteMapProvider 可從資料庫、API 或其他來源動態建構網站地圖，適用於動態內容管理系統。

樣式美化最佳實務

• 使用 CSS Control Adapters 或原生 CSS 類別（.level1、.level2 等）
• Menu 控制項產出 <table> 結構，TreeView 產出 <ul><li>，方便 CSS 選取器定位
• 響應式設計：搭配 @media query 在行動裝置切換為漢堡選單

常見問題排查

掌握 ASP.NET 導航架構，能大幅降低大型網站維護成本，提升使用者體驗。下一節將介紹母版頁實現版面統一管理。