asp.net-web-api - 即使定义了页面大小，Kendo Grid 也会显示所有记录

Question

我是 kendo UI 的新手，我正在尝试使用 Webapi 实现 Kendo 网格，分页没有任何效果下面是代码。应用程序接口(interface)

  public IList<Customer> GetCustomers(int take, int skip)
        {
            this.Customers = FillData.Customers;
            this.Orders = FillData.Orders;
            return Customers.Skip(skip).Take(take).ToList();
        }

和javascript

 $(document).ready(function () {
            var element = $("#grid").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: "/api/GridData/GetCustomers",
                        dataType: "json" 
                    },
                    pageSize: 6,
                    serverPaging: true,
                },
                height: 600,
                sortable: true,
                pageable: true,
                //detailInit: detailInit,
                //dataBound: function () {
                //    this.expandRow(this.tbody.find("tr.k-master-row").first());
                //},
                columns: [
                    {
                        field: "FirstName",
                        title: "First Name",
                        width: "110px"
                    },
                    {
                        field: "LastName",
                        title: "Last Name",
                        width: "110px"
                    },
                    {
                        field: "Country",
                        width: "110px"
                    },
                    {
                        field: "City",
                        width: "110px"
                    },
                    {
                        field: "Title"
                    }
                ]
            });
        });

与 telerik 提供的 Odata 服务相同的东西运行良好。

Answer 1

几个月前我写了一篇博文 - Kendo UI Grid - Server Side Paging, Filtering and Sorting .这应该可以解决您的查询。帖子的主要重点是向 WebAPI 发送正确的参数。我已经展示了示例网格和数据源代码以及发送到 WebAPI 的请求和响应对象。如果您需要任何解释，请告诉我。

编辑:将所有内容都张贴在这里，因为仅链接是不受欢迎的。

网格

下面是一个 Kendo UI Grid 声明，我们将为其实现服务器端操作。

$("#sampleGrid").kendoGrid({
    columns: [
        { field: "ID", title: "ID", width: 50 },
        { field: "Label", title: "Label", template: "<span class='k-link bold' title='${Description}'>${Label}</span>" },
        { field: "Description", title: "Description" }
    ],
    dataBound: function () { this.element.find('tbody tr:first').addClass('k-state-selected') },
    pageable: {
        refresh: true,
        pageSizes: [10, 15, 20, 25]
    },
    resizable: true,
    reorderable: true,
    filterable: true,
    groupable: true,
    selectable: true,
    sortable: true
});

数据源

下面的数据源向服务器方法发送调用，地址保存在 svcSampleUrl 中并在“传输”属性中分配给它。不需要单独进行ajax调用来获取数据源的数据，

将 serverPaging、serverFiltering 和 serverSorting 设置为 true 可使 Kendo UI Grid DataSource 在用户触发以下任一事件时发送服务器调用；页面更改、过滤器更改以及列排序更改。

var sampleDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: svcSampleUrl,
            contentType: "application/json; charset=utf-8",
            type: "POST",
            dataType: "json"
        },
        parameterMap: function (options) {
            model.Take = options.take;
            model.Skip = options.skip;
            model.Sort = options.sort;
            model.Filter = options.filter;
            return kendo.stringify(model);
        }
    },
    schema: {
        data: "sampleDTOList",
        //  another way to accept the response if some particular values need processing
        //data: function (response) {
        //  //some implementation with the response values
        //  return response.WorklistDTOList;
        //},
        total: "totalItems",
        model: {
            fields: {
                ID: { type: "number" },
                Label: { type: "string" },
                Description: { type: "string" }
            }
        }
    },
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true,
    pageSize: 10,
});

参数映射属性允许我们将一组默认参数与自定义参数一起发送回服务器。默认参数包括“take”、“skip”、“sort”和“filter”，分别对应于页面大小、要跳过的记录数量、排序条件和过滤条件数组。由于可能还需要发送其他参数，因此在具有其他值的模型中设置默认参数值。 Kendo.stringify 应用于模型并作为完整的请求对象返回。

数据和总计

DataSource 模式包含两个属性； “数据”和“总计”。其中每一个都是我们期望结果的响应对象中的属性名称。我已将“sampleDTOList”分配给“数据”属性，因为我的响应对象将包含该名称下的记录列表。同样，我已将“totalItems”分配给“total”属性。 “总计”属性接受所有记录计数的数值，而不管当前页面上返回了多少。这样 DataSource 就知道实际有多少条记录以及要显示多少页。

注意:此处不探讨该模型，仅作为可使用的任何模型的占位符进行引用。

请求

Request 对象包含作为 DataSource 设置为发送到服务器的默认和自定义参数的确切属性。

public class FilterDTO
{
    public int Take { get; set; }
    public int Skip { get; set; }
    public List<SortCriteria> Sort { get; set; }
    public List<FilterCriteria> Filter { get; set; }

    public string ID { 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; }
}

服务器端

这是我们接收调用的地方，其中包含操作数据所需的所有参数。这是一个简单的方法，可以使用所有参数调用数据库存储过程以获取过滤结果。然后，存储过程应根据给定的页面大小、要跳过的记录数量、排序条件、过滤条件数组以及我已由调用请求中包含的模型发送的任何其他过滤参数返回数据集。但需要根据我们掌握的信息计算页码。

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

页码

由于我们从应用程序的客户端接收到“take”和“skip”，因此根据给定的信息很容易计算所需的分页数。当我们知道页面大小和要跳过的记录数量时，我们可以通过应用以下规则来获取页码:

pageNo = (skip + take) / take

回应

Response对象包含前面提到的DataSource需要的两个属性；一种用于“数据”，一种用于架构的“总”属性。

public class SampleResponse : BaseResponse
{
    private List<SampleItems> SampleDTOList;
    public List<SampleItems> sampleDTOList
    {
        get { return SampleDTOList; }
        set { SampleDTOList = value; }
    }
    public int totalItems { get; set; }
}