ASP.NET DataGrid 動態欄位管理：執行時新增、隱藏與刪除欄位完整實作

ASP.NET `DataGrid` 欄位通常在設計階段透過屬性建立器或 HTML 標記靜態定義，專案上線後若需調整欄位顯示，往往需修改代碼重新部署。本文示範如何利用 `DataGridColumnCollection` 在**執行期動態新增、隱藏、移除欄位**，並透過 `Visible` 屬性控制顯示狀態，打造靈活的動態報表介面。

核心物件模型

• DataGrid.Columns：回傳 `DataGridColumnCollection` 集合
• DataGridColumnCollection.Add(column)：新增欄位
• DataGridColumnCollection.Remove(column) / RemoveAt(index)：移除欄位
• DataGridColumn.Visible：控制欄位顯示/隱藏（保留於集合中）

完整 C# 實作範例

頁面佈局

• `Panel` 容器
• `DataGrid`：`AutoGenerateColumns="False"`
• `DropDownList`：列出可操作的欄位名稱
• 兩個 `Button`：分別執行「隱藏欄位」與「顯示欄位」

動態建立欄位與資料綁定

private void CreateDataGrid()
{
    // 關鍵：關閉自動產生欄位
    DataGrid1.AutoGenerateColumns = false;

    // 取得資料來源（示範用自訂 DB.GetDataSet()）
    DataSet ds = DB.GetDataSet();

    // 動態建立三個 BoundColumn
    BoundColumn col = new BoundColumn();
    col.HeaderText = "User ID";
    col.DataField = "ID";
    DataGrid1.Columns.Add(col);

    col = new BoundColumn();
    col.HeaderText = "User Name";
    col.DataField = "Name";
    DataGrid1.Columns.Add(col);

    col = new BoundColumn();
    col.HeaderText = "User Address";
    col.DataField = "Address";
    DataGrid1.Columns.Add(col);

    // 綁定資料
    DataGrid1.DataSource = ds.Tables[0];
    DataGrid1.DataBind();
}

填充下拉選單供使用者選擇操作欄位

private void FillColumnsList()
{
    DropDownList1.Items.Clear();
    foreach (DataGridColumn col in DataGrid1.Columns)
    {
        DropDownList1.Items.Add(new ListItem(col.HeaderText, col.DataField));
    }
}

隱藏/顯示欄位事件處理

protected void btnHide_Click(object sender, EventArgs e)
{
    string dataField = DropDownList1.SelectedValue;
    DataGridColumn col = DataGrid1.Columns.Cast()
                        .FirstOrDefault(c => c.DataField == dataField);
    if (col != null) col.Visible = false;
}

protected void btnShow_Click(object sender, EventArgs e)
{
    string dataField = DropDownList1.SelectedValue;
    DataGridColumn col = DataGrid1.Columns.Cast()
                        .FirstOrDefault(c => c.DataField == dataField);
    if (col != null) col.Visible = true;
}

進階應用場景

注意事項

1. ViewState 膨脹：隱藏欄位仍會序列化進 ViewState，大量欄位建議改用 `Remove` 徹底移除
2. 欄位索引變動：動態增刪後 `Columns[index]` 可能錯位，請改用 `DataField` 或 `HeaderText` 查找
3. 資料重新綁定：修改 `Columns` 集合後必須重新 `DataBind()` 才生效
4. 版本適用性：本技巧同樣適用於 `GridView`（繼承自 `BaseDataList`）

掌握 `DataGridColumnCollection` 操作，能讓報表介面從「死板的靜態定義」進化為「使用者可配置、權限可控、業務可擴充」的動態儀表板，是 WebForms 開發者必備的進階技能。