ASP.NET MVC3 技术(二) WebGrid 的使用方法

在 ASP.NET MVC 3 中，WebGrid 是 Web.Helpers 下的新的类，使用 WebGrid 可以减小我们的代码量，本篇先简单的看下 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 的方法完全可以用于我们一般的用户管理等数据量小的操作中，可见会为我们省下不少时间。