ASP.NET MVC：Ajax删除DataTable行后无需刷新更新UI的方法

在ASP.NET MVC项目中使用DataTable展示书籍数据时，点击删除按钮成功删除数据库记录后，无需刷新页面直接在UI中移除对应行的解决方案如下：

步骤1：优化视图中表格行的标识 #

在视图的表格行中添加与书籍ID关联的属性，方便后续精准定位要删除的行：

<table class="table table-bordered table-hover" id="books">
    <thead>
        ...
    </thead>
    <tbody>
        @foreach (var book in model)
        {
            <!-- 给行添加关联书籍ID的属性 -->
            <tr data-book-id="@book.Id">
                <td>@Html.ActionLink(book.Name, "Details", "Books", new { id = book.Id })</td>
                <td>@book.Author</td>
                <td>@book.Type.Type</td>
                <td>@book.NumberInStock</td>
                <td> 
                    <button data-book-id="@book.Id" class="btn btn-danger js-delete book-delete">Delete</button> 
                </td>
            </tr>
        }
    </tbody>
</table>

步骤2：修改Ajax请求的成功回调逻辑 #

去掉location.reload()，改用DataTable的API直接删除对应行并更新表格显示，同时优化事件绑定逻辑：

$(document).ready(function () {
    var myDataTable = $("#books").DataTable({
        // 保留原有配置项
    });

    // 用事件委托绑定删除按钮点击事件，避免重复绑定
    $("#books").on("click", ".book-delete", function (e) {
        var button = $(this);
        var bookId = button.data("book-id");
        var result = confirm('确定要删除这本书吗？');
        
        if (result) {
            var form = $('#__AjaxAntiForgeryForm');
            var token = $('input[name="__RequestVerificationToken"]', form).val();
            
            $.ajax({
                url: "/Books/Delete/" + bookId,
                method: "POST",
                data: {
                    __RequestVerificationToken: token,
                    someValue: "Your Custom Secret String"
                },
                success: function () {
                    // 通过书籍ID定位目标行，用DataTable API删除并刷新表格
                    myDataTable.row('tr[data-book-id="' + bookId + '"]').remove().draw(false);
                    // draw(false)表示保留当前分页、排序状态，不跳回第一页
                },
                statusCode: {
                    500: function () {
                        alert("删除失败，请稍后重试");
                    }
                }
            });
        }
    });
});

关键说明： #

• myDataTable.row().remove()：通过DataTable实例精准定位并移除目标行
• .draw(false)：重新绘制表格时保留当前页面的分页、排序状态，提升用户体验
• 事件委托：直接绑定到表格元素上，无需依赖drawCallback重复绑定事件，避免多次触发问题

内容的提问来源于stack exchange，提问作者Nora