在Ajax返回的DataTable中添加复选框并获取选中值的实现问题

我正在开发一个ASP.NET Core MVC .NET 6项目，通过Ajax加载数据到DataTable并添加了复选框。需要实现点击关联按钮时，获取选中复选框的值，以数组形式通过Ajax传给后端/HRValidation/AssignToHR接口，方便控制器用foreach操作数据库，但当前点击事件代码存在问题。

当前代码的核心问题 #

• 复选框选择器不匹配：DataTable渲染的复选框class是_check，但点击事件里用的是.myCheckbox，无法选中目标元素
• 未定义变量直接使用：checkedIds和hriss处于注释状态却在Ajax请求中引用，会触发JS报错
• 错误回调参数错误：error函数里误用未定义的response，应该使用传入的error参数
• HTML转义错误：DataTable的render函数返回了转义后的<input>标签，导致复选框无法渲染为控件，仅显示文本

修正后的DataTable初始化代码 #

$(document).ready(function () {
    $.ajax({
        type: "POST",
        dataType: "JSON",
        url: "/HRValidation/Indexresult",
        success: function (response) {
            console.log(response);
            $('#example').dataTable({
                data: response,
                columns: [
                    {
                        targets: 0,
                        data: null,
                        className: 'text-center',
                        searchable: false,
                        orderable: false,
                        render: function (data, type, full, meta) {
                            // 直接返回HTML字符串，取消不必要的转义
                            return '<input type="checkbox" class="_check" name="check" value="' + full.employeeId + '">';
                        },
                        width: "5%"
                    },
                    { 'data': 'employeeName' },
                    { 'data': 'employeeEmail' },
                    { 'data': 'employeePersonalNumber' },
                    { 'data': 'employeeDateofJoining' },
                    { 'data': 'employeePermanentCity' },
                    { 'data': 'employeePermanentState' },
                    { 'data': 'employeePermanentCountry' },
                    { 'data': 'totalErrors' },
                    {
                        mRender: function (data, type, row) {
                            // 修正编辑链接的HTML转义问题
                            return '<a href="/HRDashboard/Edit/' + row.employeeId + '" class="bi bi-pen"></a> ';
                        }
                    },
                ],
                autofill: true,
                select: true,
                responsive: true,
                destroy: true,
                scrollY: true,
                scrollX: true,
            });
        },
        error: function (error) {
            // 修正错误回调的参数引用
            console.log(error);
        }
    });
});

修正后的按钮点击事件代码 #

$(document).ready(function () {
    $("#assigned").click(function () {
        // 使用正确的复选框class选择器获取选中值
        var checkedIds = $('input[type="checkbox"]._check:checked').map(function () {
            return $(this).val();
        }).toArray();
        
        // 正确获取HR选择框的值（根据实际元素ID调整）
        var hriss = $("#hr").val();

        // 增加空选择判断，避免无效提交
        if (checkedIds.length === 0) {
            alert("请至少选择一个员工");
            return;
        }

        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "/HRValidation/AssignToHR",
            data: JSON.stringify({ employeeIds: checkedIds, hris: hriss }),
            contentType: 'application/json',
            success: function (response) {
                console.log(response);
                // 可添加操作成功后的提示或页面刷新逻辑
                alert("分配成功");
            },
            error: function (error) {
                console.log(error);
                alert("分配失败，请稍后重试");
            }
        });
    });
});

后端控制器接收代码示例 #

先定义参数模型用于接收前端数据：

public class AssignToHRModel
{
    public List<string> EmployeeIds { get; set; }
    public string Hris { get; set; }
}

然后在HRValidationController中实现接口：

[HttpPost]
public IActionResult AssignToHR([FromBody] AssignToHRModel model)
{
    if (model == null || !model.EmployeeIds.Any())
    {
        return BadRequest("请选择要分配的员工");
    }

    // 遍历选中的员工ID执行数据库操作
    foreach (var empId in model.EmployeeIds)
    {
        // 此处编写你的数据库业务逻辑，例如更新员工的HR分配信息
        // 示例：var employee = _dbContext.Employees.FirstOrDefault(e => e.EmployeeId == empId);
        // if (employee != null) { employee.HrisAssigned = model.Hris; }
    }

    // _dbContext.SaveChanges(); // 保存数据库更改

    return Ok(new { success = true, message = "分配完成" });
}

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