【问题标题】:Custom Paging for ASP.Net MVC Kendo GridASP.Net MVC Kendo Grid 的自定义分页
【发布时间】:2013-08-06 02:05:15
【问题描述】:

我有一个 MVC 剑道网格如下。它在默认分页下工作正常。

现在,我想做自定义分页。在控制器动作中,我们需要知道当前页面索引。它还应该设置网格的“总”计数。 [即使数据库中有100条记录,实际数据源一次也只有2条记录。所以网格必须使用“total”属性知道数据库中的记录总数。]

查询一次只能从数据库中返回 2 条记录。

我们如何使用 Kendo Grid 的 MVC 包装器执行此自定义服务器分页?

@using (Html.BeginForm())
{ 

    @(Html.Kendo().Grid<KendoUIMvcSample.Models.Sample>()    
    .Name("ssgrid222")
    .Columns(columns => {
        columns.Bound(p => p.SampleDescription).Filterable(false).Width(100);
        columns.Bound(p => p.SampleCode).Filterable(false).Width(100);
        columns.Bound(p => p.SampleItems).Filterable(false).Width(100);
    })
    .AutoBind(false)
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(2)
        .Read(read => read.Action("Orders_Read", "Sample")
)
     )
  )
}

控制器

public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
        {

            int currentPageNumber = request.Page;
            return Json(GetOrders().ToDataSourceResult(request));
        }

【问题讨论】:

  • 我认为如果你带回 IQueryable,Kendo 将处理并对数据库进行适当的查询。在将数据传递给 Kendo 之前不要运行查询。

标签: asp.net-mvc asp.net-mvc-4 kendo-ui kendo-grid kendo-asp.net-mvc


【解决方案1】:

kendo site中定义

控制器代码

    //Paging and Sorting
    int currentPage = request.Page;
    int pageSize = request.PageSize;
    string sortDirection = "ASC";
    string sortField = "UpdatedDateTime";

    if (request.Sorts != null && request.Sorts.Count > 0)
    {
        sortField = request.Sorts[0].Member;
        sortDirection = request.Sorts[0].SortDirection.ToString();
    }

//Setting the TOTAL
var result = new DataSourceResult()
{
    Data = orders, 
    Total = total // Total number of records
};

return Json(result);

查看

      <div class="GridSearch">

                @(Html.Kendo().Grid<MVC.Models.TransactionHistoryModel>()
    .Name("TransactionHistroyGrid")
     .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(25)
        .ServerOperation(true)
        .Read(read => read
            .Action("TransactionHistorySearch_Read", "TransactionHistoryResults")
            .Data("additionalData")
            )
     )
    .Columns(columns =>
    {
        columns.Bound(p => p.UserId).Filterable(false).Width(40).Title("Userid");
        columns.Bound(p => p.Reviewed).Template(@<text></text>).ClientTemplate("<input id='checkbox'  class='chkbx' type='checkbox' />").Filterable(false).Width(30).Title("Reviewed");
        columns.Bound(p => p.CreatedOnEnd).Format("{0:MM/dd/yyyy}").Filterable(false).Width(50).Title("Created On");
        columns.Bound(p => p.UpdatedOnEnd).Format("{0:MM/dd/yyyy}").Filterable(false).Width(50).Title("Updated On");
        columns.Bound(p => p.Comment).Filterable(false).Width(50).Title("Comment");
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:325px;" })

  )
            </div>

【讨论】:

    【解决方案2】:

    这是我们为 Kendo ListView 实现的自定义分页解决方案。稍作修改,它应该适用于网格。该解决方案由一个自定义的 DataSoure 对象和一个自定义的 JSonResult 类组成。

    自定义数据源:

    public class MyDataSource
    {
        public object AggregateResults { get; set; }
        public object Data { get; set; }
        public object Errors { get; set; }
        public int Total { get; set; }
    }
    

    自定义ActionResult:

    public class JsonNetResult : ActionResult
    {
        public Encoding ContentEncoding { get; set; }
        public string ContentType { get; set; }
        public object Data { get; set; }
    
        public JsonSerializerSettings SerializerSettings { get; set; }
        public Formatting Formatting { get; set; }
    
        public JsonNetResult()
        {
            SerializerSettings = new JsonSerializerSettings();
        }
    
        public override void ExecuteResult(ControllerContext context)
        {
            if (context == null)
                throw new ArgumentNullException("context");
    
            HttpResponseBase response = context.HttpContext.Response;
    
            response.ContentType = !string.IsNullOrEmpty(ContentType)
                                       ? ContentType
                                       : "application/json";
    
            if (ContentEncoding != null)
                response.ContentEncoding = ContentEncoding;
    
            if (Data != null)
            {
                var writer = new JsonTextWriter(response.Output) { Formatting = Formatting };
    
                JsonSerializer serializer = JsonSerializer.Create(SerializerSettings);
                serializer.Serialize(writer, Data);
    
                writer.Flush();
            }
        }
    

    动作方法中的典型用法是:

    public ActionResult Orders_Read([DataSourceRequest] Object request)
        {
            int count = 0;
            var ds = (DataSourceRequest)request;
            var ListOfItemsToDisplay = GetItemsWithPagingInfo
                                    (
                                        MySearchParameters,
                                        ds.PageSize,
                                        ds.Page,
                                        out count
                                    );
            return new JsonNetResult
                                    {
                                        Formatting = Formatting.Indented,
                                        Data = new MyDataSource
                                                       {
                                                           Data = ListOfItemsToDisplay
                                                           Total = count,
                                                           AggregateResults = null,
                                                           Errors = null
                                                       }
                                        };
        }
    

    【讨论】:

      猜你喜欢
      • 2019-07-23
      • 1970-01-01
      • 2017-08-01
      • 1970-01-01
      • 2011-07-03
      • 2016-10-24
      • 2014-12-05
      • 1970-01-01
      • 2023-03-16
      相关资源
      最近更新 更多