KendoUI Grid绑定远程数据显示

Question

我在* .cshtml页面上有一个kendoUI网格。我正在尝试对网格实施服务器端分页。它一次只返回10条记录，即页面大小，以及确定所需页数的所有活动记录的计数。数据从方法返回，但不在前端显示。请看下面的，

当我查看传递的JSONResult时，数据正在前端传递，

* .cshtml -

@(Html.Kendo()
        .Grid<Reckon.Service.Payroll.Data.DTO.EmployeeDto>()
        .Name("EmployeeGrid")
        .Columns(cols =>
        {
            cols.Bound(emp => emp.Id).Title("ID").Hidden();
            cols.Bound(emp => emp.EmployeeNumber).Title("Employee ID").Width(100);
            cols.Bound(emp => emp.IsPayRunReady).Title("Status").Width(10).ClientTemplate("<span title='This employee is #= IsPayRunReady ? '': 'not '#payrun ready.' class='#= IsPayRunReady ? 'okICN-small' : 'alertICN-small'#'>#= IsPayRunReady ? '': 'Not' # #= IsPayRunReady ? 'P':'p'#ayrun ready</span>");
            cols.Bound(emp => emp.FirstName).Title("First Name").Width(100);
            cols.Bound(emp => emp.LastName).Title("Last Name").Width(100);
            cols.Bound(emp => emp.DateOfBirth).Title("DOB").Format("{0:dd/MM/yyyy}").Width(100);
            cols.Template(@<text></text>).ClientTemplate("<a href='" + Url.Action("EmployeeDetailEdit", "EmployeeDetail") + "/#=Id#'>Edit</a>").Width(50);
            cols.Template(@<text></text>).ClientTemplate("<a href='" + Url.Action("EmployeeDetailRead", "EmployeeDetailRead") + "/#=Id#'>View</a>").Width(50);
            cols.Template(@<text></text>).ClientTemplate("<a class='k-button xxx' tag='#=Id#'>Delete</a>").Width(50);
        })
        .Pageable(pageable => pageable.ButtonCount(5))
        .Sortable(sortable => sortable.AllowUnsort(false))
        .Filterable()
        .Resizable(resize => resize.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .Navigatable()            
        //.Events(evt => evt.DataBound("afterGridLoaded"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .PageSize(10)
            .ServerOperation(true)
            .Model(model => { model.Id(emp => emp.Id); })
            .Read(read => read.Action("EmployeeListPerPage", "EmployeeDetail"))
    )
)

Controller.cs -

public ActionResult EmployeeListPerPage([DataSourceRequest] DataSourceRequest request)
    {
        Dispose();
        EmployeeListRequest empList = new EmployeeListRequest();
        empList.PageNum = request.Page;
        empList.PageSize = request.PageSize;

        var dataSource = _payrollService.GetEmployeeListPerPage(empList);
        var model = new EmployeeListModel(dataSource);
        return Json(new
        {
            Data = model.Employees.ToDataSourceResult(request),
            Total = dataSource.Total
        }, JsonRequestBehavior.AllowGet);

        //return Json(model.Employees.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

这将为我提供设置页数但数据未在页面上显示的选项。当我在底部注释掉 返回JSON 时，它会在网格上显示数据，但之后只会显示一个页面。请看下面的，

非常感谢任何帮助纠正这个问题。

Answer 1

屏幕截图中返回的JSON错误地嵌套了字段：

{
  Data: {
    Data: [],
    Errors: ,
    Total: 10
  },
  Total: 10001
}

DataSource正在Data属性中查找您的数据，但该数组实际上位于Data.Data中，因此没有显示数据。

注释掉的行看起来像它应该是正确的，但它看起来只返回了Total只有10个。这就是为什么只显示1页的原因您使用该代码，我无法从您发布的代码中看出为什么.ToDataSourceResult()找不到正确的总数。

你可以这样做吗？

var dataSourceResult = model.Employees.ToDataSourceResult(request); // let Kendo build the data
dataSourceResult.Total = dataSource.Total; // replace total with your own count.
return Json(dataSourceResult, JsonRequestBehavior.AllowGet); // return as JSON