ASP.NET MVC中Bootstrap 4删除确认模态框点击确认无响应问题

看起来你的问题核心在于模态框的确认按钮没有和删除操作建立正确的关联，同时原有的ActionLink和JS逻辑存在几个关键问题，我来一步步帮你修复：

问题根源分析 #

1. 初始JS中的confirm变量未定义，逻辑完全无效，而且模态框的确认按钮和这个点击事件没有任何绑定，所以点击确认毫无反应。
2. 更新后的JS尝试给按钮设置href，但你的Delete ActionLink没有添加data-href属性，导致无法获取删除URL；另外模态框里的确认按钮是button类型，就算设置了href也不会触发跳转。

完整修复方案 #

第一步：修改视图中的Delete链接 #

把原来的Delete ActionLink改成这样，添加data-href存储删除接口的URL，同时避免默认跳转（因为我们要通过模态框确认后再执行）：

@Html.ActionLink("Delete", "#", null, new { 
    @class="delete-link", 
    data_toggle = "modal", 
    data_target = "#exampleModalCenter", 
    data_href = Url.Action("Delete", new { id=item.StudentId }) 
})

这里把ActionLink的目标改成#（避免默认跳转），用data-href存储真正的删除URL，方便后续JS获取。

第二步：调整模态框的确认按钮 #

把原来的button改成可触发跳转/请求的元素，推荐用<a>标签或者绑定点击事件的button：

<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <!-- 改成a标签，或者保留button并加class -->
    <a href="#" class="btn btn-danger delete-confirm">Delete</a>
</div>

第三步：编写正确的JS逻辑 #

这个脚本会在模态框弹出时获取当前删除链接的URL，然后绑定确认按钮的点击事件执行删除操作：

$(document).ready(function () {
    // 模态框弹出时，获取当前删除链接的URL并存储到确认按钮上
    $('#exampleModalCenter').on('show.bs.modal', function (e) {
        var deleteUrl = $(e.relatedTarget).data('href');
        $(this).find('.delete-confirm').data('url', deleteUrl);
    });

    // 点击确认按钮时执行删除操作
    $('.delete-confirm').click(function () {
        var deleteUrl = $(this).data('url');
        
        // 方式1：同步跳转（适合简单场景）
        window.location.href = deleteUrl;

        // 方式2：AJAX异步删除（体验更好，无需刷新页面）
        /*
        $.ajax({
            url: deleteUrl,
            type: 'POST', // 注意：ASP.NET MVC的Delete动作推荐用POST，需要在控制器中配置[HttpPost]
            success: function() {
                $('#exampleModalCenter').modal('hide');
                // 删除成功后可以刷新页面或者移除对应的表格行
                location.reload();
            },
            error: function() {
                alert('删除操作失败，请稍后重试');
            }
        });
        */
    });
});

额外优化：用POST请求执行删除（更安全） #

默认的Delete Action如果是GET请求有安全风险，建议改成POST：

1. 在控制器的Delete方法上添加[HttpPost]特性：

[HttpPost]
public ActionResult Delete(int id)
{
    // 执行删除逻辑
    // ...
    return RedirectToAction("Index");
}

2. 此时如果用AJAX方式，需要在请求中带上AntiForgeryToken，你可以在模态框里添加一个隐藏的表单：

<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    @using (Html.BeginForm("Delete", "YourControllerName", FormMethod.Post, new { id = "deleteForm" }))
    {
        @Html.AntiForgeryToken()
        @Html.Hidden("id", "")
        <button type="submit" class="btn btn-danger">Delete</button>
    }
</div>

3. 对应的JS调整为：

$(document).ready(function () {
    $('#exampleModalCenter').on('show.bs.modal', function (e) {
        // 更直观的方式：给Delete链接加data-student-id="@item.StudentId"，直接获取
        var studentId = $(e.relatedTarget).data('student-id');
        $('#deleteForm input[name="id"]').val(studentId);
    });

    $('#deleteForm').submit(function(e) {
        e.preventDefault();
        var form = $(this);
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            success: function() {
                $('#exampleModalCenter').modal('hide');
                location.reload();
            },
            error: function() {
                alert('删除失败');
            }
        });
    });
});

这样修改后，点击Delete链接唤起模态框，再点击确认按钮就会执行删除操作了。

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