ASP.NET DataGrid 常見錯誤與最佳實踐：避開新手到專家都會踩的坑

`DataGrid` 是 ASP.NET 1.x 時代最強大的資料顯示控制項，功能豐富但也最容易誤用。本文歸納實務開發中最高頻的 5 大錯誤，從「重複造輪子」到「ViewState 濫用」，提供修正代碼與架構級建議，助您寫出高效能、可維護的資料表格頁面。

錯誤一：手工拼接 HTML 表格，不用 DataGrid

❌ 反模式

Response.Write("");
while (reader.Read())
{
    Response.Write("");
}
Response.Write("
" + reader[0] + "
");

✅ 正確做法

<asp:DataGrid runat="server" ID="grid" DataSourceID="src" />
// 後台
grid.DataSource = reader; // 或 DataTable/DataSet
grid.DataBind();

**理由**：DataGrid 內建分頁、排序、編輯、樣式、事件模型，手工拼接違反 DRY、難以維護、無法受惠於框架優化。

錯誤二：Page_Load 未檢查 IsPostBack，導致編輯值被覆蓋

❌ 反模式

void Page_Load() 
{
    BindGrid(); // 每次 PostBack 都重新綁定，編輯模式的值被資料庫原值覆蓋
}

✅ 正確做法

void Page_Load() 
{
    if (!IsPostBack) BindGrid();
}

⚠️ 例外情況

若 `DataGrid` 動態產生欄位、或依賴 ViewState 還原複雜狀態，**每次 PostBack 都需綁定**。此時應在編輯事件中手動保存使用者輸入，或改用 `ObjectDataSource` 自動管理狀態。

錯誤三：需要客製化時仍保持 AutoGenerateColumns="True"

❌ 反模式

<asp:DataGrid AutoGenerateColumns="True" ...>
  <Columns> <!-- 手工加入欄位 --> </Columns>
</asp:DataGrid>

**後果**：自動產生欄位 + 手工欄位 = **重複欄位** (先手工、後自動)。

✅ 正確做法

<asp:DataGrid AutoGenerateColumns="False" ...>
  <Columns>
    <asp:BoundColumn DataField="Name" HeaderText="姓名" />
    <asp:TemplateColumn HeaderText="操作">
      <ItemTemplate>
        <asp:LinkButton CommandName="Edit" Text="編輯" />
      </ItemTemplate>
    </TemplateColumn>
  </Columns>
</asp:DataGrid>

**原則**：**只要有一點客製化 (格式、按鈕、下拉、驗證)，就關閉自動產生，全部欄位顯式宣告。**

錯誤四：大量資料未分頁，導致記憶體暴增、回應逾時

❌ 反模式

grid.DataSource = GetAllMillionRows(); // 一次載入百萬筆
grid.DataBind();

✅ 正確做法：啟用自訂分頁

<asp:DataGrid AllowCustomPaging="True" 
    PageSize="20" 
    OnPageIndexChanged="Grid_PageIndexChanged" ... />

void Grid_PageIndexChanged(object src, DataGridPageChangedEventArgs e)
{
    grid.CurrentPageIndex = e.NewPageIndex;
    BindGrid(e.NewPageIndex, e.PageSize); // 只查當頁資料
}

**SQL 配合**：`OFFSET @Offset ROWS FETCH NEXT @PageSize ROWS ONLY` (SQL 2012+) 或 `ROW_NUMBER()` 分頁。

錯誤五：濫用 ViewState，頁面大小超標、傳輸緩慢

現象

• 頁面 ViewState 隱藏欄位 > 100KB (甚至 MB 級)
• 每次 PostBack 上傳巨大 ViewState，頻寬浪費、解析慢

解決方案

進階最佳實踐清單

1. **資料綁定分離**：使用 `ObjectDataSource` 宣告式綁定，後台只處理商業邏輯
2. **樣式外部化**：`CssClass` 而非內嵌屬性，支援主題切換
3. **編輯模式模板化**：`EditItemTemplate` 內放驗證控制項、下拉選單
4. **事件集中處理**：`ItemCommand` 統一處理 `Edit`/`Update`/`Cancel`/`Delete`/`Select`
5. **匯出功能**：`RenderControl(HtmlTextWriter)` 輸出 Excel/CSV/PDF
6. **無障礙**：`UseAccessibleHeader="True"`、`HeaderStyle.CssClass`、`Caption`

現代化遷移：DataGrid → GridView → 前端表格

DataGrid 雖已退役，但其設計模式——**宣告式欄位、事件驅動編輯、ViewState 狀態管理、資料源抽象**——深刻影響了後續所有 .NET 資料顯示控制項。理解這些常見錯誤與最佳實踐，不僅是維護舊系統的生存技能，更是掌握「資料網格元件設計精髓」的捷徑。