ASP.NET TreeView 靜態節點導航選單完整建置教學

TreeView 控制項概覽

`TreeView` 顯示階層式資料，每個節點為 `TreeNode`，具備 `Text` (顯示文字)、`Value` (隱藏值)、`NavigateUrl` (導航目標)、`Target` (開啟目標視窗)、`ImageUrl` (圖示) 等屬性。

靜態節點宣告 (.aspx)

後置程式碼動態建立 (Page_Load)

protected void Page_Load(object sender, EventArgs e)
{
 if (IsPostBack) return;

 TreeView1.ShowLines = true;

 TreeNode root = new TreeNode("產品分類", "0");
 root.Expanded = true;

 TreeNode electronics = new TreeNode("電器類", "1") { NavigateUrl = "~/Electric.aspx" };
 root.ChildNodes.Add(electronics);

 TreeNode food = new TreeNode("食品類", "2") { NavigateUrl = "~/Food.aspx" };
 TreeNode fruit = new TreeNode("水果", "21") { NavigateUrl = "~/Fruit.aspx" };
 TreeNode vegetable = new TreeNode("蔬菜", "22") { NavigateUrl = "~/Vegetable.aspx" };
 food.ChildNodes.Add(fruit);
 food.ChildNodes.Add(vegetable);
 root.ChildNodes.Add(food);

 TreeNode daily = new TreeNode("日用品類", "3") { NavigateUrl = "~/Commodity.aspx" };
 root.ChildNodes.Add(daily);

 TreeView1.Nodes.Add(root);
}

關鍵屬性與事件

樣式自訂 (內嵌或 CSS)

動態載入進階：PopulateOnDemand

 
 
 


protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
 string parentId = e.Node.Value;
 // 從資料庫查詢子分類
 DataTable dt = GetCategories(parentId);
 foreach (DataRow row in dt.Rows)
 {
 TreeNode child = new TreeNode(row["Name"].ToString(), row["Id"].ToString())
 {
 NavigateUrl = $"~/Category.aspx?id={row["Id"]}",
 PopulateOnDemand = HasChildren(row["Id"]) // 遞歸判斷
 };
 e.Node.ChildNodes.Add(child);
 }
 e.Node.PopulateOnDemand = false; // 已載入，關閉按需載入
}

資料繫結模式 (XmlDataSource / SiteMapDataSource)

總結

TreeView 靜態節點適合結構固定的導航選單，聲明式標記最直觀；動態建立適合權限控制、多語系；`PopulateOnDemand` 解決大量節點效能問題；`SiteMapDataSource` 整合站點地圖提供統一導航資料源。依專案需求選擇適當方式。