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

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

先上效果图:

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

        [HttpPost]
        public ActionResult PersonalList_Read(DataSourceRequest request)
        {
            IList<PersonalInfoModel> listmodel = new List<PersonalInfoModel>();
            for(int i=0;i<50;i++)
            {
                listmodel.Add(new PersonalInfoModel { 
                    Id=i,
                    Name="Summit"+i,
                    LocalArea="安徽省合肥市"
                });
            }
            //request.Page = 1;
            DataSourceResult result =listmodel.ToDataSourceResult(request);
            result.Total = listmodel.Count();
            return Json(result);
        }

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

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

    @(Html.Kendo().Grid<PersonalInfoModel>()
        .Name("PersonalListGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name).Title("名称").Width(80);
            columns.Bound(c => c.LocalArea).Title("所在地");
        })
         .HtmlAttributes(new {style="700px;"})
         .Editable(e => e.Mode(GridEditMode.InLine))
         .Scrollable(s => s.Enabled(false))
         .Sortable(sort => sort.Enabled(false))
         .Pageable(page => page
                .Refresh(true)
                .ButtonCount(5)
                .PageSizes(new[] { 10, 20, 30, 50 })
                .Messages(message=>message.ItemsPerPage("每页显示数目"))
         )
         .DataSource(datasource => datasource
             .Ajax()
             .PageSize(10)
             .Model(model => model.Id(c => c.Id))
             .Model(model => model.Field(c => c.Id).Editable(false))
             .Read(read => read.Action("PersonalList_Read", "Home"))

         )
    )

先要指定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是不可被编辑的,如果这两个没有的话,更新之类的方法会出现各种各样的奇怪事,第三个不用说大家也知道是读取数据的作用

 (使用Gird一定要指定Id,它是唯一标示一行数据的key,如果你发现使用编辑功能时怎么编辑都不会走到后台或是点击编辑不做处理点击取消会发现数据减少一行,那么你要检查一下你的Id是否有指定)

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

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

注:
本博客文章由本人原创笔记或转载(转载会有说明),目的是分享知识,做个笔记.
欢迎转载,但转载请注明来自(浮云也是种寂寞) ,并包含相关链接。