ASP.NET GridView 控制項實作資料修改與驗證（第 9 節）

前言

承接第 8 節（GridView 顯示與刪除），本節實作 GridView 的編輯/更新功能，包含模板欄位轉換、輸入驗證、刪除確認對話框，展示 GridView 進階應用。

資料存取：更新方法

public static void modifynews(newsclass news) {
    using (SqlConnection cn = dbconn.GetConnection()) {
        cn.Open();
        string sql = "UPDATE news SET title = @title, contents = @contents WHERE ID = @id";
        using (SqlCommand cmd = new SqlCommand(sql, cn)) {
            cmd.Parameters.AddWithValue("@title", news.Title);
            cmd.Parameters.AddWithValue("@contents", news.Contents);
            cmd.Parameters.AddWithValue("@id", news.ID);
            cmd.ExecuteNonQuery();
        }
    }
}

ObjectDataSource 設定更新方法

1. ObjectDataSource 智慧標籤 → 設定資料來源 → 更新 索引標籤
2. 選擇 modifynews(newsclass) 方法
3. GridView 設定 DataKeyNames="ID"

啟用編輯/刪除功能

1. GridView 智慧標籤 → 編輯欄位
2. 從 CommandField 加入：編輯、更新、取消 與 刪除

模板欄位進階：輸入驗證

1. 編輯欄位對話框 → 選擇「新聞標題」 → 轉換為 TemplateField
2. GridView 智慧標籤 → 編輯模板 → 選擇 EditItemTemplate
3. 拖入 RequiredFieldValidator，設定：
   • ControlToValidate：標題輸入框 ID
   • ErrorMessage：標題不可為空
   • ValidationGroup：與更新按鈕一致

模板欄位進階：刪除確認對話框

1. 編輯欄位 → 選擇「刪除」按鈕 → 轉換為 TemplateField
2. 編輯模板 → ItemTemplate 中的 LinkButton/ImageButton
3. 設定 OnClientClick="return confirm('確認要刪除嗎？');"

執行效果

GridView 編輯流程圖解

1. 使用者點擊「編輯」連結
   ↓
2. GridView 進入編輯模式，該列轉為 EditItemTemplate
   ↓
3. 使用者修改資料，點擊「更新」
   ↓
4. 客戶端驗證（RequiredFieldValidator 等）
   ↓
5. 通過 → 觸發 ObjectDataSource Updating 事件
   ↓
6. 呼叫 modifynews() 更新資料庫
   ↓
7. GridView 重新繫結，恢復顯示模式

常見問題排查

GridView vs 現代替代方案

結語

GridView 透過 TemplateField、驗證控制項、客戶端腳本，能實作功能完整的資料編輯介面。雖然 Web Forms 架構在現代開發中較少用於新專案，但維護既有系統時，熟練掌握 GridView 進階技巧仍具實務價值。