Kendo 网格 CRUD 不会在服务器端持久化

Question

create 方法发送“空”值，delete 方法returns 未找到 404，put 方法仅清除已编辑的字段。（所有方法都适用于 postman）。

我不确定 Kendo UI 如何将发送到 API，但我的创建方法等待主体中的参数，删除方法等待 ID在 URL(localhost:3000/api/comment/32) 中。我的 put 方法还在正文中等待参数 (JSON)。

我可能做错了什么，但我不知道是什么。

这是代码和屏幕（屏幕来自 post 方法）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="styles/kendo.common.min.css">
    <link rel="stylesheet" href="styles/kendo.default.min.css">
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
    <link rel="stylesheet" href="styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="styles/kendo.silver.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/pako_deflate.min.js"></script>
    <script src="js/jszip.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/daterangepicker.css">

  </head>
  <body>
   
<div id="example">
    <div id="gridComment"></div>
    <script>
        $(document).ready(function () {
            
          var commentDataSource = new kendo.data.DataSource({
            //autoSync : true,
            transport: {
                            read:{
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "get",
                                //contentType: "application/json"
                            },
                            update: {
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "put",
                                //contentType: "application/json"
                            },
                            create: {
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "post",
                            },
                            destroy: {
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "delete",
                                //contentType: "application/json"
                            },
                            
                        },
                        schema:{
                            type: "json",
                            model:{
                                id: "idvatc",
                                fields:{
                                    idvatc: { type: "number", editable : false},
                                    commen: { nullable: true},
                                }   
                            }
                        },
                        batch: true,

          })

             $("#gridComment").kendoGrid({
                    dataSource : commentDataSource,
                    editable: true,
                    confirmation: false,
                    toolbar: ["save", "cancel","create"],
                    columns : [{
                        field : "commen",
                        title : "Comment"
                    },
                    { command: ["edit","destroy"], title: "Actions", width: 200 }
                    ],
                    

                });


        });

        
    </script>

    
</div>


    

</body>
</html>

Answer 1

好的，我想我明白你的问题了。 Kendo 正在发送 application/x-www-url-formencoded 内容类型，我猜你的端点只接受 application/json。两种解决方案，要么让您的端点接受 x-www-url-formencoded，要么在发送之前预过滤 Ajax 请求。

没有做过任何 Nodejs 工作，所以我无法提供指导。但是，如果您的端点是 Java，在 Spring 中它只是删除了 @ResponseBody 注释。

下一个选项是预过滤 Ajax 请求。此示例修改了 URL，因此它可以在您的 Delete 方法中使用。首先是将 transport 修改为如下内容：

transport: {
    read: {
        url: url,
        contentType: 'application/json',
        dataType: 'json',
        type: options.httpRequestType,
        beforeSend: beforeSend, // function to call before sending the request
        data: function(data) {
            if (options.httpRequestType === 'POST') {
                return {
                    preFilterMe: true,
                    parameters: options.parameters,
                    page: data.page,
                    itemsPerPage: data.pageSize,
                };
            }

            return {
                page: data.page,
                itemsPerPage: data.pageSize,
            };
        },
    },
},

在上面的示例中，如果请求是 POST，它会 returns 更多数据用于预过滤。

这里我更改 URL 并将 JSON 数据放入正文，如果它是 POST 并且前置过滤器是 true。

$.ajaxPrefilter(function(options, originalOptions, xhr) {
    if (originalOptions.type === 'POST' && 
        originalOptions.data.preFilterMe) {
        
        options.url = options.url + '?page=' + originalOptions.data.page
            + '&itemsPerPage=' + originalOptions.data.itemsPerPage;

        if (originalOptions.data.parameters.length > 0) {
            options.data = JSON.stringify(originalOptions.data.parameters);
        }
    }
});

希望这个例子能指导您找到解决方案。

Kendo 网格 CRUD 不会在服务器端持久化

Kendo grid CRUD doesn't persist in the server side

javascript

node.js

kendo-ui