ASP.NET MVC中Bootstrap删除模态框问题：.on函数缺失关键细节

看起来你已经给删除按钮加上了data-employee-id属性，但核心问题是没有把这个ID传递给模态框的确认操作，也没绑定对应的删除逻辑。我来帮你补上这部分关键代码，一步步解决问题：

第一步：完善视图中的按钮和模态框结构 #

首先给删除按钮加上触发模态框的属性，同时在模态框里加个隐藏域用来存储要删除的员工ID：

@foreach (var item in Model)
{
    <a class="btn btn-danger btn-sm delete-btn" 
       data-toggle="modal" 
       data-target="#modalDelete" 
       data-employee-id="@item.EmployeeID">
        删除
    </a>
}

<div id="modalDelete" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">确认删除</h4>
            </div>
            <div class="modal-body">
                <p>你确定要删除这条员工记录吗？</p>
                <!-- 隐藏域：用来暂存要删除的员工ID -->
                <input type="hidden" id="deleteEmployeeId" value="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">确认删除</button>
            </div>
        </div>
    </div>
</div>

第二步：补上你缺失的JavaScript逻辑 #

这部分就是你on函数里漏掉的核心——把删除按钮的ID传递给模态框，再绑定确认删除的AJAX请求：

// 点击删除按钮时，把当前员工ID存入模态框的隐藏域
$('.delete-btn').on('click', function() {
    var targetId = $(this).data('employee-id');
    $('#deleteEmployeeId').val(targetId);
});

// 点击模态框的确认删除按钮，发起后端删除请求
$('#confirmDelete').on('click', function() {
    var employeeId = $('#deleteEmployeeId').val();
    
    // 发起AJAX请求到你的后端删除接口
    $.ajax({
        url: '/Employee/Delete/' + employeeId, // 替换成你实际的后端接口地址
        type: 'POST', // 或者根据后端配置用DELETE方法
        success: function(res) {
            // 删除成功后的操作：关闭模态框，移除页面上对应的行
            $('#modalDelete').modal('hide');
            // 假设你的员工数据是表格行，这里找到对应行并移除
            $('[data-employee-id="' + employeeId + '"]').closest('tr').remove();
            // 也可以加个成功提示：alert('删除成功！');
        },
        error: function(xhr) {
            alert('删除失败，请稍后重试');
            $('#modalDelete').modal('hide');
        }
    });
});

关键缺失点说明 #

1. 你之前的删除按钮没有data-toggle="modal"和data-target="#modalDelete"，导致点击按钮根本弹不出模态框；
2. 没有在点击删除按钮时把ID传递给模态框，确认按钮无法知道要删除哪条数据；
3. 缺少和后端交互的AJAX逻辑，光有模态框没法完成实际的删除操作。

额外注意事项 #

• 确保后端的删除接口（比如/Employee/Delete/{id}）正确接收参数，并且添加了对应的HTTP特性（比如[HttpPost]或[HttpDelete]）；
• 如果你的数据行是表格<tr>，可以给每行也加上data-employee-id="@item.EmployeeID"，这样移除行的逻辑会更准确；
• 可以根据需求调整成功/失败后的提示方式，比如用Toast组件代替alert。

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