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

Posted 2023-05-07

【中文标题】Kendo Grid 未在 Web API 中调用 HttpDelete 方法

【英文标题】：Kendo Grid not calling HttpDelete method in Web API

【发布时间】：2016-12-25 12:17:14

【问题描述】：

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

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.我没有尝试使用网格的内置销毁命令，而是用手动 Ajax 调用 delete 方法替换了我的 JavaScript 函数，它工作正常。

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

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

【问题讨论】：

***.com/questions/17539621/…

你应该将HttpDelete改为POST，因为DELETE主要用于删除服务器上的资源，然后将editable改为inline或popup。

【参考方案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>