RapidWebDev 開源框架：基於 XML 配置的動態 UI 介紹

承接前文專案實戰，本文系統介紹 RapidWebDev 框架核心——動態頁面 XML 配置 (*.dp.xml)，詳細說明五大面板組件、開發流程、主要組件功能與完整實戰案例。

一、基礎概念與頁面結構

一個動態頁面包含五種面板（僅 GridPanel 必須，ButtonPanel 可多個，其他可選）：

• QueryPanel：查詢條件輸入與觸發
• ButtonPanel：業務按鈕容器
• GridPanel：查詢結果顯示 (必須)
• DetailPanel：彈出視窗，新增/編輯/檢視單筆資料
• AggregatePanel：彈出視窗，批次操作/自訂業務邏輯

面板顯示順序 = 配置檔中順序。

二、開發流程

1. 建立 filename.dp.xml，撰寫配置內容
2. 實作 IDynamicPage 介面 (查詢、單筆刪除)
3. 實作 IDetailPanel 介面 (建立、修改、檢視單筆)
4. 實作 IAggregatePanel 介面 (批次處理、其他邏輯)
5. 為 DetailPanel 建立無後置碼 ASCX 模板
6. 為 AggregatePanel 建立無後置碼 ASCX 模板

提供三個抽象基底類別實作基本操作，一般情況無需從零開始。

三、五大組件詳細功能

1. QueryPanel

• 每頁最多一個
• 內建「查詢」、「重設」按鈕
• 查詢時依配置動態產生 Linq2SQL，呼叫 IDynamicPage.Query 回傳資料繫結至 GridPanel
• 重設：清空條件並重新查詢

2. ButtonPanel

• 可多個，預設命令：New (需配合 DetailPanel)、Print/DownloadExcel (需配合 AggregatePanel)
• 可擴充自訂命令 (資料匯入、批次刪除、批次審核等)
• 按鈕命令直接掛鉤權限系統，零程式碼實現權限控制

3. GridViewPanel

• 支援 CheckBox 欄、檢視/修改/刪除按鈕、資料欄
• CheckBox + ButtonPanel/AggregatePanel = 批次處理
• 檢視/修改按鈕 + DetailPanel = 單筆瀏覽編輯
• 刪除按鈕呼叫 IDynamicPage.Delete
• 資料欄支援：資料轉換 (UserId→使用者名稱)、字串格式化、圖片顯示、HTML 樣式包裝、排序、顯示/隱藏切換

4. DetailPanel

• 需指定 ASCX 模板 + 實作 IDetailPanel
• 按鈕：「儲存並關閉」、「儲存並新增」(編輯模式無)、「取消」
• 儲存並關閉 → Create/Update → 關閉並重新整理 Grid
• 儲存並新增 → Create → Reset 重置頁面 → 連續新增
• 取消 → 放棄變更 → 關閉

5. AggregatePanel

• 處理 CRUD 外業務邏輯 (匯入、審核、類似 VS 尋找參考等)
• 目前限單一，團隊正改進支援多個

四、實戰案例：產品入庫掃描頁面

需求：

1. 掃描條碼連續新增至臨時清單，錯誤提示
2. 清單可刪除、修改數量
3. 列印/匯出 Excel
4. 勾選部分/全部確認入庫，彈出匯總資訊 (總金額、總數、分類彙總)
5. 臨時資料存 Session

UI 規劃與配置步驟：

上述步驟完成完整功能，程式碼量減少 50%+，配合框架輔助 API 更可大幅縮減。後續章節將逐節詳細講解 XML 配置節點與屬性。