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

Posted 2021-03-26

我正在研究Kendo UI jQuery grid 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");
});

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

我究竟做错了什么？

答案

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

您已启用批处理：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（因为没有批处理它没用） - 它应该开始将单个对象发送到您的服务器方法。