ASP.NET Core MVC如何在弹窗表单中传入ID实现单条记录删除

问题分析 #

当前实现的核心问题是：所有删除按钮绑定同一个弹窗，但弹窗表单未携带目标记录ID，无法精准删除指定条目；若为每条记录生成独立弹窗，会重复创建大量DOM元素，引发请求冗余和误删问题。

解决方案 #

采用复用单个弹窗+动态传递ID的思路：点击删除按钮时，将目标记录ID存入弹窗表单的隐藏字段，提交时传递给后端。具体步骤如下：

1. 改造前端删除按钮 #

给删除按钮添加自定义属性data-id存储当前记录ID，统一触发同一个弹窗：

<button type="button" class="btn btn-primary delete-btn" data-toggle="modal" data-target="#exampleModal" data-id="@item.Id">
    Delete
</button>

2. 为弹窗表单添加隐藏ID字段 #

在弹窗的表单内新增隐藏输入框，用于临时存储要删除的记录ID：

@using (Html.BeginForm("Delete", "Banner", FormMethod.Post, new { @class = "form-horizontal" }))
{
    <input type="hidden" name="id" id="delete-id" value="" />
    <p>Are you sure you want to delete this record? </p>
    <div>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary">Yes</button>
    </div>
}

注：移除了不必要的enctype="multipart/form-data"，删除操作无需上传文件。

3. 添加JS监听事件传递ID #

通过JavaScript监听删除按钮的点击事件，将按钮上的data-id值赋值给表单的隐藏字段：

$(function() {
    $('.delete-btn').on('click', function() {
        var deleteId = $(this).data('id');
        $('#delete-id').val(deleteId);
    });
});

4. 优化后端接口（推荐） #

给Delete方法添加[HttpPost]特性明确接收POST请求，同时优化错误处理和跳转逻辑：

[HttpPost]
public async Task<IActionResult> Delete(int id)
{
    try
    {
        await _mediator.Send(new DeleteBannertByIdCommand(id));
    }
    catch (Exception ex)
    {
        TempData["error"] = "删除失败：" + ex.Message;
    }
    return RedirectToAction("Index");
}

修改后的完整前端代码 #

<br />
<a asp-controller="Banner" asp-action="Create" style="float:right" class="btn btn-success">Create</a>
<br />
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Redirect Url</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Banners)
        {
            <tr>
                <td>@item.RedirectUrl</td>
                <td>
                    <a asp-controller="Banner" asp-action="Update" asp-route-id="@item.Id" class="btn btn-info">Update</a>
                    <button type="button" class="btn btn-primary delete-btn" data-toggle="modal" data-target="#exampleModal" data-id="@item.Id">
                        Delete
                    </button>
                </td>    
            </tr>
        }
    </tbody>
</table>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @using (Html.BeginForm("Delete", "Banner", FormMethod.Post, new { @class = "form-horizontal" }))
                {
                    <input type="hidden" name="id" id="delete-id" value="" />
                    <p>Are you sure you want to delete this record? </p>
                    <div>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Yes</button>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        $('.delete-btn').on('click', function() {
            var deleteId = $(this).data('id');
            $('#delete-id').val(deleteId);
        });
    });
</script>

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