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 } } }
问题分析与解决步骤
核心问题
- 前后端参数名称不匹配:前端把数据打包成
models字段传递,但后端控制器接收的参数是res,完全对应不上 - 后端未正确解析JSON格式的批量数据:你开启了
batch: true,前端会传递模型数组,后端需要对应的数据结构接收 - 前端存在冗余的
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
相关产品推荐
相关产品推荐

