5.4 网格视图控件GridView (1)

5.4 网格视图控件GridView

GridView控件又称为网格视图控件，它能够以数据网格形式显示数据，并能够对这些数据进行编辑、排序、分页、自定义样式等操作。

5.4.1 GridView控件概述

GridView控件可以显示、编辑、排序、分页、删除其数据源中的数据。其中，这些数据源可以是数据库（如SQL Server、Access、Oracle等）、XML文件、公开数据的业务对象等。GridView控件能够实现如下功能。

显示数据，即把数据源绑定到控件。

行选择功能。

编辑数据，包括更新和删除数据等。

排序功能，可以按照列对显示的数据进行排序。

分页功能，可以对数据源中的数据进行分页显示。

同时保存多个键字段的值。

自定义控件的列样式和外观。

动态处理GridView控件的事件。

GridView控件的基本属性如表5-19所示。

表5-19 GridView控件的基本属性

属性	描述
AutoGenerateColumns	是否为数据源中的每个字段自动创建绑定字段
AutoGenerateDeleteButton	是否为每一个数据行添加【删除】按钮
AutoGenerateEditButton	是否为每一个数据行添加【编辑】按钮

续表

属性	描述
AutoGenerateSelectButton	是否为每一个数据行添加【选择】按钮
BackImageUrl	控件背景图像的URL
Caption	控件的标题
CaptionAlign	控件的标题排列方式，可以是水平排列或垂直排列
CellPadding	单元格的内容和单元格的边框之间的空间量
CellSpacing	单元格间的空间量
Columns	控件中列的集合
DataKeyNames	控件的项的主键字段的名称的集合
DataKeys	控件中的每一行的数据键值的集合
EditIndex	编辑行的索引
GridLines	控件的网格线样式
HorizontalAlign	控件在页面上的水平对齐方式
RowHeaderColumn	控件的列标题的列的名称
Rows	控件中行的集合
SelectedDataKey	控件中选定行的数据键值
UseAccessibleHeader	控件是否以易于访问的格式呈现其标题
SelectedIndex	控件中的选定行的索引
SelectedValue	控件中选定行的数据键值
ShowHeader	是否在控件中显示标题行
ShowFooter	是否在控件中显示脚注行
EmptyDataText	当控件的数据源为空时，控件显示的文本

5.4.2 GridView控件的模板和行

GridView控件支持两种模板：EmptyDataTemplate和PagerTemplate。当GridView控件的数据源为空时，控件显示第一个模板的内容（如果定义了该模板）。PagerTemplate模板定义了GridView控件的与页导航相关内容的模板。

DataList控件称它的数据行为“Item”，GridView控件称它的数据行为“Row”。GridView控件也包含了与DataList控件相对应的行，如HeaderRow、FooterRow、SeletedRow等。同时，GridView控件还定义了行的样式，如HeaderStyle、FooterStyle、SelectedRowStyle等。GridView控件中与模板、行及其样式相关的属性如表5-20所示。

表5-20 GridView控件的模板、行或样式

模板、行或样式名称	描述
EmptyDataTemplate	空数据模板。当控件绑定的数据源为空时，显示该模板的内容
PagerTemplate	页模板，与页导航行相关的内容
EmptyDataRowStyle	空数据模板的样式

续表

模板、行或样式名称	描述
PagerStyle	页模板的样式
HeaderRow	控件的标题行
SelectedRow	控件的选定行
FooterRow	控件的脚注行
TopPagerRow	控件中的页导航顶部行
BottomPagerRow	控件中的页导航底部行
HeaderStyle	标题行的样式
RowStyle	数据行的样式
AlternatingRowStyle	交替行的样式
SelectedRowStyle	选定行的样式
EditRowStyle	编辑行的样式
FooterStyle	脚注行的样式

下面的代码实例声明了一个GridView控件和一个SqlDataSource控件。其中，GridView控件的ID属性的值为gvUser。该控件声明了两种模板：EmptyDataTemplate和PagerTemplate。另外，gvUser控件使用SqlDataSource控件myDSUser作为数据源，显示用户表User中的记录。

注意	当gvUser控件的数据源为空时，该控件才显示EmptyDataTemplate模板定义的内容。在此，笔者添加了ID属性值为btnEmpty的按钮。用户单击该按钮，就把gvUser控件的数据源设置为空，此时可以看到EmptyDataTemplate模板定义的内容。

<%@ Page Language="C#" %>

protected void btnEmpty_Click(object sender,EventArgs e)

{

gvUser.DataSourceID = "";gvUser.DataSource = null;gvUser.DataBind();

}

</script>

<head runat="server"><title>GridView控件的模板列</title></head>

<asp:GridView ID="gvUser" runat="server" AutoGenerateColumns="False"

BackColor="White" BorderColor="#336666" BorderStyle="Double"

BorderWidth="3px" CellPadding="4" GridLines="Horizontal"

AllowPaging="True" DataKeyNames="ID" DataSourceID="myDSUser">

当数据为空时，显示该模板列的内容。

</EmptyDataTemplate>

<asp:LinkButton ID="lbFirst" runat="server">首页</asp:LinkButton>

<asp:LinkButton ID="lbPrev" runat="server">上一页</asp:LinkButton>

<asp:LinkButton ID="lbNext" runat="server">下一页</asp:LinkButton>

<asp:LinkButton ID="lbLast" runat="server">末页</asp:LinkButton>

</PagerTemplate>

<asp:BoundField DataField="ID" HeaderText="ID"

InsertVisible="False" ReadOnly="True" SortExpression="ID" />

<asp:BoundField DataField="UserName" HeaderText="UserName"

SortExpression="UserName" />

<asp:BoundField DataField="Email" HeaderText="Email"

SortExpression="Email" />

<asp:BoundField DataField="CreateDate" HeaderText="CreateDate"

SortExpression="CreateDate" />

</Columns>

</asp:GridView>

<asp:Button ID="btnEmpty" runat="server" OnClick="btnEmpty_Click"

Text="设置数据源为空" />

<asp:SqlDataSource ID="myDSUser" runat="server" ConnectionString="<%$

ConnectionStrings:WEB2ASPNET2DBConnectionString %>"

SelectCommand="SELECT [ID], [UserName], [Email], [CreateDate]

FROM [User]"></asp:SqlDataSource>

</form></body>

</html>

上述代码实例的执行之后，Column.aspx页面如图5.25所示。单击【设置数据源为空】按钮，把gvUser控件的数据源设置为空。此时，gvUser控件显示EmptyDataTemplate模板定义的内容，如图5.26所示。

图5.25 Column.aspx页面初始界面图5.26 gvUser控件显示空模板的内容

5.4.3 GridView控件的域

GridView控件的Columns属性表示该控件中域（Field）的集合。该集合中的每一个元素的基类型都为DataControlField。GridView控件共包括7种域，如BoundField、ButtonField等。它们的具体说明如表5-21所示。

表5-21 GridView控件的域

域名称	描述
BoundField	绑定域，显示数据源中字段的值
ButtonField	按钮域，显示一个命令按钮
CommandField	命令按钮域，显示执行选择、编辑或删除操作的预定义命令按钮
CheckBoxField	复选框域，一般用来显示具有布尔值的字段的值
HyperLinkField	超链接域，将数据源中某个字段的值显示为超链接
ImageField	图像域，显示一个图像
TemplateField	模板域，用户可以自定义该域的内容

下面的代码实例声明了一个GridView控件和一个SqlDataSource控件。其中，GridView控件的ID属性的值为gvUser。该控件声明了9个域。其中，第1、7和8个域为Command域；第2个域为HyperLink域；第3、4个域为Bound域；第5个域为Image域；第6个域为CheckBox域；第9个域为Button域。另外，gvUser控件使用SqlDataSource控件myDSUser作为数据源，显示用户表User中的记录。

<%@ Page Language="C#" %>

<head runat="server"><title>GridView控件的域</title></head>

<asp:GridView ID="gvUser" runat="server" AutoGenerateColumns="False"

BackColor="White" BorderColor="#336666" BorderStyle="Double"

BorderWidth="3px" CellPadding="4" GridLines="Horizontal"

DataKeyNames="ID" DataSourceID="myDSUser">

<asp:CommandField ShowSelectButton="True" />

<asp:HyperLinkField DataTextField="UserName" HeaderText="Username"

DataNavigateUrlFields="ID" DataNavigateUrlFormatString="#{0}"/>

<asp:BoundField DataField="Email" HeaderText="Email"

SortExpression="Email" />

<asp:BoundField DataField="CreateDate" HeaderText="CreateDate"

SortExpression="CreateDate" />

<asp:ImageField DataImageUrlField="ID" HeaderText="标记"

DataImageUrlFormatString="～/Images/xp.gif" ></asp:ImageField>

<asp:CheckBoxField Text="可见"/>

<asp:CommandField ShowEditButton="True" />

<asp:CommandField ShowDeleteButton="True" />

<asp:ButtonField Text="链接" ButtonType="Link"

DataTextField="Username" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="myDSUser" runat="server" ConnectionString="<%$

ConnectionStrings:WEB2ASPNET2DBConnectionString %>"

SelectCommand="SELECT [ID], [UserName], [Email], [CreateDate]

FROM [User]"></asp:SqlDataSource>

</form></body>

</html>

上述代码实例的执行结果如图5.27所示。

图5.27 使用GridView控件的域

5.4.4 编辑数据

GridView控件对数据具有内置的编辑功能，它能够直接修改或删除数据源中的数据。该控件的CommandField域中可以提供【编辑】、【取消】、【更新】和【删除】按钮。这些按钮分别执行编辑状态、取消编辑、更新数据和删除数据等操作。

默认情况下，GridView控件以只读模式显示数据。若控件启用了编辑功能，且处于编辑模式时，则被编辑行的位置不再显示文本，而是显示可编辑控件（如TextBox、CheckBox等控件）。此时，用户可以在可编辑控件中直接编辑数据。单击【取消】按钮，可以取消编辑操作，单击【更新】按钮，将把编辑的结果提交到数据库中。另外，GridView控件还提供了6个与编辑相关的事件，如表5-22所示。

表5-22 GridView控件与编辑相关的事件

事件	描述
RowEditing	单击【编辑】按钮以后，在控件进入编辑模式之前发生
RowCancelingEdit	单击【取消】按钮以后，在该行退出编辑模式之前发生
RowUpdating	单击【更新】按钮以后，在执行更新操作之前发生
RowUpdated	单击【更新】按钮以后，在执行更新操作之后发生
RowDeleting	单击【删除】按钮以后，在执行删除操作之前发生
RowDeleted	单击【删除】按钮以后，在执行删除操作之后发生

下面的代码实例声明了一个GridView控件和一个SqlDataSource控件。其中，GridView控件的ID属性的值为gvUser。该控件声明了四个BoundField和两个CommandField。其中，四个BoundField分别显示用户的ID、名称、Email和创建时间。两个CommandField分别显示【编辑】按钮和【取消】按钮。另外，gvUser控件使用SqlDataSource控件myDSUser作为数据源，显示用户表User中的记录。

注意	SqlDataSource控件myDSUser提供了对数据的选择、插入、编辑、删除等功能。

<%@ Page Language="C#" %>

<asp:GridView ID="gvUser" runat="server" AutoGenerateColumns="False"

BackColor="White" BorderColor="#336666" BorderStyle="Double"

BorderWidth="3px" CellPadding="4" GridLines="Horizontal"

DataKeyNames="ID" DataSourceID="myDSUser" Font-Size="9pt">

<asp:BoundField DataField="ID" HeaderText="ID"

InsertVisible="False" ReadOnly="True" SortExpression="ID" />

<asp:BoundField DataField="UserName" HeaderText="UserName"

SortExpression="UserName" />

<asp:BoundField DataField="Email" HeaderText="Email"

SortExpression="Email" />

<asp:BoundField DataField="CreateDate" HeaderText="CreateDate"

SortExpression="CreateDate" ReadOnly="True" />

<asp:CommandField ShowEditButton="True" />

<asp:CommandField ShowDeleteButton="True" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="myDSUser" runat="server" ConnectionString="<%$

ConnectionStrings:WEB2ASPNET2DBConnectionString %>"

SelectCommand="SELECT [ID], [UserName], [Email], [CreateDate]

FROM [User]" DeleteCommand="DELETE [User] WHERE ID = @ID"

InsertCommand="INSERT INTO [User](Username,Email,RoleID,CreateDate)

VALUES(@Username,@Email,1,GetDate())"

UpdateCommand="UPDATE [User] SET Username = @Username,

Email = @Email,CreateDate = GetDate() WHERE ID = @ID">

<asp:Parameter Name="Username" />

<asp:Parameter Name="Email" />

<asp:Parameter Name="ID" />

</UpdateParameters>

<asp:Parameter Name="Username" /><asp:Parameter Name="Email" />

</InsertParameters>

</asp:SqlDataSource>

</form></body>

</html>

上述代码实例的执行之后，Edit.aspx页面如图5.28所示。单击第3行中的【编辑】链接，gvUser控件处于编辑状态，如图5.29所示。

图5.28 Edit.aspx页面的初始界面图5.29 gvUser控件编辑数据

5.4.5 排序数据

GridView控件内置了排序功能，能够对显示的数据按列排序。若要启用GridView控件的排序功能，只要把它的AllowSorting属性的值设置为true即可。此时，GridView控件把每一列的标题显示为链接。单击每一列的标题可以对该列数据进行排序。GridView控件与排序相关的属性如表5-23所示。

表5-23 GridView控件与排序相关的的属性

属性	描述
AllowSorting	是否启用排序功能
SortDirection	排序的方向，即正序还是倒序
SortExpression	排序表达式

下面的代码实例声明了一个GridView控件和一个SqlDataSource控件。其中，GridView控件的ID属性的值为gvUser。该控件声明了4个BoundField，它们分别显示用户的ID、名称、Email和创建时间。gvUser控件还启用了排序功能。另外，gvUser控件使用SqlDataSource控件myDSUser作为数据源，显示用户表User中的记录。

<%@ Page Language="C#" %>

<asp:GridView ID="gvUser" runat="server" AutoGenerateColumns="False"

BackColor="White" BorderColor="#336666" BorderStyle="Double"

BorderWidth="3px" CellPadding="4" GridLines="Horizontal"

DataKeyNames="ID" DataSourceID="myDSUser" Font-Size="9pt"

AllowSorting="True">

<asp:BoundField DataField="ID" HeaderText="ID"

InsertVisible="False" ReadOnly="True" SortExpression="ID" />

<asp:BoundField DataField="UserName" HeaderText="UserName"

SortExpression="UserName" />

<asp:BoundField DataField="Email" HeaderText="Email"

SortExpression="Email" />

<asp:BoundField DataField="CreateDate" HeaderText="CreateDate"

SortExpression="CreateDate" ReadOnly="True" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="myDSUser" runat="server" ConnectionString="<%$

ConnectionStrings:WEB2ASPNET2DBConnectionString %>"

SelectCommand="SELECT [ID], [UserName], [Email], [CreateDate]

FROM [User]" DeleteCommand="DELETE [User] WHERE ID = @ID"

InsertCommand="INSERT INTO [User](Username,Email,RoleID,CreateDate)

VALUES(@Username,@Email,1,GetDate())"

UpdateCommand="UPDATE [User] SET Username = @Username,

Email = @Email,CreateDate = GetDate() WHERE ID = @ID">

<asp:Parameter Name="Username" />

<asp:Parameter Name="Email" />

<asp:Parameter Name="ID" />

</UpdateParameters>

<asp:Parameter Name="Username" /><asp:Parameter Name="Email" />

</InsertParameters>

</asp:SqlDataSource>

</form></body>

</html>

上述代码实例的执行之后，Sort.aspx页面如图5.30所示。单击第3列的标题【Email】链接，gvUser控件对第3列进行排序，如图5.31所示。

图5.30 Sort.aspx页面的初始界面图5.31 gvUser控件对数据进行排序

5.4.6 分页数据

GridView控件提供了内置分页功能，它能够以分页方式显示数据源中的数据。若要启用GridView控件的分页功能，只要把它的AllowPaging属性的值设置为true即可。GridView控件与分页相关的属性如表5-24所示。

表5-24 GridView控件与分页相关的属性

属性	描述
AllowPaging	是否启用分页功能
PageCount	显示数据源记录所需的页数
PageIndex	当前显示页的索引
PagerSettings	PagerSettings对象，可以设置控件中的页导航按钮的属性
PageSize	每页显示记录的数量

注意	如果GridView控件启用了分页功能，那么它的数据源必须实现了ICollection接口（集合接口）或数据集，否则将引发分页事件异常。特别地，此时，GridView控件不能使用SqlDataReader对象作为数据源。

GridView控件的分页模式由它的PagerSettings属性指定。该属性还可以指定分页使用的向前和向后导航的方向控件。GridView控件支持以下4种分页模式。

NextPrevious，显示【上一页】和【下一页】分页导航链接。

NextPreviousFirstLast，显示【首页】、【上一页】、【下一页】和【尾页】分页导航链接。

Numeric，使用分页后的页码编号作为分页导航链接。

NumericFirstLast，使用【首页】、页码编号和【尾页】作为分页导航链接。

下面的代码实例声明了一个GridView控件和一个SqlDataSource控件。其中，GridView控件的ID属性的值为gvUser。该控件声明了4个BoundField，它们分别显示用户的ID、名称、Email和创建时间。gvUser控件还启用了分页功能。另外，gvUser控件使用SqlDataSource控件myDSUser作为数据源，显示用户表User中的记录。

<%@ Page Language="C#" %>

<asp:GridView ID="gvUser" runat="server" AutoGenerateColumns="False"

BackColor="White" BorderColor="#336666" BorderStyle="Double"

BorderWidth="3px" CellPadding="4" GridLines="Horizontal"

DataKeyNames="ID" DataSourceID="myDSUser" Font-Size="9pt"

AllowPaging="True" PageSize="5">

<asp:BoundField DataField="ID" HeaderText="ID"

InsertVisible="False" ReadOnly="True" SortExpression="ID" />

<asp:BoundField DataField="UserName" HeaderText="UserName"

SortExpression="UserName" />

<asp:BoundField DataField="Email" HeaderText="Email"

SortExpression="Email" />

<asp:BoundField DataField="CreateDate" HeaderText="CreateDate"

SortExpression="CreateDate" ReadOnly="True" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="myDSUser" runat="server" ConnectionString="<%$

ConnectionStrings:WEB2ASPNET2DBConnectionString %>"

SelectCommand="SELECT [ID], [UserName], [Email], [CreateDate]

FROM [User]" DeleteCommand="DELETE [User] WHERE ID = @ID"

InsertCommand="INSERT INTO [User](Username,Email,RoleID,CreateDate)

VALUES(@Username,@Email,1,GetDate())"

UpdateCommand="UPDATE [User] SET Username = @Username,

Email = @Email,CreateDate = GetDate() WHERE ID = @ID">

<asp:Parameter Name="Username" />

<asp:Parameter Name="Email" />

<asp:Parameter Name="ID" />

</UpdateParameters>

<asp:Parameter Name="Username" /><asp:Parameter Name="Email" />

</InsertParameters>

</asp:SqlDataSource>

</form></body>

</html>

上述代码实例执行之后，Paging.aspx页面如图5.32所示。单击分页区域下方的【3】链接，gvUser控件显示第3页的数据，如图5.33所示。

图5.32 Paging.aspx页面的初始界面图5.33 gvUser控件显示第3页的数据

5.4.7 GridView控件的事件

GridView控件提供了与行的行为、以及对行的数据进行选择、编辑、更新、删除等操作相关的事件，如表5-25所示。

表5-25 GridView控件的事件

事件	描述
RowCreated	控件创建行时发生
RowDataBound	控件绑定行的数据时发生
DataBound	控件绑定到数据源后发生
RowCommand	单击控件中的按钮时发生
SelectedIndexChanging	单击【选择】按钮以后，在选择操作进行处理之前发生
SelectedIndexChanged	单击【选择】按钮以后，在选择操作进行处理之后发生
RowEditing	单击【编辑】按钮以后，在控件进入编辑模式之前发生

续表

事件	描述
RowCancelingEdit	单击【取消】按钮以后，在该行退出编辑模式之前发生
RowUpdating	单击【更新】按钮以后，在执行更新操作之前发生
RowUpdated	单击【更新】按钮以后，在执行更新操作之后发生
RowDeleting	单击【删除】按钮以后，在执行删除操作之前发生
RowDeleted	单击【删除】按钮以后，在执行删除操作之后发生
Sorting	单击【排序】超链接以后，在排序操作进行处理之前发生
Sorted	单击【排序】超链接以后，在排序操作进行处理之后发生
PageIndexChanging	单击【导航】按钮以后，在处理分页操作之前发生
PageIndexChanged	单击【导航】按钮以后，在处理分页操作之后发生

下面的代码实例声明了一个GridView控件，并定义了该控件的Init、Load、DataBinding、DataBound、RowCreated、RowCommand、RowDataBound和PreRender事件，并且每一个事件在执行时将显示该事件的名称。如果事件与控件的行（Row）相关，则显示当前行（Row）的索引值。

<%@ Page Language="C#" %>

protected void gvUser_DataBinding(object sender,EventArgs e)

{ ///显示事件的名称

Response.Write("gvUser_DataBinding()事件正在执行……<br />");

}

protected void gvUser_DataBound(object sender,EventArgs e)

{ ///显示事件的名称

Response.Write("gvUser_DataBound()事件正在执行……<br />");

}

protected void gvUser_RowDataBound(object sender,GridViewRowEventArgs e)

{ ///显示事件的名称

Response.Write("第" + (e.Row.RowIndex + 1).ToString()

+ "正在执行gvUser_RowDataBound()事件……<br />");

}

protected void gvUser_RowCreated(object sender,GridViewRowEventArgs e)

{ ///显示事件的名称

Response.Write("第" + (e.Row.RowIndex + 1).ToString()

+ "正在执行gvUser_RowCreated()事件……<br />");

}

protected void gvUser_Init(object sender,EventArgs e)

{ ///显示事件的名称

Response.Write("gvUser_Init()事件正在执行……<br />");

}

protected void gvUser_Load(object sender,EventArgs e)

{ ///显示事件的名称

Response.Write("gvUser_Load()事件正在执行……<br />");

}

protected void gvUser_PreRender(object sender,EventArgs e)

{ ///显示事件的名称

Response.Write("gvUser_PreRender()事件正在执行……<br />");

}

</script>

<head runat="server"> <title>GridView控件的事件</title></head>

<asp:GridView ID="gvUser" runat="server" AutoGenerateColumns="False"

BackColor="White" BorderColor="#336666" BorderStyle="Double"

BorderWidth="3px" CellPadding="4" GridLines="Horizontal"

DataKeyNames="ID" DataSourceID="myDSUser" Font-Size="9pt"

OnDataBinding="gvUser_DataBinding"

OnDataBound="gvUser_DataBound"

OnRowDataBound="gvUser_RowDataBound"

OnRowCreated="gvUser_RowCreated"

OnInit="gvUser_Init" OnLoad="gvUser_Load"

OnPreRender="gvUser_PreRender">

<asp:BoundField DataField="ID" HeaderText="ID"

InsertVisible="False" ReadOnly="True" SortExpression="ID" />

<asp:BoundField DataField="UserName" HeaderText="UserName"

SortExpression="UserName" />

<asp:BoundField DataField="Email" HeaderText="Email"

SortExpression="Email" />

<asp:BoundField DataField="CreateDate" HeaderText="CreateDate"

SortExpression="CreateDate" ReadOnly="True" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="myDSUser" runat="server" ConnectionString="<%$

ConnectionStrings:WEB2ASPNET2DBConnectionString %>"

SelectCommand="SELECT [ID], [UserName], [Email], [CreateDate]

FROM [User]"></asp:SqlDataSource>

</form></body>

</html>

上述代码实例的执行结果如图5.34所示。

图5.34 显示GridView控件的事件执行结果