Kendo MVC 服务器端分页

Posted 2023-05-07

【中文标题】Kendo MVC 服务器端分页

【英文标题】：Kendo MVC Server Side Paging

【发布时间】：2021-11-09 15:38:30

【问题描述】：

我正在尝试使用 Kendo 显示网格并希望添加服务器端分页。这就是我的视图的样子

@(html.Kendo().Grid<Models.Employee>()
        .Name("empGrid")
        .Columns(column =>
        
            column.Bound(emp => emp.Tickets).Title("Tickets").Filterable(false).Sortable(false)
                .ClientTemplate("<div style='display:flex;align-items:center;'> " +
                                " #= getLateTicketIcon(DueDate) # " 
                                "</div>").Width(100);
            column.Bound(emp => emp.EmpID).Hidden();
            column.Bound(emp => emp.DeptID).Hidden();
            column.Bound(emp => emp.Name).Title("Name#").Width(100);
            column.Bound(emp => emp.TicketNumber).Width(150).ClientTemplate("#= getEempTickets(EmpID, DeptID) # ");
            column.Bound(emp => emp.DueDate).Width(150)
                .ClientTemplate("#: DueDate === null ? '' : kendo.toString(getDateAsUTC(kendo.parseDate(DueDate)), 'MM/dd/yyyy') #");
        )       
        .NoRecords("There are no records to display")
        .Sortable()
        .Scrollable(scrollable => scrollable.Height("auto"))
        .Pageable(pager => pager
            .PageSizes(new[]  10, 25, 50, 100, 200 )
            .Refresh(true)
            .Input(true))
        .Filterable()
        .Resizable(resizable => resizable.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .Excel(ex =>
        
            ex.AllPages(true);
            ex.Filterable(true);
        )
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(50)
            .ServerOperation(true)
            .Read(read => read.Action("GetTickets", "Employee").Data("readFromServerWithParameters").Type(HttpVerbs.Get)))
        .Events(ev => ev.DataBound("currentGridDataBound"))
        .AutoBind(false))

控制器看起来像，我面临的问题是我在 UI 上选择的页码是什么，页码始终为 1。

        [HttpGet]
        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
        public ActionResult GetTickets([DataSourceRequest] DataSourceRequest request, long? empID,  string[] searchOptions)
        
            List<Employee> results = repo.GetTickets(empID, searchOptions,request.Page,request.PageSize);
            JsonResult resultJson = Json(results.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            resultJson.MaxJsonLength = int.MaxValue;
            return resultJson;
        

【问题讨论】：

你能贴一张网格的截图吗？这将有助于其他人更好地理解问题。

【参考方案1】：

我相信您对数据进行了两次分页，一次在 GetTickets 方法中（因为页面和页面大小作为参数传递），另一次在 ToDataSourceResult 中。结果ToDataSourceResult认为整组数据是一个页面，返回一个总和等于页面大小的对象。

为避免这种情况，请从您的存储库中公开一个返回整组数据的方法

例如

        public IQueryable<T> GetAllTickets(int empID)
        
            return this.dbSet.Where(x=> x.id === empID);
        

然后在action中使用方法如下：

        [HttpGet]
        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
        public ActionResult GetTickets([DataSourceRequest] DataSourceRequest request, long? empID,  string[] searchOptions)
        
            List<Employee> results = repo.GetAllTickets(empID);
            JsonResult resultJson = Json(results.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            resultJson.MaxJsonLength = int.MaxValue;
            return resultJson;
        

另一种选择是跳过调用 ToDataSourceResult 方法并自己创建 DataSourceResult 实例。

例如

        [HttpGet]
        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
        public ActionResult GetTickets([DataSourceRequest] DataSourceRequest request, long? empID,  string[] searchOptions)
        
            List<Employee> results = repo.GetTickets(empID, searchOptions,request.Page,request.PageSize);
            JsonResult resultJson = Json(new DataSourceResult 
                 Data = results,
                 Total = results.Count(),
                 ...
             , JsonRequestBehavior.AllowGet);
            resultJson.MaxJsonLength = int.MaxValue;
            return resultJson;
        

我不推荐第二个选项，因为您必须自己处理排序、分组、过滤和聚合等其余操作，而 TodataSourceResult 将为您完成。