javascript - Kendo Grid 未在 Web API 中调用 HttpDelete 方法

Question

当我单击模板列中的删除按钮时，我收到内置警告警报，显示“您确定要删除此记录吗？”这让我知道我正在正确触发网格的内置销毁功能。通过调用:

grid.removeRow(row);

但是，当我在警报窗口中单击“确定”时，已删除的行将从 UI 中的网格中删除，但网格实际上并未调用我的 Web API 中的删除方法。我不明白为什么 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 Controller (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.我没有尝试使用网格的内置销毁命令，而是用手动 Ajax 调用删除方法替换了 JavaScript 函数，并且效果很好。

2.我尝试将销毁类型更改为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>