剑道 ui 网格服务器分页发送 pageSize 使用 asp.net Web API 失败答案

【问题标题】：kendo ui gird server paging send pageSize failed with asp.net web API剑道 ui 网格服务器分页发送 pageSize 使用 asp.net Web API 失败
【发布时间】：2023-03-20 05:36:01
【问题描述】：

我使用下面的代码调用 web api 来获取数据，但是如何发送 pagesize，跳到 web api。

   $scope.consulationWorklist = {
        dataSource:
            new kendo.data.DataSource({
                schema: {
                    data: "consultationItems",
                    total: "count"
                },
                serverPaging: true,
                transport: {
                    read: function (options) {
                        $.ajax({
                            url: "http://localhost:61274/api/v1/consultation/search/result",
                            dataType: "json",
                            success: function (result) {
                                options.success(result);
                            },
                            error: function (result) {
                                options.error(result);
                            }
                        });
                    }
                },
                pageSize: 2,

            }),
        pageable: {
            refresh: true,
            //pageSizes: true,
            buttonCount: 5,
            input: true
        },
        scrollable: true,
        filterable: true,
        sortable: true,
        columnMenu: true,
        resizable: true,
    };

ASP.NET WEB API 代码：

[HttpGet]
[Route("search/result")]
public IHttpActionResult SimpleSearch(int pageSize, int skip)
{
    IEnumerable<ConsultationItemDto> result = _ConsultationService.GetAllConsultationItem();

    return Ok(new WorklistSearchResultDto
    {
        Count = result.Count(),
        ConsultationItems = result
    });
}

有很多讨论说剑道在将serverpaging设置为true时会发送pageSize和skip。但不起作用。有谁可以帮忙？

【问题讨论】：

分页详细信息将位于数据源上read 函数的options 参数中。将它们拉出并将它们传递给您的 json 端点。

标签： asp.net asp.net-mvc kendo-ui

【解决方案1】：

按照我的方法，我使用参数映射属性对参数进行字符串化，这样我就可以在 WebAPI 上接受一个 DTO：

transport: {
    read: {
        url: svcSampleUrl,
        contentType: "application/json; charset=utf-8",
        type: "POST",
        dataType: "json"
    },
    parameterMap: function (options) {
        return kendo.stringify(options); //contains take, skip, sort, and filters
    }
},

并在服务器端接受了这个 DTO：

public class SearchDTO
{
    public int take { get; set; }
    public int skip { get; set; }
    public List<SortCriteria> sort { get; set; }
    public List<FilterCriteria> filter { get; set; }
}

public class SortCriteria
{
    public string field { get; set; }
    public string dir { get; set; }
}

public class FilterCriteria
{
    public string field { get; set; }
    public string operator { get; set; }
    public string value { get; set; }
}

我的 WebAPI 方法如下所示：

[HttpPost]
[ActionName("GetItems")]
public SampleResponse GetItems(SearchDTO searchDTO)
{
    //Calling a different layer for the read operation based in the parameter values
    return BusinessLayer.GetItems(searchDTO);
}

【讨论】：

【解决方案2】：

使用url代替读取功能，我解决了这个问题。

 $scope.consulationWorklist = {
        dataSource:
            new kendo.data.DataSource({

                schema: {
                    data: "consultationItems",
                    total: "count"
                },
                serverPaging: true,

                transport: {
                    read:
                        {
                            url: "http://localhost:61274/api/v1/consultation/search/result",
                            dataType: "json",
                        },
                },
                pageSize: 2,

            }),
        pageable: {
            refresh: true,
            buttonCount: 5,
            input: true
        },
        scrollable: true,
        filterable: true,
        sortable: true,
        resizable: true,
        reorderable: true,
    };

【讨论】：