jQuery 實現 Repeater 無刷新批量刪除（含 ASP.NET 後端代碼）

前端頁面結構

<head runat="server">
    <script src="Js/jquery-1.5.1.min.js"></script>
    <script src="Js/Demo.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="content">
            <table>
                <asp:Repeater ID="Repeater1" runat="server">
                    <HeaderTemplate>
                        <tr><th><input type="checkbox" id="chkAll" /></th><th>學生ID</th><th>學生姓名</th></tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td><input type="checkbox" value="<%# Eval("studentId") %>" /></td>
                            <td><%# Eval("studentId") %></td>
                            <td><%# Eval("name") %></td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </table>
        </div>
        <input id="btnDel" type="button" value="刪除選中" />
    </form>
</body>

關鍵點：Checkbox 的 value 直接綁定主鍵 studentId，方便前端收集。

後端代碼

protected void Page_Load(object sender, EventArgs e)
{
    StudentBll bll = new StudentBll();
    // 處理刪除請求（QueryString 傳遞 ID 陣列字串）
    if (!string.IsNullOrEmpty(Request.QueryString["id"]))
    {
        string ids = Request.QueryString["id"]; // 格式: '1','2','3'
        bll.Delete(ids);
    }
    // 重新綁定（或局部更新時只需回傳 HTML 片段）
    Repeater1.DataSource = bll.SelectALL();
    Repeater1.DataBind();
}

Demo.js 核心邏輯

$(function () {
    // 簡易 Trim
    function trim(str) { return str.replace(/^[\s\n]+|[\s\n]+$/g, ''); }

    $("#btnDel").click(function () {
        var ids = "''"; // 起始空字串配合 SQL IN ('', '1', '2')
        $("#content input:checked").each(function () {
            // 找到同行的第 2 個 td (studentId)
            var id = trim($(this).closest('tr').find('td:eq(1)').text());
            if (id) ids += ",'" + id + "'";
        });

        if (ids === "''") { alert("請先選擇要刪除的項目"); return; }

        // 局部更新：載入同頁面 #content 區塊
        $("#content").load("Default.aspx?id=" + encodeURI(ids) + " #content", function () {
            // 重新綁定全選 checkbox 事件等
        });
    });

    // 全選/取消
    $("#chkAll").click(function () {
        $("#content input:checkbox").prop("checked", this.checked);
    });
});

關鍵技術點

1. jQuery .load(url selector)：僅載入回應中指定選擇器的片段，實現無刷新局部更新。
2. ID 收集策略：利用 closest('tr') 定位行，再取主鍵欄位文字，避免依賴隱藏欄位。
3. 後端刪除：接收字串 '1','2','3' 直接拼入 SQL IN 子句（注意參數化防注入）。
4. 確認對話框：建議在刪除前加 confirm()。

擴展建議

• 改用 $.post 發送 JSON 陣列，後端回傳 JSON 結果，前端再重繪，分離關注點。
• 加入 Loading 狀態、錯誤處理、刪除動畫。
• 若資料量大，考慮分頁時跨頁選取的 ID 持久化。