ASP.NET GridView 完整實戰：資料繫結、滑鼠懸浮亮列、刪除確認與 DataKey 安全刪除模式

GridView 是 WebForms 核心資料展示控件。本文以「部門管理」為例，完整示範：欄位定義、資料繫結、DataKeyNames 主鍵綁定、RowDataBound 註冊客戶端亮列/刪除確認、RowDeleting 伺服端安全刪除與重新繫結。

ASPX 標記定義

<asp:GridView ID="gvDepartList" runat="server"
    AutoGenerateColumns="False"
    DataKeyNames="DepartId"  <!-- 關鍵：主鍵欄位，不顯示於介面但供伺服端取用 -->
    OnRowDeleting="gvDepartList_RowDeleting"
    OnRowDataBound="gvDepartList_RowDataBound"
    Width="600px">
  <Columns>
    <asp:TemplateField HeaderText="部門名稱">
      <ItemTemplate>
        <asp:Label runat="server" Text='<%# Eval("DepartName") %>' Style="text-align:center" />
      </ItemTemplate>
    </asp:TemplateField>

    <asp:BoundField HeaderText="機構" DataField="BranchId" />
    <asp:BoundField HeaderText="負責人" DataField="PrincipalUser" />
    <asp:BoundField HeaderText="聯系電話" DataField="ConnectTelNo" />
    <asp:BoundField HeaderText="移動電話" DataField="ConnectMobileTelNo" />
    <asp:BoundField HeaderText="傳真" DataField="Faxes" />

    <asp:TemplateField HeaderText="修改">
      <ItemTemplate>
        <asp:ImageButton ID="imgEdit" runat="server"
            ImageUrl="../images/edit.gif"
            CommandName="Edit"
            CommandArgument='<%# Eval("DepartId") %>' />
      </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="刪除">
      <ItemTemplate>
        <asp:ImageButton ID="imgDelete" runat="server"
            ImageUrl="../images/delete.gif"
            CommandName="Delete"  <!-- 觸發 RowDeleting -->
            CommandArgument='<%# Eval("DepartId") %>'
            OnClientClick="return confirm('確定刪除嗎?');" /> <!-- 客戶端確認 -->
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

後置碼核心邏輯

1. Page_Load 繫結資料

protected void Page_Load(object sender, EventArgs e) {
  if (!IsPostBack) BindData();
}

private void BindData() {
  gvDepartList.DataSource = new DepartInfoManager().GetDepartInfos(-1);
  gvDepartList.DataBind();
}

2. RowDataBound：滑鼠亮列 (純屬視覺增強)

protected void gvDepartList_RowDataBound(object sender, GridViewRowEventArgs e) {
  if (e.Row.RowType == DataControlRowType.DataRow) {
    // 滑鼠進入/離開切換背景色
    e.Row.Attributes["onmouseover"] = "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#6699ff';";
    e.Row.Attributes["onmouseout"] = "this.style.backgroundColor=currentcolor;";

    // 也可在這裡針對特定按鈕加確認，但建議直接在標記用 OnClientClick
  }
}

3. RowDeleting：安全刪除模式

protected void gvDepartList_RowDeleting(object sender, GridViewDeleteEventArgs e) {
  // 方式一：透過 DataKeys 取得主鍵 (推薦，不依賴控件結構)
  string departId = gvDepartList.DataKeys[e.RowIndex].Value.ToString();

  // 方式二：透過 CommandArgument (備選，需 FindControl)
  // ImageButton btn = (ImageButton)gvDepartList.Rows[e.RowIndex].FindControl("imgDelete");
  // string departId = btn.CommandArgument;

  DepartInfoManager mgr = new DepartInfoManager();
  if (mgr.DeleteDepart(departId)) {
    // 刪除成功：重新繫結 + 友善提示
    BindData();
    ShowMessage("刪除成功！", MessageType.Success);
  } else {
    ShowMessage("刪除失敗，請稍後再試。", MessageType.Error);
  }
}

關鍵最佳實踐總結

常見坑點與避雷

1. 忘設 DataKeyNames → 只能靠 FindControl 取 CommandArgument，易因控件 ID 變更而斷。
2. 刪除邏輯未重新繫結 → 畫面仍顯示已刪除資料，造成使用者困惑。
3. 大量資料未分頁 → AllowPaging="True" + PageSize，並處理 PageIndexChanging。
4. 連線/命令未用 using → 連線洩漏，資料庫連線池耗盡。

現代化遷移提示

新專案建議採用 ASP.NET Core + Razor Pages / MVC + 前端表格庫 (DataTables, AG Grid, TanStack Table)，透過 Web API 取得 JSON 資料，前端負責渲染、排序、分頁、刪除確認，後端只提供 RESTful 端點，關注點分離更徹底。