grid - Kendo UI Grid 多次触发 CRUD 操作

标签 grid kendo-ui crud

我在很多地方都见过这个问题,但似乎找不到解决方案。所以我定义了一个带有 CRUD 操作的 Kendo 网格,问题是之前触发的操作会再次触发。 假设您删除条目 X,然后添加条目 Y,则会触发创建操作,然后再次触发删除操作(对于已删除的 X)。同样的事情,如果您首先创建一个元素然后编辑另一个元素,它会编辑第二个元素,然后重新触发第一个创建语句并为第一个插入的元素插入一个副本。如果您继续执行多个操作,那么噩梦就会发生,所有其他先前的操作都会被触发并发送到 Controller 。

我的网格是:

 function InitializeIPAddressesGrid(userID) {
    selectedUserID = userID;
    $(".ipAddresses").kendoGrid({
        dataSource: IPAdressesDataSource,
        sortable: {
            mode: "single",
            allowUnsort: false
        }, 
        remove: function (e) {
            this.refresh();
            var canDelete = confirm("Are you sure you want to delete this record?");
            if (!canDelete) {
             e.preventDefault();
             }

        },
        height: 420,
        resizable: true,
        pageable: {
            refresh: true,
            pageSize: 10
        },
        selectable: "row",
        toolbar: ["create"],
        editable:{mode: "inline", confirmation:false} ,
        columns: [{
            field: "IpAddress",
            title: "IP Address"
        },
        {
            field: "Status",
            title: "Status"
        },
        {
            field: "LockedUntil",
            title: "Locked until",
            template: "#=kendo.toString(LockedUntil, 'yyyy/MM/dd' )#" 
        },
           { command: ["edit", "destroy"], title: " ", width: "180px" }
        ]
    });

}
var IPAdressesDataSource = new kendo.data.DataSource({
    type: "json",
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true,
    pageSize: 10,
    //scrollable:false, 
    transport: {
        read: {
            url: websiteRootUrl + '/PortalAuthorization/GetIPAddressesList',
        },
        update: {
            url: websiteRootUrl + "/PortalAuthorization/UpdateIP",
            dataType: "json",
            type: 'POST', 
            complete: function (e) {
                            if (e.status != 200) {
                                alert(eval('(' + e.responseText + ')').Message);
                            }
                            }
            },
        create:  {
              url: websiteRootUrl + "/PortalAuthorization/CreateIP",
              dataType: "json",
              type: 'POST',
               complete: function (e) {
                                if (e.status != 200) {
                                    alert(eval('(' + e.responseText + ')').Message);

                                }
                                }
              },
        destroy: {
             url: websiteRootUrl + "/PortalAuthorization/DeleteIP",
            dataType: "json",
            type: 'DELETE',
            complete: function (e) {
                            if (e.status != 200) {
                                alert(eval('(' + e.responseText + ')').Message);
                            }
                            }
        },

        parameterMap: function (options, operation) {

            if (operation == "update" && options) {
                return {ipAddress: options.IpAddress , 
                        status: options.Status ,
                        lockedUntil: kendo.toString(options.LockedUntil, 'yyyy/MM/dd' ),
                        pkey: options.ID,
                        databaseID: selectedDatabaseID };
            }
            else
            if (operation == "destroy" && options)
            {
                 return {
                        databaseID: selectedDatabaseID,
                        pkey: options.ID,
                        userIDParam: selectedUserID
                         };   
            }
            else
             if (operation == "create" && options) {
                return {ipAddress: options.IpAddress , 
                        status: options.Status ,
                        lockedUntil: kendo.toString(options.LockedUntil, 'yyyy/MM/dd' ),
                        pkey: options.ID,
                        userIDParam: selectedUserID,
                        databaseID: selectedDatabaseID };
            }
            else
            {
            options.databaseID = selectedDatabaseID;
            options.userID = selectedUserID;
            return options;
            }
        }
    },
    schema: {
        model: {
                 id: "ID",
                 fields: {
                        IpAddress: { type: "string" },
                        Status: { type: "string" },
                        LockedUntil: { type: "date" }
                 }
             },      
        data: function (data) {
            return data.Items;
        },
        total: function (data) {
            return data.TotalCount;
        }
    }
});

我的 Controller 是:

 public object UpdateIP(int databaseID, long pkey, string status, string lockedUntil, string ipAddress)
    {
          var database = [...];
        DynamicDataRepository repository = [...];
        string query = "...";

           repository.ExecuteNonQuery(query);

        return new HttpResponseMessage(HttpStatusCode.OK);
    }

    public object DeleteIP(int databaseID, long pkey, int? userIDParam)
    {
         var database = [...];
        DynamicDataRepository repository = [...];
        string query = "...";

           repository.ExecuteNonQuery(query);

        return new HttpResponseMessage(HttpStatusCode.OK);
    }

    public object CreateIP(int databaseID, long? pkey, string status, string lockedUntil, string ipAddress, int? userIDParam)
    {
        var database = [...];
        DynamicDataRepository repository = [...];
        string query = "...";

           repository.ExecuteNonQuery(query);

        return new HttpResponseMessage(HttpStatusCode.OK);
    }

你有什么想法吗?我哪里做错了什么?提前致谢。附: Controller 中的查询工作正常。

最佳答案

我解决了这个问题,按照 OnaBai 的建议返回更新/创建的实体,在删除的情况下我返回了已删除条目的 ID。

 public object UpdateIP(int databaseID, long pkey, string status, string lockedUntil, string ipAddress)
    {
        var database = [...];
        DynamicDataRepository repository = [...];
        string query = [...];

        IPList updatedIP = new IPList { ID = pkey, IpAddress = ipAddress, Status = status, LockedUntil = DateTime.Today };

        return Json(updatedIP, JsonRequestBehavior.AllowGet);

       // return new HttpResponseMessage(HttpStatusCode.OK);
    }

只有一提:在 CREATE 的情况下,该方法似乎不起作用,所以我所做的是在 CREATE 操作的 .complete 事件中我执行了 ipGrid.dataSource.read(); ipGrid.refresh(); - 所以操作不会重复。 (我读到,在这种情况下,模型定义可能存在问题 - 设置 ID 字段 - 但我确实设置了该字段)。非常感谢 OnaBai

关于grid - Kendo UI Grid 多次触发 CRUD 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17883502/

相关文章:

kendo-ui - 如何动态更改剑道网格的列集

c# - 插入和更新的 URI 约定 - WCF Rest API

php - 简单的 CRUD 生成

forms - 处理频繁变化的数据表单的选项

css - Tapestry:设置 Grid 列的 css 类

javascript - Kendo 网格 - 如何在添加/编辑子行(详细信息网格)时访问父行模型

c# - .NET 有什么好的分布式代理/服务模型吗?

angular - 需要 Angular 7 中的动态复选框列表控件

javascript - extjs 记录按所需属性销毁

javascript - 使用 REST API 的可编辑 jQuery 网格推荐