Kendo UI Grid 添加新记录而不将数据发布到服务器端

Question

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

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

控制器：

[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 方法的参数更改为 字符串模型，然后反序列化为数组，这样您就可以像以前一样使用它了

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

2) 如果我们跟随 Telerik 演示，你可以使用这样的实现

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

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

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