Asp.net core mvc结合Kendo UI for jquery Grid编辑数据无法传到控制器求助

已确认的错误点 #

按影响优先级排序：

• 控制器UpdatePost方法的Bind特性中，将属性名FirstName错写为FristName，直接导致模型绑定失败
• 前端update请求设置了contentType: "application/json"提交JSON格式数据，但后端参数未加[FromBody]特性，ASP.NET Core默认不会从请求体解析JSON做绑定
• Kendo DataSource开启了batch: true批量提交模式，parameterMap返回的是封装后的修改数据数组，但后端仅配置为接收单个Employee对象，提交格式与接收逻辑完全不匹配
• 网格所有列都设置了editable: false，导致编辑弹窗内所有字段不可编辑，提交的始终是原始数据

方案1：关闭批量提交（适配单条编辑逻辑） #

前端Kendo配置修改 #

dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/Employee/read",
            dataType: "json",
            type: "get"
        },
        update: {
            url: "/Employee/UpdatePost",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            type: "post"
        },
        parameterMap: function (options, operation) {
            if (operation === "update") {
                return kendo.stringify(options);
            }
        }
    },
    batch: false, // 关闭批量提交
    pageSize: 5,
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: { editable: false, nullable: false },
                FirstName: { validation: { required: true } },
                SecondName: { validation: { required: true } },
                Age: { type: "number", validation: { required: true, min: 18 } },
                Salary: { type: "number", validation: { min: 0, required: true } },
                Status: { type: "boolean" }
            }
        }
    }
});

$("#grid").kendoGrid({
    dataSource: dataSource,
    navigatable: true,
    pageable: true,
    height: 550,
    toolbar: ["create", "save", "cancel"],
    columns: [
        { field: "Id", title: "Id", width: 60, editable: false },
        // 需编辑的列将editable改为true
        { field: "FirstName", title: "FirstName", width: 120, editable: true },
        { field: "SecondName", title: "SecondName", width: 120, editable: true },
        { field: "Age", title: "Age", width: 80, editable: true },
        { field: "Salary", title: "Salary", width: 100, editable: true },
        { field: "Status", title: "Status", width: 80, editable: true },
        { command: ["edit", "destroy"], title: " ", width: 150 }],
    editable: "popup"
});

后端控制器修改 #

// 规范read方法返回格式
[HttpGet]
public IActionResult Read()
{
    return Json(_db.Employees.ToList());
}

[HttpPost]
public async Task<IActionResult> UpdatePost([FromBody] [Bind("Id,FirstName,SecondName,Age,Salary,Status")] Employee employee)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }
    var existEmp = await _db.Employees.FindAsync(employee.Id);
    if (existEmp == null)
    {
        return NotFound();
    }
    // 赋值更新避免脏数据
    existEmp.FirstName = employee.FirstName;
    existEmp.SecondName = employee.SecondName;
    existEmp.Age = employee.Age;
    existEmp.Salary = employee.Salary;
    existEmp.Status = employee.Status;
    
    await _db.SaveChangesAsync();
    return Ok();
}

方案2：保留批量提交（一次性提交多条修改数据） #

如果需要保留批量编辑功能，仅修改后端接收逻辑即可：

[HttpPost]
public async Task<IActionResult> UpdatePost([FromBody] List<Employee> models)
{
    if (!ModelState.IsValid || models == null || !models.Any())
    {
        return BadRequest(ModelState);
    }
    foreach (var employee in models)
    {
        var existEmp = await _db.Employees.FindAsync(employee.Id);
        if (existEmp != null)
        {
            existEmp.FirstName = employee.FirstName;
            existEmp.SecondName = employee.SecondName;
            existEmp.Age = employee.Age;
            existEmp.Salary = employee.Salary;
            existEmp.Status = employee.Status;
        }
    }
    await _db.SaveChangesAsync();
    return Ok();
}

如果修改后仍有问题，按以下步骤定位：

• 打开浏览器开发者工具网络标签，确认update请求的请求体包含正确的JSON数据
• 查看控制台是否存在JS报错
• 控制器打断点查看ModelState.IsValid状态，ModelState.Values中的错误信息可直接定位绑定失败的具体原因

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