Kendo UI添加新记录

Question

我使用web api 2.2创建了一个odata v4服务，我已成功将服务记录绑定到网格但我无法添加记录。 请注意，我为odata v4服务创建了一个单独的项目，而kendo UI grid则在其他项目中。 下面是网格的代码。

            <script>
                $(document).ready(function () {
                    $("#searchResults").kendoGrid({
                        dataSource: {
                            type: "odata-v4",
                            transport: {
                                read:
                                    "http://test.odata.northwind/odata/Customers",
                                create: {
                                    url: "http://test.odata.northwind/odata/Customers",
                                    dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
                                    type:"post"
                                    },
                                parameterMap: function (data, type) {
                                    if (type == "create") {
                                        // send the created data items as the "models" service parameter encoded in JSON
                                        return { models: kendo.stringify(data.models) };
                                    }
                                }
                            },
                            pageSize: 20,

                            schema: {
                                data: "value",
                                model: {
                                    id: "CustomerID",/*
                                total: function (data) { return data['@@odata.count']; }*/
                                fields: {

                                    CustomerID:  { type: "string" },
                                    CompanyName:  { type: "string" },
                                    ContactName: { type: "string" },
                                    ContactTitle: { type: "string" },
                                    Country: { type: "string" }
                                }
                                }
                            }

                        },
                        columns: [{
                            field: "CustomerID",
                            title: "CustomerID",
                            filterable: {
                                cell: {
                                    showOperators: false
                                }
                            }

                        },


                          {
                              field: "ContactName",
                              title: "Contact Name",
                              filterable: {
                                  cell: {
                                      operator: "contains"
                                  }
                              },
                              editor: NameAutoComplete


                          }, {
                              field: "ContactTitle",
                              title: "Contact Title",
                              filterable: {
                                  cell: {
                                      operator: "contains"
                                  }
                              },
                              editor: ContactTitleComboBox
                          }, {
                              field: "CompanyName",
                              title: "Company Name",
                              filterable: {
                                  cell: {
                                      operator: "contains"
                                  }
                              }
                          },
                        {
                            field: "Country",
                            title: "Country",
                            filterable: {
                                cell: {
                                    operator: "contains"
                                }
                            }
                          , editor: categoryDropDownEditor
                        },

                                  { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
                        ],
                        height: 550,
                        toolbar: ["create", "excel", "pdf"],
                        excel: {
                            fileName: "Kendo UI Grid Export.xlsx",
                            proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
                            filterable: true
                        }, pdf: {
                            allPages: true,
                            fileName: "Kendo UI Grid Export.pdf",
                            proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                        },
                        scrollable: false,
                        pageable: true,
                        sortable: true,
                        groupable: true,
                        filterable: {
                            mode: "row"
                        },
                        editable: {
                            mode: "inline",
                            create: true,
                            update: true,
                            destroy: true
                        }
                    });
                });

                function categoryDropDownEditor(container, options) {
                    $('<input required data-text-field="Country" data-value-field="CustomerID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .width(100)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: {
                                type: "odata-v4",
                                transport: {
                                    read: "http://test.odata.northwind/odata/Customers"
                                }

                            }
                        });
                }


                function NameAutoComplete(container, options) {
                    $('<input data-text-field="ContactName" data-value-field="CustomerID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoAutoComplete({
                            autoBind: false,
                            dataSource: {
                                type: "odata-v4",
                                transport: {
                                    read: "http://test.odata.northwind/odata/Customers"
                                }
                            }
                        });
                }


                function ContactTitleComboBox(container, options) {
                    $('<input data-text-field="ContactTitle" data-value-field="CustomerID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoComboBox({
                            autoBind: false,
                            dataSource: {
                                type: "odata-v4",
                                transport: {
                                    read: "http://test.odata.northwind/odata/Customers"
                                }
                            }
                        });
                }


  </script>

如下所示当我按下更新按钮时，没有任何反应，似乎按钮甚至没有触发

下面是一些绑定到网格的json结果

以下是我在webapi中尝试获取和添加记录到网格的方法。

public class CustomersController : ODataController
    {
        readonly Model1 _db = new Model1();

        [EnableQuery(PageSize = 20)]
        public IHttpActionResult Get()
        {
            return Ok(_db.Customers.AsQueryable());
        }

        public IHttpActionResult Get([FromODataUri] string key)
        {
            return Ok(_db.Customers.SingleOrDefault(t => t.CustomerID == key));
        }
        [System.Web.Mvc.HttpPost]
        public async Task<IHttpActionResult> Post(Customers customer)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            _db.Customers.Add(customer);
            await _db.SaveChangesAsync();
            return Created(customer);
        }
        [System.Web.Mvc.HttpDelete]
        public async Task<IHttpActionResult> Delete([FromODataUri] int key)
        {
            var customers = await _db.Customers.FindAsync(key);
            if (customers == null)
            {
                return NotFound();
            }
            _db.Customers.Remove(customers);
            await _db.SaveChangesAsync();
            return StatusCode(HttpStatusCode.NoContent);
        }
        protected override void Dispose(bool disposing)
        {
            _db.Dispose();
            base.Dispose(disposing);
        }
    }

我一整天都在挠头，看起来我错过了什么，任何帮助都会受到赞赏

更新

Answer 1

您似乎尚未配置网格以允许编辑。 虽然您添加了创建按钮，但您需要更改可编辑字段以允许编辑，如下所示：

editable: {
            mode: "inline",
            create: true,
            update: true,
            destroy: true
        }

希望这可以帮助..