Kendo Grid如何更新，創建，刪除數據源

Question

由於某些原因，我無法使用Kendo grid的MVC包裝器。因此，我正在嘗試在Javascript上構建Kendo網格。

嘗試在網格上更新或創建記錄時有兩個主要問題。

1-）網格上的所有操作（銷毀，更新，創建）都將由Kendo網格的數據源創建動作。例如，更新記錄后，數據源將數據多次發送到此url（列數）： http://localhost:63186/Administrator/DefinitionDetailCreate值傳遞給：

http://localhost:63186/Administrator/DefinitionDetailUpdate

2-）操作（更新或創建）后，網格將所有數據而不是新的或更新的數據發送到操作方法，因此它發送請求以顯示網格上的列數

JS：

  var dataItem = this.dataItem($(e.target).closest("tr"));
        var code = dataItem.CODE;
       // alert(code);

        var crudServiceBaseUrl = "/Administrator/",
                     dataSource = new kendo.data.DataSource({
                         transport: {
                             read: {
                                 url: '@Url.Action("DefinitionDetailRead", "Administrator")',
                                 data: { DefinitionCode: code },

                                 dataType: "json"
                             },
                             update: {
                                 url: '@Url.Action("DefinitionDetailUpdate", "Administrator")' ,
                                 type: "POST",
                                 dataType: "text"
                             },
                             destroy: {
                                 url: '@Url.Action("DefinitionDetailDelete", "Administrator")',
                                 type: "POST",
                                 dataType: "text",
                             },
                             create: {
                                 url: '@Url.Action("DefinitionDetailCreate", "Administrator")',
                                 type: "POST",
                                 dataType: "text",

                             } },
                        // batch: true,
                         pageSize: 9,

                         schema: {
                             data: "Data",
                             model: {

                                 ID: "ID",
                                 fields: {
                                     ID: { editable: false, nullable: true },
                                     DESCRIPTION: { validation: { required: true } }


                                 }
                             }
                         }
                     });

        $("#detailsGrid").kendoGrid({

            dataSource: dataSource,
            attributes: { style: "padding-left: 0px; font-size: 14px"},
            pageable: {refresh: false, pageSizes: false, buttonCount: 5},
            toolbar: ["create"],
            columns: [
                {field: "DESCRIPTION", title: "DESCRIPTION", width: "200px"},
                { command: ["edit", "destroy"], title: "Operasyon", width: "100px" }],
            editable: "popup"
        });

控制器：

 [HttpPost]
    public ActionResult DefinitionDetailUpdate(Guid ID,Guid REFERENCEID,string DESCRIPTION)
    {
        return null;

    }
    [HttpPost]
     public ActionResult DefinitionDetailCreate(Guid ID, Guid REFERENCEID, string DESCRIPTION)
     {
         return null;

     }

Answer 1

首先，您可能需要添加parameterMap ，這將有助於識別服務器端方法：

parameterMap: function (options, operation) {
var out = null;
switch (operation) {
    case "create":
        out = '{ "param":' + options.somevalue + '}';
        break;
    case "read":
        out = '{ "id":' + options.somevalue + '}';
        break;
    case "update":
        out = '{ "id":' + options.somevalue + '}';
        break;
    case "destroy":
        out = '{ "id":  ' + options.somevalue + '}';
        break;
}
return out;

}

我還建議將所有dataTypes保留為dataType: "json"

另外，您似乎在傳輸定義中缺少contentType ：

  update: {
                            url: _op.serviceBaseUrl + "Update",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            complete: function (jqXhr, textStatus) {

                            }
                        },

Answer 2

我已經發布了針對同一類型問題的答案 ，您可能已經查看了

要么

您可以使用此代碼

JS

 var dataItem = this.dataItem($(e.target).closest("tr"));
            var code = dataItem.CODE;
           // alert(code);

            var crudServiceBaseUrl = "/Administrator/",
                         dataSource = new kendo.data.DataSource({
                             transport: {
                                 read: {

                                 url: '@Url.Action("DefinitionDetailRead", "Administrator")',
    type: "POST",
                                     dataType: "json"
                                 },
                                 update: {
                                     url: '@Url.Action("DefinitionDetailUpdate", "Administrator")' ,
                                     type: "POST",
                                     dataType: "json"
                                 },
                                 destroy: {
                                     url: '@Url.Action("DefinitionDetailDelete", "Administrator")',
                                     type: "POST",
                                     dataType: "json",
                                 },
                                 create: {
                                     url: '@Url.Action("DefinitionDetailCreate", "Administrator")',
                                     type: "POST",
                                     dataType: "json",

                                 },
                                  parameterMap: function (options, operation) {
                                  if (operation !== "read" && options.models) {
                                  return { models: kendo.stringify(options.models) };
                                  }
                              } },
                            // batch: true,
                             pageSize: 9,

                             schema: {
                                 data: "Data",
                                 model: {

                                     ID: "ID",
                                     fields: {
                                         ID: { editable: false, nullable: true },
                                         DESCRIPTION: { validation: { required: true } }


                                     }
                                 }
                             }
                         });

            $("#detailsGrid").kendoGrid({

                dataSource: dataSource,
                attributes: { style: "padding-left: 0px; font-size: 14px"},
                pageable: {refresh: false, pageSizes: false, buttonCount: 5},
                toolbar: ["create"],
                columns: [
                    {field: "DESCRIPTION", title: "DESCRIPTION", width: "200px"},
                    { command: ["edit", "destroy"], title: "Operasyon", width: "100px" }],
                editable: "popup"
            });

調節器

 [HttpPost]
    public ActionResult DefinitionDetailUpdate(string models)
    {
   //Deserialize to object
    IList<UrObjectType> objName= new JavaScriptSerializer().Deserialize<IList<UrObjectType>>(models);

     return Json(objName)


    }
    [HttpPost]
     public ActionResult DefinitionDetailCreate(string models)
     {
         //Deserialize to object
    IList<UrObjectType> objName= new JavaScriptSerializer().Deserialize<IList<UrObjectType>>(models);

     return Json(objName)

     }

請注意，parameterMap：function（）使用名稱模型以序列化字符串格式發送更新的數據，因此您應在操作中使用“ models ”作為參數名稱

我希望這能幫到您：）