ASP.NET MVC中如何将模型值传递至弹窗并实现删除功能

需求说明 #

1. 弹窗提示文本替换为对应团队的具体名称
2. 点击弹窗删除按钮时，调用Controller的Post方法删除记录且不跳转页面

步骤1：修改列表中的删除按钮 #

为删除按钮添加自定义属性，存储当前团队的ID和名称，方便后续传递给Modal：

<td>
    <a data-bs-toggle="modal" data-bs-target="#myModal" 
       data-team-id="@item.Id" data-team-name="@item.TeamName"
       class="btn btn-danger">
        <i class="bi bi-trash"></i> Remove
    </a>
</td>

（注：把图标从bi-pencil改为bi-trash更符合删除操作的语义）

步骤2：修改Modal弹窗结构 #

• 给确认文本的<p>标签添加ID，方便动态替换内容
• 给确认删除按钮添加ID，用于绑定点击事件

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Delete Record</h4>
        </div>
        <div class="modal-body">
            <p id="deleteConfirmText">Do you really want to remove this team?</p>
        </div>
        <div class="modal-footer">
            <div class="container">
                <button type="button" id="confirmDeleteBtn" class="btn btn-danger">
                    <i class="bi bi-trash"></i> Remove
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
  </div>
</div>

步骤3：添加JavaScript处理逻辑 #

实现Modal显示时替换文本，以及点击删除按钮发送AJAX请求：

<script>
    let currentTeamId = 0;
    let currentTeamName = '';

    // 监听Modal即将显示的事件，获取当前团队信息
    document.getElementById('myModal').addEventListener('show.bs.modal', function (event) {
        const triggerBtn = event.relatedTarget;
        currentTeamId = triggerBtn.getAttribute('data-team-id');
        currentTeamName = triggerBtn.getAttribute('data-team-name');
        
        // 替换确认文本
        document.getElementById('deleteConfirmText').innerHTML = 
            `Do you really want to remove <strong>${currentTeamName}</strong>?`;
    });

    // 监听确认删除按钮的点击事件
    document.getElementById('confirmDeleteBtn').addEventListener('click', function () {
        // 发送Post请求到Controller，注意带上CSRF令牌
        fetch(`/Team/Delete/${currentTeamId}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name="__RequestVerificationToken"]').value,
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                // 删除成功：关闭Modal并移除当前行
                document.getElementById('myModal').querySelector('[data-bs-dismiss="modal"]').click();
                document.querySelector(`[data-team-id="${currentTeamId}"]`).closest('tr').remove();
            } else {
                alert(data.message || '删除失败');
            }
        })
        .catch(err => {
            console.error(err);
            alert('删除过程中发生错误');
        });
    });
</script>

注意：需要在视图中添加CSRF令牌（ASP.NET MVC默认会在form中生成，若没有则手动添加）：

@Html.AntiForgeryToken()

步骤4：修改Controller的Delete方法 #

将原方法改为Post请求，并实现实际的删除逻辑，返回JSON结果：

[HttpPost]
public IActionResult Delete(int id)
{
    var team = applicationDbContext.Teams.FirstOrDefault(u => u.Id == id);
    if (team == null)
    {
        return Json(new { success = false, message = "团队不存在" });
    }

    applicationDbContext.Teams.Remove(team);
    applicationDbContext.SaveChanges();
    return Json(new { success = true });
}

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