上一篇文章对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=;i<;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();
columns.Bound(c => c.LocalArea).Title("所在地");
})
.HtmlAttributes(new {style="width:700px;"})
.Editable(e => e.Mode(GridEditMode.InLine))
.Scrollable(s => s.Enabled(false))
.Sortable(sort => sort.Enabled(false))
.Pageable(page => page
.Refresh(true)
.ButtonCount()
.PageSizes(new[] { , , , })
.Messages(message=>message.ItemsPerPage("每页显示数目"))
)
.DataSource(datasource => datasource
.Ajax()
.PageSize()
.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是否有指定)

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

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

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

Asp.net mvc Kendo UI Grid的使用(二)的更多相关文章

  1. [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)

    有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...

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

    上一篇的操作已经能够显示基本数据了,这次介绍一下如何进行数据操作以及显现自定义命令. 第一步当然还是准备数据: [HttpPost] public ActionResult PersonalList_ ...

  3. kendo ui grid选中行事件,获取combobox选择的值

    背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...

  4. Kendo UI 单页面应用(二) Router 类

    Kendo UI 单页面应用(二) Router 类 Route 类负责跟踪应用的当前状态和支持在应用的不同状态之间切换.Route 通过 Url 的片段功能(#url)和流量器的浏览历史功能融合在一 ...

  5. ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法

    一.一个功能强大的页面开发辅助类—HtmlHelper初步了解 1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归. ...

  6. Asp.Net MVC页面静态化功能实现二:用递归算法来实现

    上一篇提到采用IHttpModule来实现当用户访问网站的时候,通过重新定义Response.Filter来实现将返回给客户端的html代码保存,以便用户下一次访问是直接访问静态页面. Asp.Net ...

  7. Asp.net mvc 中Action 方法的执行(二)

    [toc] 前面介绍了 Action 执行过程中的几个基本的组件,这里介绍 Action 方法的参数绑定. 数据来源 为 Action 方法提供参数绑定的原始数据来源于当前的 Http 请求,可能包含 ...

  8. asp.net mvc +easyui 实现权限管理(二)

    一写完后,好久没有继续写了.最近公司又在重新开发权限系统了,但是由于我人微言轻,无法阻止他们设计一个太监版的权限系统.想想确实是官大一级压死人啊, 没办法我只好不参与了 让他们去折腾. 我就大概说一下 ...

  9. 在ASP.NET MVC中使用Grid.mvc

    很久没有写ASP.NET的博文了,专心工作嘛,今天写一点MVC的博文,也是自己练习来的,是使用grid.mvc来显示数据. 首先打开Manage Nuget Packages,搜索grid.mvc并安 ...

随机推荐

  1. Types of Learning

    从四个角度大致总结一下不同类型的机器学习问题. 1. 按照输出空间的变化: 分类问题(二分类.多分类).回归问题 2. 按照输出的标记变化: 监督学习 与 非监督学习 与 半监督学习(树的识别) 与 ...

  2. js常用宽高属性

    document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...

  3. 构建LINUX下的入侵检测系统——LIDS 系统管理命令--vlock

    构建LINUX下的入侵检测系统——LIDS   系统管理命令--vlock http://blog.chinaunix.net/uid-306663-id-2440200.html LIDS官方网站: ...

  4. Outlook 2013 电子邮件账户设置备份与恢复

    与之前版本不同,Outlook 2013需要备份以下注册表内容:HKEY_CURRENT_USER\Software\Microsoft\Office\15.0\Outlook\Profiles恢复时 ...

  5. JAVA 发送邮件代码---发送文本内容: 内容使用\n 进行换行

    依赖包:mail.jar JAR链接地址: http://pan.baidu.com/s/1o8LNl0Y 密码: ja52 package mail; import java.util.Proper ...

  6. IO学习

    ---恢复内容开始--- 命名规则: 1.类名使用 UpperCamelCase 风格,必须遵从驼峰形式,但以下情形例外:(领域模型 的相关命名)DO / BO / DTO / VO 等. 2.方法名 ...

  7. visio子流程创建

    已经画好了流程,想将一部分抽取成子流程: 多选中要抽取成子流程的的框图,点 菜单栏  中的 进程 选项,点此选项卡下面的第三个按钮: 根据所选内容创建 这样就会自动生成子流程,子流程的具体位置在 左下 ...

  8. Reservoir Sampling - 蓄水池抽样问题

    问题起源于编程珠玑Column 12中的题目10,其描述如下: How could you select one of n objects at random, where you see the o ...

  9. Linux下卸载安装mysql

    1.卸载命令:# rpm -qa |grep -i mysql # yum remove mysql-community mysql-community-server mysql-community- ...

  10. 深入浅出Android开发之Surface介绍

    一 目的 本节的目的就是为了讲清楚Android中的Surface系统,大家耳熟能详的SurfaceFlinger到底是个什么东西,它的工作流程又是怎样的.当然,鉴于SurfaceFlinger的复杂 ...