GridView 多選刪除確認優化：先檢查勾選再彈出確認對話框

痛點分析

一般刪除確認流程：使用者點擊「刪除」按鈕 → 彈出 confirm 對話框 → 確認後送出 → 後端發現無勾選記錄 → 再彈出「請選擇記錄」警示。這導致使用者經歷兩次彈窗干擾，體驗不佳。

改進策略

調整順序：先在客戶端檢查是否有勾選項目，無勾選則直接警示；有勾選才彈出刪除確認。 這樣可避免無效的確認對話框。

前端實作

GridView 第一欄放置 CheckBox，外部放一個 Button 觸發刪除：

<asp:Button ID="ButtonDelete" Text="Delete" runat="Server" OnClick="ButtonDelete_Click" CausesValidation="false" />
<asp:GridView ID="GvCutterType" runat="server" DataKeyNames="CutterTypeId" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemStyle BorderWidth="1" BorderColor="#c0c0c0" Width="1%" />
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" onclick="Javascript:changeRowBgColor(this)" />
            </ItemTemplate>
        </asp:TemplateField>
        <!-- 其他欄位 -->
    </Columns>
</asp:GridView>

後端註冊客戶端腳本

protected void Page_Load(object sender, EventArgs e)
{
    this.ButtonDelete.Attributes.Add("onclick", "return ConfirmOnDelete();");
}

protected void ButtonDelete_Click(object sender, EventArgs e)
{
    // 執行刪除邏輯
}

JavaScript 確認邏輯

function ConfirmOnDelete() {
    var objgv = document.getElementById("<%= GvCutterType.ClientID %>");
    if (!objgv) return false;

    var rc = objgv.rows.length;
    var checkedCount = 0;

    for (var i = 0; i < rc; i++) {
        var inputs = objgv.rows[i].cells[0].getElementsByTagName("input");
        if (inputs[0] && inputs[0].type === "checkbox" && inputs[0].checked) {
            checkedCount++;
        }
    }

    if (checkedCount <= 0) {
        alert("請先選擇要刪除的記錄。");
        return false;
    }

    return confirm("確定要刪除已選擇的 " + checkedCount + " 筆記錄嗎？");
}

進階優化建議

• 全選/取消全選：在 HeaderTemplate 加入 CheckBox，配合 JavaScript 實作一鍵全選。
• 列背景色變化：changeRowBgColor 可在勾選時高亮該列，增強視覺回饋。
• 後端二次驗證：客戶端檢查只能阻擋誤操作，後端仍需驗證 DataKeys 確保資料完整性。
• 批次刪除效能：大量資料建議使用 IN 子句或 Table-Valued Parameter 一次刪除，避免逐筆執行 SQL。

總結

這個小調整雖簡單，卻能顯著改善使用者體驗：「不干擾無操作的使用者，只在真正需要確認時才彈窗」。