ASP.NET Core MVC：从jQuery DataTable弹出Razor视图并传递STUD_ID

1. 后端添加Action返回局部视图 #

在StudManagementController中新增Action，接收STUD_ID并返回StudNew局部视图：

public IActionResult StudNew(int studId)
{
    // 根据studId获取对应学生数据（替换为你的业务逻辑）
    var studentModel = _studentService.GetStudentById(studId);
    
    // 返回局部视图，若StudNew.cshtml已设置为局部视图，可直接返回View("StudNew", studentModel)
    return PartialView("_StudNew", studentModel);
}

2. 前端添加模态框结构 #

在DataTable所在页面插入Bootstrap模态框HTML（未引入Bootstrap需先添加相关CSS和JS）：

<!-- Class Model详情模态框 -->
<div class="modal fade" id="classModelModal" tabindex="-1" aria-labelledby="classModelModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="classModelModalLabel">Class Model</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modalContent">
                <!-- 动态加载StudNew视图内容 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

3. 修正DataTable链接与点击事件 #

3.1 调整DataTable列渲染逻辑 #

修改Class Model列的链接设置，阻止默认跳转并绑定正确的点击函数：

{ 
    data: null, 
    title: 'Class Model', 
    autoWidth: true,
    "render": function(data, type, row, meta){
        if(type === 'display')
        {
            // 将href设为#阻止默认跳转，绑定点击事件
            data = '<a href="#" onclick="return onClassModelClick(' + data.STUD_ID + ')">' + data.CLASSMODEL + '</a>';
        }
        return data;
    }
}

3.2 更新点击事件函数 #

修改onClassModelClick函数，通过AJAX加载后端视图并显示模态框：

function onClassModelClick(id) {
    // 阻止链接默认行为
    event.preventDefault();

    // 加载StudNew视图内容到模态框
    $('#modalContent').load('/STUD_MANAGEMENT/StudNew?studId=' + id, function() {
        // 内容加载完成后显示模态框
        $('#classModelModal').modal('show');
    });

    return false;
}

注意事项 #

• 确保项目已引入Bootstrap的CSS和JS，若使用其他模态框组件，需对应调整模态框调用方式
• 后端Action的参数名studId需与URL传递的参数名一致，如需从路由获取可调整路由配置
• 若需处理模态框关闭后的逻辑，可监听Bootstrap的hidden.bs.modal事件

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