Question

当我点击模板列中的删除按钮时，我会收到内置警告提示“你确定要删除此记录吗？”这让我知道我正在触发网格的内置销毁功能。致电：

grid.removeRow(row);

但是当我在警报窗口中单击“确定”时，已删除的行将从UI中的网格中删除，但网格实际上并未在我的Web API中调用Delete方法。我无法弄清楚为什么没有调用Web API方法。

JavaScript：

<script type="text/javascript">
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "api/products",
                            dataType: "json"
                        },
                        destroy: {
                            url: "api/products",
                            type: "DELETE",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                                id: "id",
                                fields: {
                                    id: { editable: false, nullable: false, type: "int" },
                                    name: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10
                },
                editable: true,
                scrollable: false,
                sortable: true,
                pageable: {
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    field: "name",
                    title: "Name"
                }, {
                    template: "<div class='text-center'><a href='Products/Edit/#= id #' class='btn btn-default custom-btn'><i class='glyphicon glyphicon-pencil'></i></a> " +
                              "<button type='button' class='btn btn-default btn-circle js-delete' data-id='#= id #'><i class='glyphicon glyphicon-trash'></i></button></div>",
                    width: 100
                }]
            });

            $(document).on('click', '.js-delete', function () {
                var grid = $("#grid").data("kendoGrid");
                var row = $(e.target).closest('tr');
                grid.removeRow(row);
            });
        });
</script>

Web API控制器（ASP.NET Core 1.0）：

namespace MyApp.Controllers.Api
{
    [Produces("application/json")]
    [Route("api/Products")]
    public class ProductsController : Controller
    {    
        [HttpDelete("{Id}")]
        public IActionResult DeleteProduct(int id)
        {
            // Lookup product and delete it here
        }
    }
}

我已尝试过的一些事情：
1.而不是尝试使用网格的内置destroy命令，我用一个手动Ajax调用delete方法替换了我的JavaScript函数，它运行正常。

2.我尝试将destroy类型更改为POST，将api方法更改为HttpPost。

3.我尝试将api方法中的参数id更改为[FromBody] int Id，网格通过内容体发送参数。

Answer 1

我不确定这是否有帮助，但在我的情况下，我不得不重新映射这样的参数

parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            var index = options.models.length - 1;
                            return kendo.stringify(options.models[index]);
                        }
                    }

我希望这会有所帮助：

<script type="text/javascript">
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "api/products",
                        dataType: "json"
                    },
                    destroy: {
                        url: "api/products",
                        type: "DELETE"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            var index = options.models.length - 1;
                            return kendo.stringify(options.models[index]);
                        }
                    }
                },
                schema: {
                    model: {
                            id: "id",
                            fields: {
                                id: { editable: false, nullable: false, type: "int" },
                                name: { type: "string" }
                        }
                    }
                },
                pageSize: 10
            },
            editable: true,
            scrollable: false,
            sortable: true,
            pageable: {
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "name",
                title: "Name"
            }, {
                template: "<div class='text-center'><a href='Products/Edit/#= id #' class='btn btn-default custom-btn'><i class='glyphicon glyphicon-pencil'></i></a> " +
                          "<button type='button' class='btn btn-default btn-circle js-delete' data-id='#= id #'><i class='glyphicon glyphicon-trash'></i></button></div>",
                width: 100
            }]
        });

        $(document).on('click', '.js-delete', function () {
            var grid = $("#grid").data("kendoGrid");
            var row = $(e.target).closest('tr');
            grid.removeRow(row);
        });
    });
</script>

Kendo Grid不在Web API中调用HttpDelete方法

1 个答案: