如何在ASP.NET Core动态生成的DataTable中添加文本框并保存到数据库

1. 修改DataTable配置，新增文本框列 #

在现有columns数组中添加一列，渲染带关联ID的文本框——通过data-emp-insurance-id属性绑定当前行的employeeInsuranceId，后续提交时可直接获取关联ID：

columns: [
    { "data": null, "render": function (data, type, full, meta) { return '<input type="checkbox" name="chkSelect" id="' + full.employeeInsuranceId + '" value="' + full.employeeInsuranceId + '">'; }},
    { 'data': 'employeeInsuranceId' },
    { 'data': 'employeeId' },
    { 'data': 'insurance_Nomiee_Name' },
    { 'data': 'insurance_Nomiee_Gender_Name' },
    { 'data': 'insurance_Nomiee_Relationship_Name' },
    { 'data': 'insurance_Nomiee_DOB_String' },
    { 'data': 'relationship_Comments' },
    // 新增文本框列
    { 
        "data": null, 
        "render": function (data, type, full, meta) { 
            return '<input type="text" class="comment-input" data-emp-insurance-id="' + full.employeeInsuranceId + '" placeholder="输入需保存的内容">'; 
        }
    }
],

2. 添加保存按钮并编写提交逻辑 #

先在页面中添加保存按钮：

<button id="btnSaveComments">保存内容</button>

再编写jQuery事件，收集所有文本框的内容与对应ID，通过AJAX提交到后端：

// 保存按钮点击事件
$("#btnSaveComments").click(function(){
    var saveData = [];
    // 遍历所有文本框，收集关联ID和输入内容
    $(".comment-input").each(function(){
        var insuranceId = $(this).data("emp-insurance-id");
        var inputValue = $(this).val().trim();
        // 仅收集有内容的项（可根据需求调整）
        if(inputValue){
            saveData.push({
                EmployeeInsuranceId: insuranceId,
                CommentContent: inputValue
            });
        }
    });

    // 提交数据到后端接口
    if(saveData.length > 0){
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "/HRValidation/SaveInsuranceComments", // 替换为你的后端接口地址
            contentType: "application/json",
            data: JSON.stringify(saveData),
            success: function(response){
                console.log("保存成功", response);
                alert("保存成功");
                // 可选：刷新DataTable更新页面显示
                $('#insurancetable').DataTable().ajax.reload();
            },
            error: function(error){
                console.error("保存失败", error);
                alert("保存失败，请重试");
            }
        });
    } else {
        alert("没有需要保存的内容");
    }
});

3. 后端接收数据示例（ASP.NET MVC） #

先创建接收数据的模型类：

public class InsuranceCommentModel
{
    public int EmployeeInsuranceId { get; set; }
    public string CommentContent { get; set; }
}

再在HRValidationController中添加处理保存的Action：

[HttpPost]
public JsonResult SaveInsuranceComments(List<InsuranceCommentModel> comments)
{
    try
    {
        // 编写数据库保存逻辑，示例：遍历更新对应行的内容
        foreach(var comment in comments)
        {
            // 替换为你的实际数据库操作，比如：
            // dbContext.EmployeeInsurances
            //     .Where(i => i.EmployeeInsuranceId == comment.EmployeeInsuranceId)
            //     .FirstOrDefault()?.Relationship_Comments = comment.CommentContent;
        }
        // dbContext.SaveChanges();
        return Json(new { Success = true, Message = "保存成功" });
    }
    catch(Exception ex)
    {
        return Json(new { Success = false, Message = ex.Message });
    }
}

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