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是不可被编辑的,如果这两个没有的话,更新之类的方法会出现各种各样的奇怪事,第三个不用说大家也知道是读取数据的作用
配置正确后应该可以正确显示...
今天就到写到这里,有了新想法我会继续更新.
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。