DataGrid Web控件深度历险(3) part1

这篇文章是一系列关于使用DataGrid Web控件文章的第三篇。ASP.Net DataGrid Web控件可将数据库信息显示在HTML表格中，并且功能强大。在第一篇文章中我们讨论了DataGrid的基本功能；在第二篇文章中我们讨论了设定DataGrid显示属性的信息。本文将研究如何将事件与DataGrid联系起来。

导言

在第一篇文章中我们研究了DataGrid的基本功能 (它是一个被设计用于在HTML表格标签中显示数据的ASP.Net Web控件)，展示了通过ASP.Net页面显示数据库内容是如何的简单。在第二篇文章中我们研究了如何自定义DataGrid的显示。正如在先前演示(Demo)中看到的，通过很少的程序代码我们就能以印象深刻的格式显示数据库信息。

虽然显示数据非常有效，但是真正有用的是能否将某种形式的动作与DataGrid联系起来。例如，想象一下你正在为某个电子商务公司工作并被要求通过DataGrid显示所有订单信息。每一个订单含有很多相关的数据，包括订购的商品、订购时间、购买者的信息(姓名、地址等)、购买者选择的运货方式等。在一个DataGrid中(为每一个订单)显示所有这些信息将会导致过度的信息显示。

正如在DataGrid Web控件深度历险(2)中看到的，我们可以通过将AutoGenerateColumns属性设为False,然后通过Columns属性指定需要显示的列。虽然这种做法使得数据易于理解，但是如果用户同时希望能够查看到任意一个订单的复杂细节，那又该怎么做呢？理想地我们希望在DataGrid的每一行上有一个标记为Detail的按钮，当点击这个按钮后将显示订单的全部信息。

本文的示例将引领读者创建一个非常类似的应用。在前面的演示中我们显示了ASPFAQs.com最受欢迎的10个常见问题。本文将对该演示进行扩充以显示10个常见问题的最关键信息，同时每一行包含一个Detail按钮。

构建基础

我们在第二篇文章中提到DataGrid控件允许在DataGrid的Columns标记中放置一些BoundColumn标记。回想一下每一个BoundColumn标记代表DataGrid中的一列。为了将按钮放置在DataGrid中，我们可以使用ButtonColumn标记，这与BoundColumn标记的用法很类似。下面的代码显示如何将按钮放置在DataGrid中:

<form runat="server">
<asp:DataGrid runat="server" id="dgPopularFAQs"
BackColor="#eeeeee" Width="85%"
HorizontalAlign="Center"
Font-Name="Verdana" CellPadding="4"
Font-Size="10pt" AutoGenerateColumns="False">
<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True"
HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />

<Columns>
<asp:ButtonColumn Text="Details" HeaderText="FAQ Details" />
<asp:BoundColumn DataField="FAQID" Visible="False" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
</Columns>
</asp:datagrid>
</form>
示例运行结果如下:

包含按钮的DataGrid

本示例显示一个包含Detail按钮的DataGrid Web控件。按钮以链接形式显示；若想使链接成为标准的按钮，需要在ButtonColumn标记中输入ButtonType=”PushButton”.

FAQ Details
FAQ ID
FAQ Description

Details
144
Where can I host my ASP Web site for free (similar to GeoCities or Tripod or any of the many other free Web site sites)?

Details
181
How can I format numbers and date/times using ASP.NET? For example, I want to format a number as a currency.

…




源代码:

<% @Import Namespace="System.Data" %>
<% @Import Namespace="System.Data.SqlClient" %>
<script language="vb" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
BindData()
End Sub


Sub BindData()
'1. Create a connection
Dim myConnection as New SqlConnection(ConfigurationSettings.AppSettings("connectionString"))

'2. Create the command object, passing in the SQL string
Const strSQL as String = "sp_Popularity"
Dim myCommand as New SqlCommand(strSQL, myConnection)

'Set the datagrid's datasource to the datareader and databind
myConnection.Open()
dgPopularFAQs.DataSource = myCommand.ExecuteReader(CommandBehavior.CloseConnection)
dgPopularFAQs.DataBind()
End Sub
</script>

<form runat="server">
<asp:DataGrid runat="server" id="dgPopularFAQs"
BackColor="#eeeeee" Width="85%"
HorizontalAlign="Center"
Font-Name="Verdana" CellPadding="4"
Font-Size="10pt" AutoGenerateColumns="False">
<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />

<Columns>
<asp:ButtonColumn Text="Details" HeaderText="FAQ Details" />
<asp:BoundColumn DataField="FAQID" HeaderText="FAQ ID" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
</Columns>
</asp:datagrid>
</form>



请注意为了使示例正常运行，需要将DataGrid放置在一个服务器端的表单中(如上所示黑体的<form runat=”server”>)。这是因为为了跟踪被点击的按钮和应该发生的关联动作，ASP.Net页面应能够重新创建页面和DataGrid中的一系列按钮。为了做到这一点需要使用页面的状态信息(ViewState)。对状态信息的讨论超出了本文的范围；为了获取更多信息请阅读: Form Viewstate。

注意在示例中创建的按钮是一个文本链接按钮。这是ButtonColumn类生成的缺省外观。如果想显示一个标准的按钮，可在ButtonColumn标记中指定ButtonType=”PushButton”。ButtonColumn类包含一些重要的属性。在上面的代码中使用了两个格式方面的属性。HeaderText属性指定DataGrid中按钮所在列的页眉中的文字。Text属性指定了每个按钮的文本显示。与BoundColumn标记类似，ButtonColumn标记可将每个按钮的文本设为DataGrid的DataSource属性中某一列的值-在ButtonColumn类中省略掉Text属性并将DataTextField属性设为数据库中某个列的名称，该列的值将作为按钮的文本。

……