ASP.Net MVC Kendo Grid 的自定义分页
Posted
技术标签:
【中文标题】ASP.Net MVC Kendo Grid 的自定义分页【英文标题】:Custom Paging for ASP.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 之前不要运行查询。 【参考方案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
;
【讨论】:
以上是关于ASP.Net MVC Kendo Grid 的自定义分页的主要内容,如果未能解决你的问题,请参考以下文章
asp.net mvc kendo ui grid 加密列数据
在 ASP.NET MVC 上使用 Kendo Grid 更改数据
无法覆盖 Kendo Grid 过滤器消息 (ASP.NET MVC)
如何使用 ASP.NET MVC 在 Kendo UI Grid 中实现 N 级嵌套层次结构