ASP.NET2.0中GridView控件的介绍

 

一、GridView介绍

GridView 是 DataGrid的后继控件，将取代DataGrid。GridView功能是在web页面中显示数据源中的数据，将数

据源中的一行数据，也就是一条记录，显示为在web页面上输出表格中的一行。

GridView在功能上更加丰富，因为提供了智能标记面板（也就是show smart tag）更加易用方便,常用的排序、

分页、更新、删除等操作可以零代码实现！具有PagerTemplate属性，可以自定义用户导航页面，也就是说分页

的控制更加随心所欲。GridView和DataGrid在事件模型上也多有不同之处，DataGrid控件引发的都是单个事件

，而GridView控件会引发两个事件，一个在操作前发生，一个在操作后发生，操作前的事件多为***ing事件，

操作后的事件多为***ed事件，比如Sorting 事件和sorted 事件，RowDeleting和RowDeleted事件。

二、GridView操作初步

1、显示数据源中的数据

从工具箱中选取GridView控件拖到页面上，然后点击箭头，在“选择数据源”中选择“新建数据源”, 出现“

数据源配置向导”,进入配置数据源，然后选择新建连接，出现“添加连接”对话框；选择数据源，我选的是

Microsoft SQL Server(SqlClient),服务器名为“.”，（一个点号）。接着选择“windows身份验证”，我选

的数据库为pubs,测试连接，就OK了。

选择好连接字符串，可以选择已经存放在web.config中的ConnectionString ,然后可以选择是使用存储过程，

还是从表或视图中选择数据。

在这一步，选择Where语句可以指定查询条件，点击Where，出现Add Where Clause ,选择要设定条件的列，操

作符是等于还是like还是其它，然后选择Source，也就是说要限定的条件从哪里取值，可以是Control、

Session、Form、Cookie、QueryStirng等，如果选择Control，那么需要在右侧，选中是那个控件，然后还可以

设定默认值，设定完后系统自动生成Sql 表达式和值的表达式，此时点击Add按钮，完成条件的添加，Where

Cluase下出现刚刚添加的条件。如果没有点击Add，很容易设定了条件，但是因为没有添加到Where子句中，所

以不起作用。

在这一步，左侧的Order By，可以让我们设定排序列，就是我们取出的记录要按照什么派逊，可以设定三个列

，是升序还是降序。

在这一步，左侧的Advanced，可以设定Advanced Sql Generation Options,这里可以生成这个查询的Insert、

update、Delete语句，当然，前提是您选择的字段中必须包含了主键。当您想在GridView中不编写任何代码实

现对表格的编辑、删除等操作时，就必须在配置数据源时，在这里生成Insert、Update、Delete这些语句。

GridView中编辑删除等操作的零代码，就是根据配置数据源时自动生成的这些语句来完成数据源的更新删除等

操作的。

在最后一步，您可以测试一下您刚刚生成的查询是否正确，最后点击完成，数据已经出现在页面上了，按

Ctrl+F5运行。

如果对显示不是太满意，还有许多东西可以调的，在Show Smart Tag中也有选择模板等等，我比较喜欢用“专

业”显示，呵呵！

接下来你会兴奋地看到数据库中的数据已经成功地显示在浏览器中了。

您已经会使用Asp.net来显示数据库中的数据了。

2、让GridView可以分页

GridView把数据显示出来了，但是那么多条记录罗列到一页上是不合适的，我们应该对数据进行分页。还记得

在asp时代，分页是多么的麻烦，需要编写很多的代码，而且各种分页组件也应运而生。而在GridView中，您会

发现，分页是如此的简单，只需要您轻点鼠标，在Show Smart Tag中，选中Enable Paging，表格的分页操作就

完成了，是不是So Easy呢。

并不是什么数据源都可以让GridView实现自动分页的，比如如果DataSourceMode是DataReader，就无法实现自

动分页。而且只有ObjectDataSource是界面级别的支持分页，类似我们常用的SqlDataSource都是先提取所有的

记录，然后只显示本页需要显示的记录，然后抛弃其余的记录，都有点浪费资源的啦！

当GridView的AllowPaging属性设置为True的时候，我们实现了分页，还可以对分页进行一些个性化的设置。

常用的属性包括：
PageIndex――设置数据显示的当前页面，默认是0，也就是数据的首页。
PageSize ――也就是一页显示多少条记录，默认为10条。
在PagerSettings中，还可以对分页的导航按钮进行详细设置，
在Mode属性中，可以设置：Numeric――默认的，分页用数字表示，1，2，3……。
NextPrevious、NextPreviousFirstLast、NumericFirstLast均可顾名思义，显示上一页、下一页、首页、末页

等。当Mode设定不是Numeric时，那么可以通过设定FirstPageText、LastPageText等属性来实现分页导航时，

到首页、末页、下页、上页时显示的文字提示。

如果想实现分页界面的完全自动控制，还可以点击GridView右键，选择编辑模版－PagerTemplate来实现，在模

版中加入若干个Button控件，然后将Button控件的CommandName属性设置为Page,将CommandArgument属性分别设

置为First、Last、Prev、Next或者一个数字，即可实现分页操作。

3、GridView中的编辑、删除、排序

数据从数据源中提取出现，显示在网页上后，我们如果需要对其中的数据进行编辑、更新、删除等操作，还是

不需要编写任何代码，利用GridView内置的功能即可实现。

在智能标记中，点击编辑列，在Avaliable Fields中，选择ComandField，然后双击Edit,update,cancel和

Delete，我们就为GridView添加了编辑和删除功能。如果在配置数据源的时候，我们已经生成了Insert、

update、delete这些语句，那么我们现在就可以执行程序。点击页面上的Edit，出现Update和Cancel按钮，同

时当前行除了主键以外的列，数值都放在了一个文本框中，可以进行编辑，然后点击Update即可保存。点击

Delete，删除当前行记录。您是不是已经被GridView强大的功能折服了呢？

在Show Smart Tag中，选择Enable Sorting，这时所有列的Header都变成了一个超链接，其实这些都是一个

LinkButton控件，运行代码，在网页生成的数据表中，点击第一行中的列名，即可按照当前列进行排序，再次

点击则反向排序。

如果您只需要对其中的几列进行排序，可以在智能标记中，选择编辑列，选中要排序的列，然后在右侧的属性

中找到SortExpression属性，然后从下拉框中选择根据哪个字段排序，一般当然是当前字段咯，完成排序的设

置。如果您不需要这一列参与排序，那么只需要把此列的SortExpression属性后面的值删除，也就是说设置成

空字符串即可。试一试，是不是排序已经尽在掌握之中了呢？

三、GridView中的自定义列

GridView可以根据数据源自动生成列，但是如果我们需要自定义列的显示方式，让GridView的列完完全全的由

我们自己来控制，我们就需要用到一种特殊的列――TemplateField。因为GridView生成的列都是一个字段一列

，如果我们需要把两个字段合并为一列显示呢？我们可以使用模板列。我们可以指定包含标记和控件的模版，

自定义列的布局和行为，我们可以新建一个模版列，也可以直接把已经生成的列转换为模版列来进行个性化的

设置。

在GridView上单击右键，选择编辑模版，在弹出菜单中选择要编辑的列，出现列模版的编辑画面。其中

HeaderTemplate――自定义列的标头部分显示的内容，FooterTemplate――脚注部分显示的内容，

ItemTemplate――是打开网页后此列数据显示的内容，EditItemTemplate――此列处于编辑状态时如何显示，

AlternatingItemTemplate――交替项显示的内容，也就是说为了显示效果，可以隔行分别以不同的风格显示。

Example 1：

我们现在假设有一个表，其中有一个字段是username，我们现在产生一个自定义列，自定义列中包含此人的照

片，同时我们假定照片的路径为image/username.jpg。我们首先右键点击GridView，在智能标记中，选择编辑

列，添加一个模版列，然后编辑模版中的ItemTemplate，加入一个Image控件，然后右键点击Image控件，选择

Edit DataBindings，在ImageUrl中设置Field Binding，首先我我要Bound to 数据源中的某列，因为所有图片

的路径和格式是相同的，唯有名字不同而已，所以我们这里选中username字段，在format中，我们要自己定义

其格式，输入image/{0}.jpg, {0}代表的就是上面绑定的字段，下面有一个Two Way DataBinding 的复选框，

就是是否双向绑定的意思，如果单向绑定，一般采用Eval，也就是说数值只从数据源传到页面上，如果双向绑

定，也就是采用Bind的话，对数据的修改可以回传到数据源之中。

在web页面执行时，不同的行因为username不同，图片的名字也会做出相应的替换。点击确定，然后执行当前网

页，我们就可以看到在我们的自定义列中显示出了用户的照片。

Example 2：

在数据库中，存储性别的时候，一般采用bit数据类型，存储为True或者False，在GridView自动生成列的时候

，一般使用CheckedBoxField 列来显示bit类型的数据，显示在网页上就是一个单选框，如果选中，也就是

Checked了，就是男的，否则就是女的。这样看起来，很不直观，下面我们通过自定义列将性别显示为男、女。

首先在GridView的Show Smart Tag中，选择编辑列，然后双击TemplateFields ,添加了一个模版列，确定后，

点击右键选择编辑模版，选中刚添加的列。在ItemTemplate中添加一个DropListDown控件，然后编辑它的数据

绑定，Edit DataBinding，把SelectedValue属性绑定到性别列。

在DropListDown控件中选择 Edit Item，就是编辑其下拉列表的项，我们添加两个Item，一个的Text属性是男

，Value设置为True，一个的Text属性设置为女，Value属性设置为False。到这里，你明白了么？因为

DropDownList控件的显示文本和其值是可以不一样的，我们用数据绑定取到了性别这一列的值，True或者False

，然后反映到DropDownList控件上，如果值为True，因为Text属性为男的Item的Value为True，所以我们现在运

行网页，在新添加的列中，显示的不再是单选框或者True、false这些没有含义的东西，而是以下拉列表的方式

显示出了当前用户是 男还是女。

四、自定义列中的数据更新

假设数据库中有一个"权限"字段，值为0代表未审核用户，为1代表一般用户，为9则代表管理员用户。根据前面

所说的自定义列的办法，通过对DropListDown的绑定，在网页中显示权限为 "管理员"，而不是显示数字9。问

题产生了，如果我们调整用户权限的话，比如把一般用户更改为管理员，在编辑模版中的用户权限的下拉列表

，如何把它的值返回给数据源来完成更新操作。

我们在EditItemTemplate中设置的DropListDown控件，必须选中了Two Way DataBinding，也就是数据双向帮定

，这样才能返回数据。前面我们谈到，在GridView中，事件不是单个的，是两个，一个是发生前，一个是发生

后，因为我们需要在数据更新前把下拉列表的权限值传送出去，所以我们需要对GridView1_RowUpdating 进行

编码,编码如下：

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

{

//当前编辑的是哪行？

int index = GridView1.EditIndex;

//取得当前编辑行的GridViewRow对象

GridViewRow gvr = GridView1.Rows[index];

//在当前行中，寻找DropListDown控件

DropDownList dp = (DropDownList)gvr.FindControl("editdrop");

//将DropListDown的值赋给NewValues集合中的权限字段。

e.NewValues["rights"] = dp.SelectedValue;

}