ASP.NET TreeView 進階實戰：分頁載入節點與三層級產品分類綁定範例

TreeView 是 ASP.NET WebForms 時代呈現階層資料的經典控件。本文透過一個「產品分類三層級」的完整範例，示範如何結合 PopulateOnDemand 實現節點按需載入，大幅降低首屏渲染負擔。

範例場景

• 第 0 層：大分類 (ParentID = 0)
• 第 1 層：中分類 (ParentID = 上層 ID)
• 第 2 層：具體產品 (ProductTypeItemID = 上層 ID)

每層節點點擊展開時，才向資料庫查詢子節點，避免一次性載入龐大樹狀結構。

核心程式碼架構

1. 節點填充事件總入口

protected void TreeView_TreeNodePopulate(object sender, TreeNodeEventArgs e) {
  if (e.Node.ChildNodes.Count == 0) {
    switch (e.Node.Depth) {
      case 0: PopulateCategories(e.Node); break;
      case 1: PopulateProductType(e.Node); break;
      case 2: PopulateProducts(e.Node); break;
    }
  }
}

2. 第一層：大分類載入

void PopulateCategories(TreeNode node) {
  DataTable dt = productType.GetListByFatherNode(); // ParentID=0
  foreach (DataRow row in dt.Rows) {
    TreeNode n = new TreeNode(
      row["ProductTypeName"].ToString(),
      row["ProductTypeID"].ToString(),
      "", // 圖示 URL
      "../WebProductList.aspx?productTypeIdOne=" + row["ProductTypeID"],
      ""
    );
    n.PopulateOnDemand = true;
    n.SelectAction = TreeNodeSelectAction.Expand;
    node.ChildNodes.Add(n);
  }
  node.Expanded = true;
}

3. 第二層：中分類載入

void PopulateProductType(TreeNode node) {
  QueryParam qp = new QueryParam();
  qp.Add("ParentID", QueryParam.RELATION.EQ, node.Value);
  DataTable dt = productType.GetListByBranchNode(qp);
  foreach (DataRow row in dt.Rows) {
    TreeNode n = new TreeNode(
      row["ProductTypeName"].ToString(),
      row["ProductTypeID"].ToString(),
      "",
      "../WebProductList.aspx?productTypeIdTwo=" + row["ProductTypeID"],
      ""
    );
    n.PopulateOnDemand = true;
    n.SelectAction = TreeNodeSelectAction.Expand;
    node.ChildNodes.Add(n);
  }
  node.Expanded = false;
}

4. 第三層：產品明細載入

void PopulateProducts(TreeNode node) {
  QueryParam qp = new QueryParam();
  qp.Add("ProductTypeItemID", QueryParam.RELATION.EQ, node.Value);
  DataTable dt = product.GetList(qp);
  foreach (DataRow row in dt.Rows) {
    TreeNode n = new TreeNode(
      row["ProductName"].ToString(),
      row["ProductID"].ToString(),
      "",
      "../WebProductDetaile.aspx?productID=" + row["ProductID"],
      ""
    );
    n.PopulateOnDemand = true; // 若無更深層級可設 false
    n.SelectAction = TreeNodeSelectAction.Expand;
    node.ChildNodes.Add(n);
  }
  node.Expanded = false;
}

關鍵屬性解析

效能優化建議

1. 資料庫索引：ParentID、ProductTypeItemID 必建索引。
2. 快取熱門分類：第一層大分類變動極少，建議用 HttpRuntime.Cache 或 Redis 快取，減少資料庫往返。
3. 節點總數控制：單層節點超過 200 時考慮分頁或虛擬滾動，避免瀏覽器 DOM 過大卡頓。
4. 現代化替代：新專案建議採用前端樹狀組件 (如 zTree, Ant Design Tree, React Arborist) 配合 Web API 分頁載入，體驗更流暢。