如何在MVC中获取选中行ID并调用控制器的DeleteButton动作

嘿，这个场景我之前做过好多次，给你几个靠谱的实现思路，照着来就行！

核心思路很简单：把每行的主键ID存到<tr>的自定义属性里，然后通过JS获取选中行的这个ID，再传递给控制器的DeleteButton动作。

步骤1：给表格行绑定ID属性 #

先在CSHTML的表格循环里，给每个<tr>加上data-id属性，把当前数据的主键ID存进去：

@foreach (var item in Model)
{
    <!-- 绑定选中逻辑，和你现有JS对接 -->
    <tr data-id="@item.Id" onclick="toggleRowSelection(this)">
        <td>@item.Name</td>
        <!-- 其他列内容 -->
    </tr>
}
<!-- 新增删除按钮 -->
<button id="deleteBtn" class="btn btn-danger">删除选中行</button>

步骤2：完善选中行的JS逻辑（确保唯一选中） #

你的现有JS已经能给选中行加selected类，这里补充确保只有一行被选中的逻辑：

function toggleRowSelection(row) {
    // 先移除所有行的selected类，保证唯一选中
    document.querySelectorAll('tr.selected').forEach(r => r.classList.remove('selected'));
    // 给当前点击的行添加选中样式
    row.classList.add('selected');
}

步骤3：获取选中行ID并调用控制器动作 #

这里给你两种常用方案，选适合你的就行：

方案A：直接跳转（简单直观，适合不需要无刷新的场景） #

给删除按钮绑定点击事件，获取选中行的ID后跳转到控制器动作：

document.getElementById('deleteBtn').addEventListener('click', function() {
    // 找到带有selected类的行
    const selectedRow = document.querySelector('tr.selected');
    
    // 校验是否选中行
    if (!selectedRow) {
        alert('请先选中要删除的行哦！');
        return;
    }
    
    // 从data-id属性里拿到主键ID
    const targetId = selectedRow.getAttribute('data-id');
    
    // 二次确认，避免误删
    if (confirm(`确定要删除ID为${targetId}的记录吗？`)) {
        // 跳转到控制器动作，替换成你的控制器名称（比如Home/DeleteButton）
        window.location.href = `/你的控制器名/DeleteButton?idSelect=${targetId}`;
    }
});

方案B：AJAX无刷新删除（用户体验更好） #

如果不想页面刷新，用AJAX请求控制器动作，成功后直接移除选中行：

document.getElementById('deleteBtn').addEventListener('click', function() {
    const selectedRow = document.querySelector('tr.selected');
    if (!selectedRow) {
        alert('请先选中要删除的行哦！');
        return;
    }
    
    const targetId = selectedRow.getAttribute('data-id');
    if (confirm(`确定要删除ID为${targetId}的记录吗？`)) {
        // 发送POST请求（删除操作建议用POST更安全）
        fetch(`/你的控制器名/DeleteButton?idSelect=${targetId}`, {
            method: 'POST',
            // 如果需要防伪造令牌，加上这个（MVC默认有）
            headers: {
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
            }
        })
        .then(response => {
            if (response.ok) {
                // 删除成功，移除当前行
                selectedRow.remove();
                alert('删除成功！');
            } else {
                alert('删除失败，请重试');
            }
        })
        .catch(err => {
            console.error('删除出错：', err);
            alert('删除过程出现错误');
        });
    }
});

注意事项 #

1. 控制器的DeleteButton动作要匹配请求方式：如果用方案A的GET请求，动作可以不用加特性；如果用方案B的POST，记得给动作加上[HttpPost]特性。
2. 记得处理空选中的情况，避免用户点击删除按钮时出现报错。
3. 如果用AJAX，要确保页面里有MVC的防伪造令牌（通常在表单里自动生成，或者手动添加），避免400错误。

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