asp.net-mvc 如何在asp.net mvc的客户端Kendo UI网格中实现服务器端分页

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12928744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-08 02:20:53  来源:igfitidea点击:

How to implement Server side paging in Client side Kendo UI grid in asp.net mvc

asp.net-mvckendo-ui

提问by Pankaj

Can anyone tell me how can I implement server-side paging with client-side Kendo UI Grid?

谁能告诉我如何使用客户端 Kendo UI Grid 实现服务器端分页?

回答by Atanas Korchev

UPDATE: We have releasedan open source .NET library which makes paging, sorting an filtering a lot easier.

更新:我们发布了一个开源 .NET 库,它使分页、排序和过滤变得更加容易。

The grid will send the current pageSizeand skiponce you set serverPagingto true. On the server side you should page your data using the provided info and return it together with the total number of items. Here is a code snippet:

网格将发送电流pageSizeskip一旦您设置serverPagingtrue。在服务器端,您应该使用提供的信息分页数据并将其与项目总数一起返回。这是一个代码片段:

Action

行动

public ActionResult Products(int pageSize, int skip) 
{
     using (var northwind = new NorthwindDataContext())
     {
        var products = northwind.Products;
        // Get the total number of records - needed for paging
        var total = products.Count();

        // Page the data
        var data = products.Skip(skip).Take(pageSize).ToList();

        // Return as JSON - the Kendo Grid will use the response
        return Json(new { total = total, data = data });
     }
}

View

看法

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
               url: "home/products",
               dataType: "json",
               type: "POST"
            }
        },
        schema: {
            data: "data", // records are returned in the "data" field of the response
            total: "total" // total number of records is in the "total" field of the response
        },
        serverPaging: true // enable server paging
    }
});

Reference

参考

Paging with LINQ

使用 LINQ 进行分页

DataSource configuration settings

数据源配置设置

回答by user7923798

To implement server pagination, correct format should be return from server. For server side paging JSON format will be something like below JSON:-

要实现服务器分页,应该从服务器返回正确的格式。对于服务器端分页 JSON 格式将类似于以下 JSON:-

{ "mytotal":1069, "mydata": [{ ProductID : 1, ProductName : "Chai"}, { ProductID : 2, ProductName : "Chang" }]}

Tell to kendo grid pick total number of records from mytotal object and data rows from mydata in schema

告诉剑道网格从模式中的 mytotal 对象和数据行中选择记录总数

schema: {
    data: "mydata"
    total: "mytotal" // total is returned in the "total" field of the response
  }

Check detail example here

在此处查看详细示例

回答by Taersious

The accepted answer does not have a UI solution; only provides a jQuery answer. In case it helps anyone else, here is the solution that worked for our kendo grid in UI:

接受的答案没有 UI 解决方案;只提供一个 jQuery 答案。如果它对其他人有帮助,以下是适用于 UI 中剑道网格的解决方案:

code snippet of Controller

控制器代码片段

        DataSourceResult result = new DataSourceResult()
        {
            Data = dataSet,
            Total = recordCount
        };

        return Json(result, JsonRequestBehavior.AllowGet);

code snippet of View

视图的代码片段

        .DataSource(dataSource => dataSource                
            .Ajax()
            .Read(read => read.Action("*<our method>*", "*<our controller>*")
        )