如何在ASP.NET MVC中使用JQuery删除选中的表格行

我帮你梳理下当前代码里的几个关键问题，然后给出修正后的完整方案：

首先说下你代码里的问题点： #

• 复选框ID重复：HTML里每个复选框都用了id="empsToDel"，但ID是页面唯一标识，这会导致JQuery选择器只能选中第一个复选框，根本没法收集所有选中项。
• 收集选中值的逻辑错误：循环里的{ ID = $("input:checked").val() }不仅语法错了（对象属性应该用冒号:），而且每次都会取页面上第一个选中复选框的值，不是当前循环的那个。
• 删除逻辑没触发：你写了saveOrder函数，但删除的AJAX请求完全没和按钮的点击事件绑定，点击“ok”按钮自然没反应。
• 控制器参数可能不匹配：要确保前端传的JSON结构和控制器接收的参数类完全对应，不然模型绑定会失败。

修正后的HTML代码 #

<table>
    <tr>
        <th></th>
        <th>@Html.DisplayNameFor(model => model.Product.ProductName)</th>
    </tr>
    @foreach (var item in Model) {
    <tr>
        <!-- 去掉重复的ID，用name来标识复选框组 -->
        <td><input type="checkbox" class="checkbox" value="@item.ID" name="empsToDel" /></td>
        <td>@Html.DisplayFor(modelItem => item.Product.ProductName)</td>
    </tr>
    }
</table>
<!-- 改成button类型避免默认表单提交，修改ID方便绑定事件 -->
<input id="deleteSelected" type="button" class="btn btn-default" value="删除选中项" />

修正后的JQuery代码 #

// 封装删除选中项的AJAX请求
function deleteSelectedItems() {
    // 收集所有选中的复选框ID
    var selectedValues = [];
    // 直接选中所有name为empsToDel且被勾选的复选框
    $("input[name='empsToDel']:checked").each(function() {
        // 用当前复选框的值构建对象，注意语法是冒号不是等号
        selectedValues.push({ ID: $(this).val() });
    });

    // 先判断有没有选中项
    if (selectedValues.length === 0) {
        alert("请先选择要删除的项哦！");
        return;
    }

    // 发送删除请求到控制器
    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        // 这里要对应你控制器里的删除方法名
        url: "/Bill/DeleteSelected",
        // 把选中的ID数组转成JSON格式
        data: JSON.stringify({ Delete: selectedValues }),
        success: function(result) {
            alert(result);
            // 刷新页面更新表格数据
            location.reload();
        },
        error: function() {
            alert("删除失败啦，请稍后重试！");
        }
    });
}

// 页面加载完成后，给删除按钮绑定点击事件
$(document).ready(function() {
    $("#deleteSelected").click(function() {
        deleteSelectedItems();
    });
});

控制器代码的注意事项 #

你需要确保控制器的参数结构和前端传的JSON一致，比如可以定义这样的视图模型：

// 接收删除请求的视图模型
public class DeleteRequestModel
{
    public List<ItemToDelete> Delete { get; set; }
}

public class ItemToDelete
{
    public int ID { get; set; }
}

[HttpPost]
public JsonResult DeleteSelected(DeleteRequestModel model)
{
    try
    {
        // 遍历选中的ID，执行数据库删除操作
        foreach (var item in model.Delete)
        {
            // 示例：找到对应记录并删除
            // var target = db.YourTableName.Find(item.ID);
            // if (target != null) db.YourTableName.Remove(target);
        }
        // db.SaveChanges();
        return Json("删除成功！");
    }
    catch (Exception ex)
    {
        // 可以记录错误日志
        return Json($"删除失败：{ex.Message}");
    }
}

这样调整后，应该就能正常删除选中的表格行啦！

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