如何将对象从 Kendo 网格数据源发送到控制器？

Question

我有一个 kendo 网格并且它使用 kendo 数据源，我不习惯使用 kendo 数据源来进行内联编辑，通常我永远不会进行内联编辑，但我被要求这样做。

我的数据源如下

function PriceLookupGridDataSource() {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "../KendoGridTesting/GetThePriceLookupGrid",
                dataType: "json"
            },
            update: {
                url: function(item) {
                    console.log(item);
                    return "../KendoGridTesting/PassAnObject?myObj=" + item; 
                }
            }
        },
        schema: {
            model: {
                id: "MaterialTypeID",
                fields: {
                    VendorID: { type: "number" },
                    VendorName: { type: "string" },
                    Description: { type: "string" },
                    MaterialTypeID: { type: "number" },
                    MaterialType: { type: "string" },
                    ServicePrice: { type: "string" },
                    SellUOM: { type: "string" },
                    Cost: { type: "string" },
                    PurchaseUOM: { type: "string" }
                }
            }
        },
        batch: false,
        pageSize: 20
    });

    return dataSource;
}

用于传输更新的控制器方法是

[HttpPost]
public void PassAnObject(PriceLookupGrid myObj)
{
    ...
}

对象是

Object {VendorID: 26, VendorName: "ACME STONE MASONRY", Description: "Special Stone Quote", MaterialTypeID: 35, MaterialType: "Cladding"…}

并且 PriceLookupGrid 数据 class 是

public class PriceLookupGrid
    {
        public int VendorID { get; set; }
        public string VendorName { get; set; }
        public string Description { get; set; }
        public int MaterialTypeID { get; set; }
        public string MaterialType { get; set; }
        public string NewPrice { get; set; }
        public string RemodelPrice { get; set; }
        public string ServicePrice { get; set; }
        public string SellUOM { get; set; }
        public string Cost { get; set; }
        public string PurchaseUOM { get; set; }
    }

当我尝试将其传递给我的控制器时出现错误

GET http://localhost:51193/KendoGridTesting/PassAnObject?id=[object%20Object]&V….0000&ServicePrice=0.0000++++&SellUOM=Each&Cost=0.0000&PurchaseUOM=EachBBB 404 (Not Found)

它将 "item" 作为单独的参数传递，我不希望这种情况发生。

有什么想法吗？

Answer 1

那是因为 item 是一个对象，如您在控制台中所见。您不能只将它连接到 url 字符串中。你来解析它。它有一个名为 models 的属性，其中包含所有已更改（或脏）的网格行，这些行将被发送到服务器。

为了让 ASP.Net MVC 将你的数据绑定到你的模型中，你必须像这样发送日期：

../KendoGridTesting/PassAnObject?VendorID=1&VendorName=...

将数据 "parse" 转换为 url 的简单方法是：

var model = {VendorID: 26, VendorName: "ACME STONE MASONRY", Description: "Special Stone Quote", MaterialTypeID: 35, MaterialType: "Cladding"};

function modelToUrlParams(model) {
  var params = [];
  
  Object.keys(model).forEach(key => params.push(key + "=" + model[key]));
  
  return encodeURI("?" + params.join("&"));
};

var myUrl = "../KendoGridTesting/PassAnObject" + modelToUrlParams(model);

console.log("Final Url", myUrl);

Answer 2

你的 Action 是用 [HttpPost] 修饰的，它应该是这样，但你的错误消息表明你正在做 GET。您需要 Kendo 到 POST 数据，而不是：

update: {
    url: "../KendoGridTesting/PassAnObject",
    type: "post" 
}

如何将对象从 Kendo 网格数据源发送到控制器？

How to send object to controller from Kendo Grid dataSource?

jquery

asp.net-mvc

kendo-ui

kendo-datasource