ASP.NET 2.0 GridView 進階技巧：自動格式化、欄位客製化、RowDataBound 條件式著色與資料格式化字串

GridView 是 ASP.NET 2.0 最強大的資料呈現控制項，內建支援分頁、排序、編輯、刪除、格式化，透過智慧標記與設計工具可實現零程式碼資料操作。本文深入探討進階格式化、欄位控制、條件式呈現等實務技巧。

自動格式化與智慧標記

• 右鍵 GridView → 「自動格式化」：內建 10+ 專業配色方案一鍵套用。
• 智慧標記（右上角箭頭）→ 「編輯欄位」：視覺化管理 BoundField、TemplateField、CommandField 等欄位屬性。

欄位層級格式化控制

<asp:GridView ID="productGridView" runat="server" DataSourceID="productsDataSource"
    DataKeyNames="ProductID" AutoGenerateColumns="False">
  <Columns>
    <asp:BoundField DataField="ProductID" HeaderText="ID" ReadOnly="True" SortExpression="ProductID">
      <ItemStyle HorizontalAlign="Center" />
    </asp:BoundField>
    <asp:BoundField DataField="ProductName" HeaderText="名稱" SortExpression="ProductName" />
    <asp:BoundField DataField="UnitPrice" HeaderText="單價" SortExpression="UnitPrice"
        DataFormatString="{0:C}" HtmlEncode="False">
      <ItemStyle HorizontalAlign="Right" />
    </asp:BoundField>
    <asp:BoundField DataField="UnitsInStock" HeaderText="庫存" SortExpression="UnitsInStock"
        DataFormatString="{0:D}">
      <ItemStyle HorizontalAlign="Right" />
    </asp:BoundField>
  </Columns>
  
  <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
  <AlternatingRowStyle BackColor="White" />
  <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
  <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
  <PagerStyle HorizontalAlign="Center" ForeColor="#8C4510" />
</asp:GridView>

常用資料格式化字串

重要：HtmlEncode="False" 允許貨幣符號正確顯示，否則會被編碼為 $。

RowDataBound 條件式資料列著色

protected void productGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        int unitsInStock = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "UnitsInStock"));
        if (unitsInStock == 0)
        {
            e.Row.BackColor = System.Drawing.Color.Yellow;
            e.Row.ToolTip = "缺貨中";
        }
        else if (unitsInStock < 10)
        {
            e.Row.BackColor = System.Drawing.Color.LightYellow;
        }
    }
}

TemplateField 進階客製化

<asp:TemplateField HeaderText="狀態">
  <ItemTemplate>
    <asp:Label ID="lblStock" runat="server" 
        Text='<%# Eval("UnitsInStock", "庫存: {0}") %>'
        ForeColor='<%# (int)Eval("UnitsInStock") == 0 ? System.Drawing.Color.Red : System.Drawing.Color.Green %>' />
  </ItemTemplate>
  <EditItemTemplate>
    <asp:TextBox ID="txtStock" runat="server" Text='<%# Bind("UnitsInStock") %>' Width="50" />
  </EditItemTemplate>
</asp:TemplateField>

分頁與排序進階設定

• AllowPaging="True"、PageSize="10"、PagerSettings-Mode="NumericFirstLast"。
• AllowSorting="True"，BoundField.SortExpression 自動對應欄位名稱。
• Sorting 事件可攔截自訂排序邏輯（如多欄位排序）。

效能優化建議

• EnableViewState="False" 僅呈現資料無編輯需求時關閉，減少頁面大小。
• DataSourceMode="DataReader" (SqlDataSource) 僅前向讀取，記憶體效率優於 DataSet。
• 大量資料考慮自訂分頁（AllowCustomPaging）僅查詢當頁資料。

完整範例輸出效果

執行後呈現：貨幣欄位顯示 NT$12.50、庫存 0 的列黃底紅字提示「缺貨中」、標題深棕底白字、隔列交替色、分頁器置中數字導航。

GridView 豐富的聲明式屬性與事件模型，讓開發者以最少程式碼實現企業級資料表格呈現需求。