ASP.NET WebForm 提供多種資料繫結控制項,功能豐富度、ViewState 體積、效能、彈性各異。本文從架構、功能、效能、適用場景四個維度完整比較,助你選型。
五大控制項核心比較表
| 特性 | GridView | ListView | DataList | Repeater | DetailsView/FormView |
| 資料呈現 | 表格 | 任意模板 | 流式/表格/重複 | 純模板 | 單筆表單/詳情 |
| 內建分頁 | 是 | 是 (DataPager) | 否 | 否 | 否 |
| 內建排序 | 是 | 是 | 否 | 否 | 否 |
| 內建編輯/刪除 | 是 | 是 | 否 | 否 | 是 |
| 群組/分組顯示 | 否 | 是 (GroupTemplate) | 否 | 否 | 否 |
| 版面彈性 | 低 (表格固定) | 極高 | 高 | 極高 | 高 |
| ViewState 體積 | 大 | 中 | 中 | 無 (不產生) | 中 |
| 渲染效能 | 較慢 | 中 | 中 | 最快 | 中 |
| 樣式控制 | RowStyle, AlternatingRowStyle 等 | CSS 類別完全控制 | ItemStyle, AlternatingItemStyle | 純 CSS | Field 樣式 |
| 資料繫結模式 | 宣告式/程式碼 | 宣告式/程式碼 | 宣告式/程式碼 | 宣告式/程式碼 | 宣告式/程式碼 |
| 適用場景 | 後台管理、需完整 CRUD 的表格 | 前台列表、群組顯示、高度客製化 | 簡單重複項目、舊專案相容 | 唯讀高流量列表、SEO 敏感頁面 | 單筆詳情、插入表單 |
詳細特性解析
GridView - 功能最完整的表格控制項
- 優點:零程式碼實現分頁、排序、選取、編輯、刪除;`AutoGenerateColumns` 快速原型。
- 缺點:ViewState 極大 (儲存所有資料、狀態);輸出 HTML 僵硬 (table/tr/td);大量資料效能差。
- 優化:`EnableViewState="false"` + 每次 `Page_Load` 重新繫結;使用 `DataKeyNames` 僅儲存主鍵;分頁大資料用 `CustomPaging`。
ListView - 現代化、彈性最高的繫結控制項 (3.5+)
- 核心模板:`LayoutTemplate` (外層)、`ItemTemplate`、`GroupTemplate` (群組)、`EmptyDataTemplate`、`InsertItemTemplate`、`EditItemTemplate`、`SelectedItemTemplate`、`AlternatingItemTemplate`。
- 分頁:搭配 `` 控制項,支援數字、上下頁、滑動等樣式。
- 群組顯示:`GroupTemplate` + `GroupItemCount` 實現每列 N 項 (如商品格狀列表)。
- ViewState:僅儲存必要狀態,比 GridView 小 50%+。
DataList - 舊版重複項目控制項 (1.0+)
- RepeatDirection:Horizontal/Vertical;`RepeatColumns` 控制每行項數;`RepeatLayout`:Table/Flow/UnorderedList。
- 無內建分頁/排序/編輯:需自行實作。
- 現狀:維舊專案用;新專案建議改 ListView 或 Repeater + 手工分頁。
Repeater - 最輕量、唯讀、純模板
- 零 ViewState:不儲存任何狀態,渲染最快、頻寬最小。
- 純模板:`HeaderTemplate`、`ItemTemplate`、`AlternatingItemTemplate`、`SeparatorTemplate`、`FooterTemplate`、`ItemSeparatorTemplate`。
- 無伺服器端事件:按鈕點擊需用 `ItemCommand` 事件 + `CommandName`/`CommandArgument`。
- 最佳搭檔:前台高流量列表 (新聞、商品、文章) + 輸出快取 (`OutputCache`)。
DetailsView / FormView - 單筆資料詳情與編輯
- DetailsView:欄位式呈現 (像屬性格),適合主從頁面的從表單筆編輯。
- FormView:完全模板化,適合高度客製化的單筆表單/詳情頁。
選型決策樹
需要編輯/刪除/分頁/排序?
├─ 是 → 需群組顯示/高度客製版面?
│ ├─ 是 → ListView + DataPager
│ └─ 否 → GridView (啟用 EnableViewState=false + 重新繫結)
└─ 否 → 唯讀顯示?
├─ 高流量/SEO/效能優先 → Repeater + OutputCache
├─ 簡單重複/需 RepeatColumns → DataList (維舊) 或 Repeater + CSS Grid/Flex
└─ 單筆詳情/表單 → DetailsView / FormView
現代替代方案
| 方案 | 優點 | 遷移建議 |
| ASP.NET Core + Razor Pages / MVC | 無 ViewState、效能高、前後端分離友善 | 新專案首選,舊專案漸進式遷移 |
| Blazor Server / WebAssembly | C# 全端、元件化、即時 UI | 互動性強、即時需求專案 |
| 前端框架 + Web API | Vue/React/Angular 生態豐富、使用者體驗佳 | 團隊具前端能力、長期維護專案 |
| GridView/Repeater + 輸出快取 | 零重構、立即見效 | 短期維舊、流量暴增緩解 |