ASP.NET `TreeView` 控制項支援靜態定義節點，也可透過 `XmlDataSource`、`SiteMapDataSource` 繫結資料，但不直接支援 `SqlDataSource`。本文示範如何從資料庫動態載入節點，並利用 `PopulateOnDemand` 實現延遲載入，最後搭配 `` 達成無刷新導航效果。</p> <h2>關鍵屬性與事件</h2> <table> <thead> <tr><th>屬性/事件</th><th>說明</th></tr> </thead> <tbody> <tr><td>TreeNode.SelectAction</td><td>節點被選取時的行為：`Select`（觸發 `SelectedNodeChanged`）、`Expand`、`SelectExpand`、或導航模式（設定 `NavigateUrl`）。</td></tr> <tr><td>TreeNode.PopulateOnDemand</td><td>設為 `true` 時，節點展開時才透過回發動態載入子節點，需處理 `TreeNodePopulate` 事件。</td></tr> <tr><td>TreeView.TreeNodePopulate</td><td>當 `PopulateOnDemand=true` 的節點被展開時觸發，在此事件中以程式碼填充子節點。</td></tr> </tbody> </table> <h2>資料存取輔助類別 (DALHelper)</h2> <pre><code>using System; using System.Configuration; using System.Data; using System.Data.SqlClient; namespace DBHelper { public class DALHelper { private static string constr = ConfigurationManager.ConnectionStrings["MyNBAData"].ConnectionString; private static SqlConnection connection = new SqlConnection(constr); public static bool CheckConnOpen() { if (connection == null || connection.State == ConnectionState.Closed) { connection.Open(); return true; } return false; } public static bool CheckConnClosed() { if (connection != null && connection.State == ConnectionState.Open) { connection.Close(); return true; } return false; } public static DataTable GetDataTable(string sql) { using (SqlDataAdapter da = new SqlDataAdapter(sql, connection)) { DataTable dt = new DataTable(); da.Fill(dt); return dt; } } public static SqlDataReader ExecuteReader(string sql, SqlParameter[] parms) { using (SqlCommand cmd = new SqlCommand(sql, connection)) { if (parms != null) foreach (var p in parms) cmd.Parameters.Add(p); CheckConnOpen(); return cmd.ExecuteReader(CommandBehavior.CloseConnection); } } public static int ExecuteNonQuery(string sql, SqlParameter[] parms) { using (SqlCommand cmd = new SqlCommand(sql, connection)) { if (parms != null) foreach (var p in parms) cmd.Parameters.Add(p); CheckConnOpen(); int count = cmd.ExecuteNonQuery(); CheckConnClosed(); return count; } } } }</code></pre> <h2>動態填充節點實作</h2> <h3>1. 首次載入：建立根節點</h3> <pre><code>protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { TreeNode root = new TreeNode("產品分類", "0"); root.PopulateOnDemand = true; // 開啟動態載入 TreeView1.Nodes.Add(root); } }</code></pre> <h3>2. 處理 TreeNodePopulate 事件</h3> <pre><code>protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e) { string parentId = e.Node.Value; DataTable dt = DALHelper.GetDataTable($"SELECT Id, Name FROM Categories WHERE ParentId = {parentId}"); foreach (DataRow row in dt.Rows) { TreeNode child = new TreeNode(row["Name"].ToString(), row["Id"].ToString()); child.NavigateUrl = $"ProductList.aspx?cat={row["Id"]}"; child.Target = "mainFrame"; // 指向 iframe // 判斷是否有子節點，決定是否啟用 PopulateOnDemand child.PopulateOnDemand = HasChildNodes(row["Id"]); e.Node.ChildNodes.Add(child); } } private bool HasChildNodes(object categoryId) { // 執行 SQL 檢查是否有子分類 object result = DALHelper.ExecuteScalar($"SELECT COUNT(*) FROM Categories WHERE ParentId = {categoryId}"); return Convert.ToInt32(result) > 0; }</code></pre> <h2>前端頁面配置：搭配 Iframe</h2> <pre><code><frameset cols="200,*"> <frame src="TreeMenu.aspx" name="menuFrame" /> <frame src="Welcome.aspx" name="mainFrame" /> </frameset></code></pre> <p>或使用現代 `<iframe>` 版面：</p> <pre><code><div style="display:flex;"> <div style="width:220px;"><asp:TreeView ID="TreeView1" runat="server" OnTreeNodePopulate="TreeView1_TreeNodePopulate" /></div> <div style="flex:1;"><iframe id="mainFrame" name="mainFrame" src="Welcome.aspx" frameborder="0" style="width:100%;height:100%;"></iframe></div> </div></code></pre> <h2>優化建議</h2> <ul> <li>使用 `UpdatePanel` 區域更新 `TreeView`，避免整頁回發閃爍。</li> <li>大量節點時，考慮快取資料庫查詢結果或使用 JSON + JavaScript 動態渲染樹狀結構。</li> <li>注意 `iframe` 的安全性限制（同源策略），跨域內容需設定 `X-Frame-Options` 或 `Content-Security-Policy`。</li> </ul> <div class="qcxs_ie_he"></div> </div> <div class="akevx_own"> <script language='javascript' src='/ad/p.js'></script></div> <div class="akevx_mj"> </div> <div class="qcxs_ie_he"></div> <ol class="qmsbvx_hsb ovv_hex"> <li>上一篇文章： <a class='LinkPrevArticle' href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18682.html' >URL Rewrite 時修正 Form Action 屬性的最佳實踐：Control Adapter 方案</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18684.html' >使用 HttpModule 防止 Web 表單重複提交</a> </ol> </div> </div> <div class="qirnxbd bg1 mt20"> <div class="jdbsbav"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/' target="_blank">關於ASP.NET</a> <div class="jdbsbav_hx"></div> </div> <div class="qirnxbd_rbx"> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19209.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010510583430.png' width='100' height='70' alt='ASP.NET MVC ModelState 與資料驗證：Html.ValidationMessage 使用方式與 ViewData.ModelState 運作機制' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19209.html' target="_blank"><strong>ASP.NET MVC ModelState 與資料驗證：Html.ValidationMessage 使用方式與 ViewData.ModelState 運作機制</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19209.html' target="_blank"><p>前言 ViewData.ModelState 為 Model</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/47399.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010914015958_S.jpg' width='100' height='70' alt='.NET 實現多文件合並為單一包文件：自定義二進制格式設計與高效讀寫' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/47399.html' target="_blank"><strong>.NET 實現多文件合並為單一包文件：自定義二進制格式設計與高效讀寫</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/47399.html' target="_blank"><p>將多個分散文件打包為單一「包文件」，便於傳輸、存儲、版本管理</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19113.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010510574481_S.jpg' width='100' height='70' alt='ASP.NET 2.0 TreeView CheckBox 全選/取消全選 JavaScript 實作' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19113.html' target="_blank"><strong>ASP.NET 2.0 TreeView CheckBox 全選/取消全選 JavaScript 實作</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/19113.html' target="_blank"><p>利用 TreeView 的 onclick 事件，配合 Ja</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/17452.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010510262973.png' width='100' height='70' alt='Contoso University 教學 (三)：學生索引頁排序、篩選與分頁實作' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/17452.html' target="_blank"><strong>Contoso University 教學 (三)：學生索引頁排序、篩選與分頁實作</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/17452.html' target="_blank"><p>在 Student Index 頁面實作三大核心功能：欄位排</p></a> </div> <div class="qcxs_ie_he"></div> </div> </div> </div> <div class="eccsgxsg mt20"> <div class="akevx_oin"> </div> <div class="nenxnxb bg1 mt20"> <div class="enxvsfgg"> <div class="enxvsfgg_1"></div> </div> <div class="pdirbvx lbhevs ovv_hex"> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18117.html' target="_blank">IsLine Framework 系列（十三）：框架配置大全（上）—— 配置結構總覽</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18692.html' target="_blank">ASP.NET 自訂伺服器控制項開發：建立可重用的 CheckBoxColumn</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18935.html' target="_blank">ASP.NET 整合 TinyMCE 解決中文語言包無法載入問題：Response.ContentEncoding 設定</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18748.html' target="_blank">ASP.NET ListView 控件學習系列（一）：認識模板化架構與資料繫結基礎</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18190.html' target="_blank">ASP.NET MVC 2 Controller 傳遞 Model 到 View 三種方式：ViewData、ViewBag、強類型 Model</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/18279.html' target="_blank">淺談 .NET 多線程與並行計算（九）：WinForm 多線程編程基礎（下）</a> <a href='https://code.yunyiwangluo.com/bianchen/gyaspnet/47168.html' target="_blank">.NET 後端程式碼重新整理 ASPX 頁面的四種方法</a> </div> </div> <div class="eqibneb bg1 mt20"> <div class="lkebxsg">欄目導航</div> <div class="eqibneb_1 ovv_hex"> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/aspnetjc/' target="_self">ASP.NET 基礎</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/gyaspnet/' target="_self">關於ASP.NET</a></li> </div> </div> </div> <div class="qcxs_ie_he"></div> </div> </div> <div class="qcxs_ie_he"></div> <div class="ebrxbsbf">Copyright © <a href="https://code.yunyiwangluo.com/" target="_blank" title="程式碼之家">程式碼之家</a> All Rights Reserved </div> </body> </html>
