C# 高效能開發實戰：樹狀列表演示頁面與動態資料服務實作（下）

Default.aspx 演示頁面設計

頁面放置兩個控件實例：myTreeView（一次性載入全量資料）與 myTreeView2（動態載入子節點）。控件標籤前綴源自組件層級指令：

[assembly: System.Web.UI.TagPrefix("CS_Discovery", "SkyWebControl")]

故頁面標籤為 <SkyWebControl:SkyTreeViewControl>。

Page_Load 核心邏輯

protected void Page_Load(object sender, EventArgs e) {
  if (myTreeView.Nodes.Count == 0) {
    // 連接資料庫，查詢客戶-訂單-產品三層關聯資料
    // 迴圈填充 myTreeView.Nodes，建立 CompanyNode → OrderNode → ProductNode 階層
    // ProductNode 設定 OnClick = "alert('產品名')"

    // 第二棵樹：僅載入客戶層，設定 XMLSource 指向 TreeViewNodeXML.aspx
    cmd.CommandText = "Select customerid, companyname from customers order by companyname";
    while (reader.Read()) {
      SkyTreeNode node = new SkyTreeNode();
      node.ID = Guid.NewGuid().ToString();
      node.Text = reader.GetString(1);
      node.Icon = "customer.bmp";
      node.XMLSource = "TreeViewNodeXML.aspx?KeyType=customerid&KeyValue=" + reader.GetString(0);
      myTreeView2.Nodes.Add(node);
    }
  }
  lblInfo.Text = "本控件共有節點 " + myTreeView.AllNodes.Count + " 個";
  lblInfo2.Text = "本控件初始化有 " + myTreeView2.AllNodes.Count + " 個節點，能動態載入子節點";
}

TreeViewNodeXML.aspx 動態資料服務

純 XML 輸出頁面，依 KeyType 參數決定輸出內容：

• customerid：輸出該客戶的所有訂單節點，每節點含 XMLSource 指向 KeyType=orderdetails。
• orderdetails：輸出該訂單的所有貨品節點（葉節點，無 XMLSource）。

資料庫查詢使用參數化字串拼接（示範代碼，實務建議改用參數化查詢防注入），輸出符合控件預期格式的 XML 文件。

設計重點

1. 無資料源綁定： 控件不提供自動 DataBinding，需開發者手動建構節點樹，因樹狀結構邏輯複雜，通用綁定難以覆蓋所有場景。
2. Guid 保證 ID 唯一性： 跨多棵樹、動態載入多 XML 文件時，generate-id() 可能重複，採用 Guid.NewGuid() 確保全域唯一。
3. 關注點分離： 頁面僅負責資料查詢與節點建構，渲染邏輯完全封裝於控件內部，使用介面簡潔。