ASP.NET MVC3 技术(二) WebGrid 的使用方法
2013-07-16 18:00
525 查看
在 ASP.NET MVC 3 中,WebGrid 是 Web.Helpers 下的新的类,使用 WebGrid 可以减小我们的代码量,本篇先简单的看下 WebGrid 的使用方法,包括它的分页、排序功能以及样式的设置等。
我们还是从留言表读取数据,并使用 WebGrid 来展示我们的留言。WebGrid 大体原理就是将数据集合组织输出一个 HTML 表格,使用 WebGrid 我们先创建一个 WebGrid 类的实体,如下:
当我们查看 WebGrid 类时会发现 WebGrid 构造函数有很多的参数,我们可以根据参数名便基本上能了解参数的意思,使用到时我们再做介绍。接下来使用 GetHtml 方法来组织网格,下边直接给出最终的方法:
这里稍做下解释,1. canPage 为 true 表示允许翻页,rowsPerpage 为2表示每页显示2条,发现参数名基本上很明确的表示了它的意思."tableStyle"是表名所使用的CSS样式名,这样headerStyle等样式的就不能理解了,style分别是各列所使用的CSS样式名;3."canSort"即为是否可排序,默认为可以。最后的两列是 WebGrid 中链接的写法,分别为编辑和删除操作,可以参考下ASP.NET
MVC3 实例(六) 增加、修改和删除操作(二) 。所使用的CSS样式如下:
我们看下这时的输出,此时我们已经可以根据用户名、留言时间来进行排序,并能进行翻页,如下:
我们不难发现,这种方法翻页时每次会将所有的数据取出来,当数据量大的时候是不可行的,后边我们会介绍更好的方法。本篇的 ASP.NET MVC3 中使用 WebGrid 的方法完全可以用于我们一般的用户管理等数据量小的操作中,可见会为我们省下不少时间。
我们还是从留言表读取数据,并使用 WebGrid 来展示我们的留言。WebGrid 大体原理就是将数据集合组织输出一个 HTML 表格,使用 WebGrid 我们先创建一个 WebGrid 类的实体,如下:
@model IList<Android.Models.Contact> @{ //创建实体 var grid = new WebGrid(Model); }
当我们查看 WebGrid 类时会发现 WebGrid 构造函数有很多的参数,我们可以根据参数名便基本上能了解参数的意思,使用到时我们再做介绍。接下来使用 GetHtml 方法来组织网格,下边直接给出最终的方法:
@{ var grid = new WebGrid(Model, canPage: true, rowsPerPage: 2); @grid.GetHtml( tableStyle: "ContactTB", headerStyle: "ContactHD", columns: grid.Columns( grid.Column("UserName", "用户名", style: "UserName", format: @<b>@item.UserName</b>), grid.Column("Content", "留言内容", style: "Content", canSort: false), grid.Column("Addtime", "留言时间", style: "Addtime"), grid.Column(style:"edit",format:(item) => Html.ActionLink("编辑", "Edit", new { id = item.ID })), grid.Column(style: "delete", format: (item) => Html.ActionLink("删除", "Delete", new { id = item.ID })) )); }
这里稍做下解释,1. canPage 为 true 表示允许翻页,rowsPerpage 为2表示每页显示2条,发现参数名基本上很明确的表示了它的意思."tableStyle"是表名所使用的CSS样式名,这样headerStyle等样式的就不能理解了,style分别是各列所使用的CSS样式名;3."canSort"即为是否可排序,默认为可以。最后的两列是 WebGrid 中链接的写法,分别为编辑和删除操作,可以参考下ASP.NET
MVC3 实例(六) 增加、修改和删除操作(二) 。所使用的CSS样式如下:
.ContactTB{border:1px solid #ECF2FD;border-collapse:collapse;} .ContactHD{background:#D4DEE8;} .ContactTB th,.ContactTB td{border:1px solid #03A5D1;} .ContactTB tbody tr:hover{background:#E9E9E9;} .ContactTB tfoot td{text-align:right;} .ContactTB tfoot a{border:1px solid blue;padding:0 5px;} .UserName{width:100px;} .Content{width:400px;} .Addtime{width:120px;} .edit{width:30px;} .delete{width:30px;}
我们看下这时的输出,此时我们已经可以根据用户名、留言时间来进行排序,并能进行翻页,如下:
我们不难发现,这种方法翻页时每次会将所有的数据取出来,当数据量大的时候是不可行的,后边我们会介绍更好的方法。本篇的 ASP.NET MVC3 中使用 WebGrid 的方法完全可以用于我们一般的用户管理等数据量小的操作中,可见会为我们省下不少时间。
相关文章推荐
- ASP.NET MVC3 技术(二) WebGrid 的使用方法
- ASP.NET MVC3 技术(二) WebGrid 的使用方法
- PHP使用memcache缓存技术提高响应速度的方法
- Android_实用技术(2)—— AsyncTask 使用方法
- Android学习笔记:数据库----持久化存储技术SQLite的基本使用方法
- 博为峰JavaEE技术文章 ——MyBatis @Options使用方法
- QT线程技术(二)QThread 的两种使用方法
- FCKeditor使用方法技术详解
- 利用双缓冲技术将位图像素数据写到DIB位图中并在指定的窗口显示(主要使用CreateDIBSection和BitBlt方法)
- 淘宝的新Sprite方法——使用Img Sprite技术对按钮加载顺序优化的简单研究
- 博为峰JavaEE技术文章 ——MyBatis @param使用方法
- k8s技术预研3--使用kubeadm安装、配置Kubernetes集群以及进行故障排查的方法
- php+mysqli使用预处理技术进行数据库查询的方法
- [C#技术] .NET平台开源JSON库LitJSON的使用方法
- 11.Cocos2dx2.2下使用JNI技术调用jar包里面的一些方法遇到的一些问题及解决方式。
- 使用Emit动态调用方法(技术原型2)
- Win 10技术预览版不使用“开始菜单”的方法