ASP.NET Web Pages - WebGrid 幫助器實戰：自動化資料表格渲染、分頁、排序完整指南

WebGrid 幫助器消除手寫 HTML 表格的繁瑣，提供內建分頁、排序、格式化功能，以極少程式碼產出專業級資料表格。

傳統手寫 HTML 表格的痛點

@{
 var db = Database.Open("SmallBakery");
 var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}
<html><body>
<h1>Small Bakery Products</h1>
<table>
<tr><th>Id</th><th>Product</th><th>Description</th><th>Price</th></tr>
@foreach (var row in db.Query(selectQueryString)) {
 <tr>
 <td>@row.Id</td>
 <td>@row.Name</td>
 <td>@row.Description</td>
 <td align="right">@row.Price</td>
 </tr>
}
</table>
</body></html>

缺點： 重複樣板程式碼、無分頁導致效能問題、無排序功能、格式化邏輯分散、維護困難。

WebGrid 幫助器核心優勢

• ✅ 自動產生 HTML 表格：含 thead、tbody、語意化標記
• ✅ 內建分頁**：首頁/上頁/下頁/末頁、頁碼導航、每頁筆數可調
• ✅ 內建排序**：點擊欄標自動排序 (ASC/DESC 切換)、多欄排序支援
• ✅ 彈性格式化**：欄位自訂格式、條件式樣式、樣板化渲染
• ✅ AJAX 分頁/排序**：無重新整理體驗 (需 jQuery + jquery.unobtrusive-ajax)

WebGrid 基礎實作：最小可行程式碼

@{
 var db = Database.Open("SmallBakery");
 var data = db.Query("SELECT * FROM Product ORDER BY Id");
 var grid = new WebGrid(data);
}
<html><head><title>WebGrid Demo</title></head><body>
<h1>Small Bakery Products</h1>
<div id="grid">
@grid.GetHtml()
</div>
</body></html>

執行範例 »

WebGrid 進階配置：完整參數解析

@{
 var db = Database.Open("SmallBakery");
 var data = db.Query("SELECT * FROM Product");
 
 var grid = new WebGrid(
 source: data,
 defaultSort: "Name",           // 預設排序欄位
 rowsPerPage: 10,               // 每頁筆數
 canPage: true,                 // 啟用分頁
 canSort: true,                 // 啟用排序
 ajaxUpdateContainerId: "grid", // AJAX 更新容器 ID
 ajaxUpdateCallback: "onGridUpdate" // AJAX 回呼函數
 );
}
<div id="grid">
@grid.GetHtml(
 tableStyle: "table table-striped table-bordered", // Bootstrap 樣式類別
 headerStyle: "thead-dark",
 footerStyle: "tfoot-light",
 rowStyle: "tbody-row",
 alternatingRowStyle: "alt-row",
 selectedRowStyle: "selected-row",
 mode: WebGridPagerModes.All, // 分頁模式: All, NextPrevious, FirstLast, Numeric
 firstText: "<< 首頁",
 previousText: "< 上頁",
 nextText: "下頁 >",
 lastText: "末頁 >>",
 numericLinksCount: 5,        // 數字連結顯示數量
 columns: grid.Columns(
 grid.Column("Id", "編號", style: "col-id", canSort: true),
 grid.Column("Name", "產品名稱", style: "col-name"),
 grid.Column("Description", "說明", style: "col-desc"),
 grid.Column("Price", "價格", 
 format: @<text>@item.Price.ToString("C")</text>, // 貨幣格式化
 style: "col-price text-right"
 ),
 grid.Column("", "操作", 
 format: @<a href="@Href("~/Edit/@item.Id")">編輯</a> | 
 <a href="@Href("~/Delete/@item.Id")" class="delete">刪除</a>,
 style: "col-action"
 )
 )
)
</div>

欄位定義進階技巧

AJAX 無重整分頁與排序

<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

@{
 var grid = new WebGrid(data, ajaxUpdateContainerId: "grid");
}
<div id="grid">
@grid.GetHtml(...)
</div>

<script>
function onGridUpdate() {
 console.log("Grid updated via AJAX");
 // 可在此重新綁定事件、觸發動畫等
}
</script>

效能優化建議

• 資料庫層分頁：大量資料請使用 OFFSET/FETCH (SQL Server 2012+) 或 ROW_NUMBER() 僅查詢當頁資料，避免全表載入記憶體
• 快取 WebGrid 實例：靜態資料可快取 WebCache.Set("products_grid", grid, 300)
• 精簡欄位**：SQL 僅 SELECT 必要欄位，減少傳輸頻寬

遷移建議：現代前端表格元件

新專案建議採用前端表格庫分離關注點：

• DataTables.net (jQuery)**：功能最完整、生態豐富
• AG Grid (React/Vue/Angular/Vanilla)**：企業級、虛擬捲軸、Excel 匯出
• TanStack Table (Headless UI)**：型別安全、框架無關、極致彈性
• Blazor DataGrid**：.NET 全棧、WebAssembly/Server 雙模式

後端僅提供 Web API (JSON)，前端負責渲染、分頁、排序、篩選、編輯。