You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Kendo UI Grid修改值无法传递至C#控制器问题求助

Kendo UI Grid更新时无法传递数据到C#控制器

我正在开发Kendo UI Grid,需要把网格修改的数据同步到数据库。网格本身运行正常,但调用C#控制器的Update方法时,修改后的数据传不过去,控制器接收的参数是空的。以下是我的代码:


HTML与jQuery代码

<div id="gridKendo"></div>
 
<script type="text/javascript">

$(document).ready(function() {
        $("#gridKendo").kendoGrid({
        dataSource: CustomerHelper.gridDataSource(),
        
        schema: {
            model: {
                id: "Id",   
                fields: {
                    Id: { type: "number" },
                    Payroll_Number: { type: "string" },
                    Forenames: { type: "string" },
                    Surenames: { type: "string" },
                    Date_of_Birth: { type: "string" },
                    Telephone: { type: "string" },
                    Mobile: { type: "string" },
                    Address: { type: "string" },
                    Address_2: { type: "string" },
                    Postcode: { type: "string" },
                    EMail_Home: { type: "string" },
                    Start_Date: { type: "string" },
                }
            }
        },
        columns: CustomerHelper.GenerateColumns(),
        type: "odata",
        editable: "inline",
        navigatable:true,
        selectable: "multiple, row",           
     });
});
var CustomerHelper = {
    GenerateColumns: function() {
        return columns = [
            {field: "Id", title:"Id" , width: 160, editable:false, hidden: true},
            {field: "Payroll_Number", title:"Payroll Number" , width: 160, editable:false , validation: { required: true}},
            {field: "Forenames", title:"Forename" , width: 160, editable:false ,hidden: true},
            {field: "Surenames", title:"Surename" , width: 160, editable:false, hidden: true},
            {field: "Date_of_Birth", title:"Date of Birth" , width: 160, editable:false, hidden: true},
            {field: "Telephone", title:"Telephone" , width: 160, editable:false ,hidden: true},
            {field: "Mobile", title:"Mobile " , width: 160, editable:false ,hidden: true},
            {field: "Address", title:"Address" , width: 160, editable:false ,hidden: true},
            {field: "Address_2", title:"Address second" , width: 160, editable:false ,hidden: true},
            {field: "Postcode", title:"Postcode" , width: 160, editable:false ,hidden: true},
            {field: "EMail_Home", title:"EMail_Home" , width: 160, editable:false ,hidden: true},
            {field: "Start_Date", title:"Date of start" , width: 160, editable:false ,hidden: true},
            { command: [{name: "edit", text: {edit: "Edit", update: "Update", cancel: "Cancel" }}],width: 160}
        ]
    },
    
    gridDataSource: function(){

        var gridDataSource = new kendo.data.DataSource({
            pageSize: 5,
            batch: true,
            schema: {
                data: "Items", total: "TotalCount", // used for data read
                model: {
                   id: "Id", 
                    fields: {
                        Id: { type: "number" },
                        Payroll_Number: { type: "string", validation: { required: { message: "Please enter a last name for this employee"  } } },
                        Forenames: { type: "string" },
                        Surenames: { type: "string" },
                        Date_of_Birth: { type: "string" },
                        Telephone: { type: "string" },
                        Mobile: { type: "string" },
                        Address: { type: "string" },
                        Address_2: { type: "string" },
                        Postcode: { type: "string" },
                        EMail_Home: { type: "string" },
                        Start_Date: { type: "string" },
                    }
                }
            },
            transport: {
                update: {
                    url: '../Personnel_Records/update', 
                    dataType: "json",
                    type: "POST",
                },
                parameterMap: function(options, operation ) {
                   if (operation !== "read" && options.models) 
                   {
                       return { models: kendo.stringify(options.models) };
                   }   
                }
            },
        });
        return gridDataSource;
    },
}
</script>

C#控制器代码

using CsvHelper.Configuration;
using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;
using System.Globalization;
using Task.Models;


namespace Task.Controllers
{
    public class Personnel_RecordsController : Controller
    {
    public JsonResult update(string res)
        {
             // logic should be but result is null
        }
    }
}

问题分析与解决步骤

核心问题

  1. 前后端参数名称不匹配:前端把数据打包成models字段传递,但后端控制器接收的参数是res,完全对应不上
  2. 后端未正确解析JSON格式的批量数据:你开启了batch: true,前端会传递模型数组,后端需要对应的数据结构接收
  3. 前端存在冗余的schema配置:在kendoGrid初始化里重复定义了schema,可能导致数据解析异常

具体修改

1. 前端代码调整

  • 移除kendoGrid初始化中的冗余schema配置(只保留dataSource里的schema即可):
$(document).ready(function() {
        $("#gridKendo").kendoGrid({
        dataSource: CustomerHelper.gridDataSource(),
        columns: CustomerHelper.GenerateColumns(),
        editable: "inline",
        navigatable:true,
        selectable: "multiple, row",           
     });
});

2. 后端代码调整

  • 先创建与前端模型匹配的实体类:
public class PersonnelRecord
{
    public int Id { get; set; }
    public string Payroll_Number { get; set; }
    public string Forenames { get; set; }
    public string Surenames { get; set; }
    public string Date_of_Birth { get; set; }
    public string Telephone { get; set; }
    public string Mobile { get; set; }
    public string Address { get; set; }
    public string Address_2 { get; set; }
    public string Postcode { get; set; }
    public string EMail_Home { get; set; }
    public string Start_Date { get; set; }
}
  • 修改控制器方法,用[FromBody]标注接收JSON格式的批量模型:
public JsonResult Update([FromBody] List<PersonnelRecord> models)
{
    if (models != null && models.Any())
    {
        // 在这里编写数据库更新逻辑
        return Json(new { success = true });
    }
    return Json(new { success = false, message = "未接收到有效数据" });
}

可选优化(非批量更新场景)

如果不需要批量更新,可以把dataSource里的batch: true改成batch: false,同时调整parameterMap:

parameterMap: function(options, operation ) {
    if (operation === "update") 
    {
        return kendo.stringify(options);
    }   
}

对应的后端方法改为接收单个模型:

public JsonResult Update([FromBody] PersonnelRecord model)
{
    // 处理单条数据更新逻辑
    return Json(new { success = true });
}

内容的提问来源于stack exchange,提问作者xoja

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.23 02:06:34