ASP.NET 實作 HTML 頁面元素級權限控制（下）：掃描引擎、父子關係解析與資料落地

承接上篇，本文詳細拆解權限掃描的三個關鍵子步驟：標記元素、解析層級關係、資料持久化，並提供完整程式碼實作。

一、以 <box> 標記權限元素

在 ASPX 頁面中，將需受控區塊包裹於 <box id="..." title="..."></box> 中。範例頁面結構如下：

• main（根節點）
• QueryUser（查詢區塊，含查詢按鈕）
• AddUser（新增按鈕，巢狀於 QueryUser 內）
• UserList（列表區塊）
• EditUserInfo（編輯按鈕，巢狀於列表每行內）

此做法不修改原有 <div>/<a> 等語義標籤，CSS 完全不受影響。

二、JavaScript 遞歸掃描與父子關係識別

掃描邏輯：從 id="main" 根節點出發，遞歸遍歷子節點，遇到 nodeName === "BOX" 即提取其 id、title，並呼叫 findparentbox() 向上查找最近的父級 <box>，取得 parentboxId。核心程式碼片段：

function findchildbox(parentNode) {
  for (var i = 0; i < parentNode.length; i++) {
    if (parentNode[i].nodeName == "BOX") {
      var childboxId = parentNode[i].id;
      var childboxTitle = encodeURI(parentNode[i].title);
      var parentbox = findparentbox(parentNode[i].parentNode);
      var parentboxId = parentbox.id;
      // AJAX 送至後端...
    }
    findchildbox(parentNode[i].childNodes);
  }
}

function findparentbox(child) {
  if (child.nodeName == "BOX") return child;
  else return findparentbox(child.parentNode);
}

三、AJAX 非同步寫入與併發鎖機制

前端以 XMLHttpRequest GET 請求呼叫 AddBox.ashx，參數包含 childboxId、childboxTitle、parentboxId。初期發現掃描速度過快，導致資料庫寫入併發衝突（後一筆覆蓋前一筆）。嘗試 JS 延遲無效，最終在後端處理程序引入 Thread.Sleep(1000) 作為簡易「鎖」，確保序列化寫入：

public void ProcessRequest(HttpContext context) {
  context.Response.ContentType = "text/plain";
  System.Threading.Thread.Sleep(1000); // 簡易併發控制
  // ... 解碼參數、建立實體、呼叫 BLL 寫入 ...
  admDIVManager.AddDIV(EDiv);
}

實際專案建議改用佇列或資料庫層面的鎖機制（如 sp_getapplock），以提升效能。

四、TreeView 視覺化驗證

資料寫入後，透過 ASP.NET TreeView 控件繫結資料庫中的父子關係，即可直觀呈現權限樹結構，便於後續的角色授權操作。

總結

本文完整示範了從前端標記、JS 遞歸掃描、父子關係解析、AJAX 落地到視覺化驗證的全鏈路實作。下一階段將著手權限分配介面與頁面動態渲染邏輯的開發。