ASP.NET GridView 控制項實作資料顯示、分頁與刪除（第 8 節）

前言

GridView 是 Web Forms 中最強大的資料呈現控制項。本節從零開始建構新聞列表頁面，包含 ObjectDataSource 資料繫結、自動分頁、自訂欄位、刪除確認，奠定後續編輯功能基礎。

資料源控制項 vs 資料繫結控制項

步驟一：建立 ObjectDataSource

1. 工具箱 → 資料 → 拖入 ObjectDataSource
2. 智慧標籤 → 設定資料來源
3. 選擇業務物件：chuli.newschuli
4. 選擇方法：Select: findallnews()

步驟二：實作資料存取方法

public class newschuli {
    private SqlConnection conn;
    
    public DataSet findallnews() {
        conn = dbconn.GetConnection();
        conn.Open();
        SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM news", conn);
        DataSet ds = new DataSet();
        sda.Fill(ds);
        return ds;
    }
    
    // 刪除方法（供後續使用）
    public static void deletenews(newsclass news) {
        using (SqlConnection cn = dbconn.GetConnection()) {
            cn.Open();
            string sql = "DELETE FROM news WHERE ID = @id";
            using (SqlCommand cmd = new SqlCommand(sql, cn)) {
                cmd.Parameters.AddWithValue("@id", news.ID);
                cmd.ExecuteNonQuery();
            }
        }
    }
}

步驟三：建立 GridView 並繫結

1. 拖入 GridView → 智慧標籤選擇剛建立的 ObjectDataSource
2. 智慧標籤 → 自動套用格式 選擇樣式
3. 設定 HorizontalAlign="Center" 置中
4. 編輯欄位：移除自動產生欄位，手動加入 BoundField 對應資料庫欄位

步驟四：啟用分頁

1. GridView 智慧標籤 → 勾選 啟用分頁
2. 或設定 AllowPaging="True" PageSize="4"

步驟五：加入刪除功能

1. ObjectDataSource 設定 DeleteMethod="deletenews"
2. GridView 設定 DataKeyNames="ID"
3. 編輯欄位 → 加入 CommandField → 勾選 刪除
4. 將刪除按鈕轉為 TemplateField，設定 OnClientClick="return confirm('確認刪除此資訊？');"

執行結果

GridView 關鍵屬性速查

ObjectDataSource 參數對應規則

方法參數名稱必須與 GridView/DataKeyNames/輸入控制項 ID 一致：

// 刪除方法參數名稱 news 對應 DataKeyNames="ID" 的值
public static void deletenews(newsclass news) { ... }

// 更新方法參數對應
public static void modifynews(string title, string contents, int id) { ... }
// GridView 會自動對應 EditItemTemplate 中 ControlID="title" 的值

結語

GridView + ObjectDataSource 是 Web Forms 快速建構資料管理介面的經典組合。掌握資料源設定、欄位自訂、分頁、刪除確認等核心技巧，可大幅減少重複程式碼。下一節將進階實作編輯/更新與輸入驗證功能。