Question

我正在研究一个Asp.Net MVC项目，并在一个页面中使用Jquery kendo显示所有用户。

index.cshtml

@model IEnumerable<MyProject.Models.User>
@using Kendo.Mvc.UI

// all script and styles


<div id="grid"></div>

<script>

$(document).ready(function () {
    $("#grid").kendoGrid({
        height: 400,
        columns: [
            { field: "Name", title: "Name" },
            { field: "Username", title: "User Name" },
            { field: "Password", title: "Password" },
            { field: "LastLogin", title: "LastLogin",
                template: "#= kendo.toString(kendo.parseDate(LastLogin, 'yyyy-MM-dd'), 'MM/dd/yyyy') #" // date formating
            },  
            { command: ["edit", "destroy"], width: 180 }
        ],
        dataSource: {
            type: "aspnetmvc-ajax",
            transport: {
                read: { url: "User_Read" },
                create: { url: "User_Create" },
                update: { url: "User_Update" },
                destroy: { url: "User_Destroy" }
            },
            schema: {
                data: "Data",
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number", editable: false, nullable: false },
                        Name: { type: "string", validation: { required: true, required: { message: "required" } } },
                        Username: { type: "string", validation: { required: true, required: { message: "required" } } },
                        Password: { type: "string", validation: { required: true, required: { message: "required" } } },
                        LastLogin: { type: "date", validation: { required: true, required: { message: "required" } }, editable: false }
                    }
                }
            },
            serverPaging: true,
            serverSorting: true,
            pageSize: 10
        },
        height: 550,
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
    });
});

在这里，读取，创建，更新和销毁功能运行良好。但是分页不起作用。

pageSize: 10正在工作，仅显示10个项目，但页脚部分不工作。我无法切换到下一页，按钮不起作用，并且页脚没有可用项目。

我搜索并发现了一些类似的问题，但是答案对我没有帮助。

这是现在界面的外观。我尝试了MVC Kendo，但效果很好，但是我的团队负责人想要jquery kendo。请帮助

更新：

我的User_Read控制器功能

public ActionResult User_Read([DataSourceRequest]DataSourceRequest request)
{

    // db.Configuration.ProxyCreationEnabled = false;
    IQueryable<User> users = db.Users;
    DataSourceResult result = users.ToDataSourceResult(request, usr => new
    {
        Id = usr.Id,
        Name = usr.Name,
        Username = usr.Username,
        Password = usr.Password,
        LastLogin = usr.LastLogin
    });
    return Json(result, JsonRequestBehavior.AllowGet);
}

Answer 1

如@CarstenFranke所述，在您的控制器中，您应该在DataSourceResult中设置项目总数

public ActionResult User_Read([DataSourceRequest]DataSourceRequest request)
{
    IQueryable<User> users = db.Users;
    DataSourceResult result = users.ToDataSourceResult(request, usr => new
    {
        Id = usr.Id,
        Name = usr.Name,
        Username = usr.Username,
        Password = usr.Password,
        LastLogin = usr.LastLogin
    });
    result.Total = users.Count();
    return Json(result, JsonRequestBehavior.AllowGet);
}

在您看来，您还应该映射总属性，例如：

schema: {
    data: "Data",
    model: {...},
    total: "Total"
}

jQuery Kendo Grid Footer显示没有要显示的项目

1 个答案: