Asp.net mvc Kendo UI 的使用(二)

  上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用

先上效果图:

技术分享

要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc.Extensions两个命名空间然后实现数据的加载:

 1         [HttpPost]
 2         public ActionResult PersonalList_Read(DataSourceRequest request)
 3         {
 4             IList<PersonalInfoModel> listmodel = new List<PersonalInfoModel>();
 5             for(int i=0;i<50;i++)
 6             {
 7                 listmodel.Add(new PersonalInfoModel { 
 8                     Id=i,
 9                     Name="Summit"+i,
10                     LocalArea="安徽省合肥市"
11                 });
12             }
13             //request.Page = 1;
14             DataSourceResult result =listmodel.ToDataSourceResult(request);
15             result.Total = listmodel.Count();
16             return Json(result);
17         }

这里的DataSourceRequest是Kendo封装的方法接收前台传来的基本数据,DataSourceResult是把model的数据转换为Kendo所能识别的的格式然后以Json的形式返回

在View中先@using Kendo.Mvc.UI后才能使用Kendo的HtmlHelper,代码如下:

 

 1     @(Html.Kendo().Grid<PersonalInfoModel>()
 2         .Name("PersonalListGrid")
 3         .Columns(columns =>
 4         {
 5             columns.Bound(c => c.Name).Title("名称").Width(80);
 6             columns.Bound(c => c.LocalArea).Title("所在地");
 7         })
 8          .HtmlAttributes(new {style="width:700px;"})
 9          .Editable(e => e.Mode(GridEditMode.InLine))
10          .Scrollable(s => s.Enabled(false))
11          .Sortable(sort => sort.Enabled(false))
12          .Pageable(page => page
13                 .Refresh(true)
14                 .ButtonCount(5)
15                 .PageSizes(new[] { 10, 20, 30, 50 })
16                 .Messages(message=>message.ItemsPerPage("每页显示数目"))
17          )
18          .DataSource(datasource => datasource
19              .Ajax()
20              .PageSize(10)
21              .Model(model => model.Id(c => c.Id))
22              .Model(model => model.Field(c => c.Id).Editable(false))
23              .Read(read => read.Action("PersonalList_Read", "Home"))
24 
25          )
26     )

 

先要指定Grid所使用的基本模型为PersonalInfoModel,这里Grid的一些基本属性基本上都已列出,挑个主要的讲就是

.Model(model => model.Id(c => c.Id))

.Model(model => model.Field(c => c.Id).Editable(false))

.Read(read => read.Action("PersonalList_Read", "Home"))

这三个中第一个指定了主Id,这样对执行一些方法时可以针对性的行操作同时这个Id是不可被编辑的,如果这两个没有的话,更新之类的方法会出现各种各样的奇怪事,第三个不用说大家也知道是读取数据的作用

 

配置正确后应该可以正确显示...

 

今天就到写到这里,有了新想法我会继续更新.

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。