Kendo UI 添加新记录的网格未将数据发布到服务器端

Question

我正在研究 Kendo UI jQuery 网格 CRUD。我可以在网格中显示数据，但不能添加新记录。

当我在弹出窗口 window 中填满列后单击更新按钮添加记录时，没有任何内容发送到服务器端，因为每个属性都有一个空值。图片显示了我按下按钮时得到的结果。

控制器：

[HttpPost]
public JsonResult AddLostProperty(LostPropertyViewModel lostProperty)
{
    try
    {
        using (var dbContext = new DBEntities())
        {
            if (lostProperty != null)
            {
                var newLostProperty = new sz_LostProperty()
                {
                    Name = lostProperty.PropertyName,
                    CategoryId = dbContext.sz_PropertyCategory.Where(x => x.Name == lostProperty.CategoryName).Select(c => c.Id).FirstOrDefault(),
                    Description = lostProperty.PropertyDescription,
                    FoundDate = lostProperty.FoundDate,
                    FoundLocation = lostProperty.FoundLocation,
                    CratedDate = DateTime.UtcNow.Date,
                    CratedBy = ""
                };

                dbContext.sz_LostProperty.Add(newLostProperty);
                dbContext.SaveChanges();

                return Json(new { Success = true, Message = "The Property has been added." });
            }
            else
            {
                return Json(new { Success = false, Message = "No lost property added." });
            }
        }
    }            
    catch (Exception e)
    {
        return Json(new { Success = false, Message = "Error: " + e });
    }
}

JavaScript:

<script>
    $(document).ready(function () {
        var serviceBaseUrl = "@Request.Url.ToString()",
            lostPropertyDataSource = new kendo.data.DataSource({
                transport: {
                    create: {
                        url: serviceBaseUrl + "/AddLostProperty",
                        type: "POST",
                        dataType: "json",
                        complete: function (e) {
                            $('#manageLostPropertiesGrid').data('kendoGrid').dataSource.read();
                        }
                    },
                    read: {
                        url: serviceBaseUrl + "/GetLostProperties",
                        type: "GET",
                        dataType: "json"
                    },
                    update: {
                        url: serviceBaseUrl + "/UpdateLostProperty",
                        type: "PUT",
                        dataType: "json"
                    },
                    destroy: {
                        url: serviceBaseUrl + "/DeleteLostProperty",
                        type: "DELETE",
                        dataType: "json"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                batch: true,
                pageSize: 20,
                schema: {
                    model: {
                        id: "PropertyId",
                        fields: {
                            PropertyId: { editable: false, nullable: true, type: "number" },
                            PropertyName: { type: "string", editable: true, validation: { required: true } },
                            CategoryId: { type: "number", editable: true, validation: { required: true } },
                            PropertyDescription: { validation: { required: false } },
                            Image: { validation: { required: false } },
                            FoundDate: { type: "Date" },
                            FoundLocation: { editable: true, validation: { required: false } }
                        }
                    }
                }
            });

        $("#manageLostPropertiesGrid").kendoGrid({
            dataSource: lostPropertyDataSource,
            pageable: true,
            height: 550,
            toolbar: ["create"],
            columns: [
                { field: "PropertyName", title: "Property Name", width: "150px" },
                { field: "CategoryName", title: "Category", editor: propertyCategoryList,/* template: "#=CategoryName#", */width: "150px"},
                { field: "PropertyDescription", title: "Description", width: "200px" },
                { field: "FoundDate", title: "Found Date", template: "#= kendo.toString(kendo.parseDate(FoundDate, 'dd-MM-yyyy'), 'dd-MM-yyyy') #",  width: "130px" },
                { field: "FoundLocation", title: "Found Location", width: "120px" },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
            editable: "popup"
        }).data("kendoGrid");
});

从浏览器中，我可以看到发送到服务器的对象如下：

我做错了什么？

Answer 1

我认为在这种情况下，服务器端的参数类型存在问题。

您已启用 batch: true 编辑，如果您想在网格中进行多次更改但最后只发送一个更改模型的请求，这将非常有用。这非常有用，例如在 inCell 编辑模式的情况下，当您会看到很多请求并因此减少它们是您想要的，但在弹出编辑的情况下，我个人不这样做看到任何使用批量编辑的理由，但是是的，我知道 Telerik 在他们的演示中有这个。

因此，因为启用了批量编辑，所以在执行请求之前会调用parameterMap。（注意：parameterMap 仅在启用批量编辑时被调用，否则将被忽略）。该 parameterMap 将所有模型包装到 json 字符串数组中，并将该数组与请求一起发送到服务器。在你的例子中，总是有一条记录被编辑，但这并不重要——它将作为一个数组发送（以 json 字符串格式）。

因为它是作为序列化字符串发送的，所以您可以

1) 将 AddLostProperty 方法的参数更改为 string models，然后反序列化为数组，这样您就可以像以前那样使用它

public ActionResult AddLostProperty(string models)
{
    ...
    var data = JsonConvert.DeserializeObject<IEnumerable<LostPropertyViewModel>>(models);
    ...
}

2) 如果我们按照Telerik demo，你可以使用这样的实现

public ActionResult AddLostProperty()
{
    var products = this.DeserializeObject<IEnumerable<LostPropertyViewModel>>("models");
    if (products != null)
    {
        //logic
    }
    return this.Jsonp(products);
}

3) 这是我更喜欢的解决方案

只需删除 batch: true 和 parameterMap（因为没有批处理就没用了）- 它应该开始将单个对象发送到您的服务器方法。

Kendo UI 添加新记录的网格未将数据发布到服务器端

Kendo UI Grid adding new record not posting data to server side

c#

linq

asp.net-mvc

kendo-ui

kendo-grid