DataGrid Web控件深度历险
这篇文章是一系列关于使用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属性设为数据库中某个列的名称，该列的值将作为按钮的文本。
点击按钮时让一些事情发生
现在已将按钮添加到DataGrid中了，我们希望将服务器端的代码与按钮关联起来，这样当按钮被点击时可发生一些动作。在认识到DataGrid中的ButtonColumn按钮被点击时ItemCommand事件将被触发后，那么我们就可为这个事件编写服务器端的事件处理程序。这个事件处理程序必须定义如下：
Sub eventHandlerName(sender as Object, e as DataGridCommandEventArgs)
...
End Sub
一旦在服务器端代码块(或代码后置页)中定义了此过程，你可通过在DataGrid的标记中增加OnItemComman属性的方法将DataGrid的事件与该事件处理程序联系起来，如下所示：
<asp:datagrid runat="server"
...
OnItemCommand="eventHandlerName">
...
</asp:datagrid>
下面的代码演示了当DataGrid中某个按钮被按下时，事件处理程序如何运行：
<script language="vb" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
If Not Page.IsPostBack then
BindData() 'Only bind the data on the first page load
End If
End Sub
Sub BindData()
'Make a connection to the database
'Databind the DataReader results to the DataGrid.
End Sub
Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs)
Response.Write("You clicked one of the details buttons!")
End Sub
</script>
<form runat="server">
<asp:DataGrid runat="server" ... >
...
</asp:datagrid>
</form>
示例运行结果如下:
包含事件处理程序的DataGrid
本示例显示一个包含Detail按钮的DataGrid Web控件并演示了当按下按钮时如何触发一段代码。点击某个Detail按钮，你将会在Status文本旁看到一个消息，他指出了你点击了这个按钮！
Status: You clicked one of the details buttons!
FAQ Details FAQ ID FAQ Description
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)?
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)
If Not Page.IsPostBack then
BindData()
End If
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
Sub dispDetails(sender as Object, e As DataGridCommandEventArgs)
lblOutput.Text = "You clicked one of the details buttons!"
End Sub
</script>
<form runat="server">
<b>Status:</b> <asp:label id="lblOutput" runat="server" Font-Italic="True" />
<p>
<asp:DataGrid runat="server" id="dgPopularFAQs"
BackColor="#eeeeee" Width="85%"
HorizontalAlign="Center"
Font-Name="Verdana" CellPadding="4"
Font-Size="10pt" AutoGenerateColumns="False"
OnItemCommand="dispDetails">
<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />
<Columns>
<asp:ButtonColumn Text="Details" HeaderText="FAQ Details" CommandName="details" ButtonType="PushButton" />
<asp:BoundColumn DataField="FAQID" HeaderText="FAQ ID" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
</Columns>
</asp:datagrid>
</form>
这里还有一件非常重要的事情需要注意：我们仅在第一次页面访问时执行数据库查询并对DataGrid进行绑定。在Page_Load事件处理程序(每次页面装载时被触发)中，我们检查页面是否被回发(posted back)。如果没有，那么就知道是第一次访问这个页面。在此情况下我们通过数据库查询生成一个DataReader,将DataGrid的DataSource属性设为这个DataReader,并调用DataGrid的DataBind()方法。
当有人点击DataGrid中某个Detail按钮时,ASP.Net Web页面将执行回发，页面又将在服务器端执行。Page_Load事件处理程序将再次被激活，但是这次因为我们在执行回发，BindData()过程将不会被调用。此外detailsClicked事件处理程序将被执行。注意如果我们每次在页面装载时均将数据绑定至DataGrid(也就是说我们省略了If Not Page.IsPostBack检查)，detailsClicked事件处理程序将不会执行，因为重新绑定DataGrid将会清空(flush out)ItemCommand事件。(请重新阅读上面的两段文字-根据各位对DataGrid的了解，你们很有可能忘记执行回发检查并导致DataGrid不能触发针对按钮的事件处理代码。相信我，这件事在我身上多次发生！J)
虽然本例分析了如何将事件处理与按钮的点击联系起来，我们仍然需要知道如何判断DataGrid那一行中的按钮被点击。这是一个非常重要的问题，并将在本文下一部分进行研究。
在本文第二部分我们研究了如何通过ButtonColumn标记在DataGrid中显示按钮。此外，我们考察了如何将事件处理程序与按钮的点击联系起来。下面我们将了解到如何判断DataGrid中哪一行的按钮被点击并且基于这些信息执行相应的动作。
判断哪一行的按钮被点击
回想一下点击按钮的事件处理程序定义如下：
Sub eventHandlerName(sender as Object, e as DataGridCommandEventArgs)
...
End Sub
DataGridCommandEventArgs类包含一个Item属性，该属性包含了触发该事件的源对象。Item属性是TableRow类的一个实例，它指向DataGrid中被点击的那一行。可使用Cells属性访问TableRow类中的列。例如有一个DataGrid,它的列信息定义如下：
<asp:DataGrid runat="server" ... >
<Columns>
<asp:ButtonColumn Text="Details" HeaderText="FAQ Details" CommandName="details" />
<asp:BoundColumn DataField="FAQID" HeaderText="FAQ ID" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
</Columns>
</asp:datagrid>
那么在点击按钮的事件处理程序中，可通过以下方法获得被点击行的某一列的值：
Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs)
Dim buttonColumn as TableCell = e.Item.Cells(0)
Dim FAQIDColumn as TableCell = e.Item.Cells(1)
Dim DescColumn as TableCell = e.Item.Cells(2)
Dim buttonColText as String = buttonColumn.Text
Dim FAQIDColText as String = FAQIDColumn.Text
Dim DescColText as String = DescColumn.Text
End Sub
示例运行结果如下:
更新按钮事件处理程序后的DataGrid示例
本示例展示了一个包含Detail按钮的DataGrid Web控件并演示了当按下按钮时如何触发一段代码。注意点击某个Detail按钮后你会看到被点击按钮所在行的信息。
Value of Clicked Button Column Text:
Value of FAQID Column Text: 181
Value of Clicked Description Column Text: How can I format numbers and date/times using ASP.NET? For example, I want to format a number as a currency.
FAQ Details FAQ ID FAQ Description
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)?
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)
If Not Page.IsPostBack then
BindData()
End If
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
Sub dispDetails(sender as Object, e As DataGridCommandEventArgs)
Dim buttonColumn as TableCell = e.Item.Cells(0)
Dim FAQIDColumn as TableCell = e.Item.Cells(1)
Dim DescColumn as TableCell = e.Item.Cells(2)
Dim buttonColText as String = buttonColumn.Text
Dim FAQIDColText as String = FAQIDColumn.Text
Dim DescColText as String = DescColumn.Text
lblBCT.Text = buttonColText
lblFCT.Text = FAQIDColText
lblDCT.Text = DescColText
End Sub
</script>
<form runat="server">
<b>Value of Clicked Button Column Text</b>:
<asp:label id="lblBCT" runat="server" /><br />
<b>Value of FAQID Column Text</b>:
<asp:label id="lblFCT" runat="server" /><br />
<b>Value of Clicked Description Column Text</b>:
<asp:label id="lblDCT" runat="server" /><br />
<asp:DataGrid runat="server" id="dgPopularFAQs"
BackColor="#eeeeee" Width="85%"
HorizontalAlign="Center"
Font-Name="Verdana" CellPadding="4"
Font-Size="10pt" AutoGenerateColumns="False"
OnItemCommand="dispDetails">
<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />
<Columns>
<asp:ButtonColumn Text="Details" HeaderText="FAQ Details" CommandName="details" ButtonType="PushButton" />
<asp:BoundColumn DataField="FAQID" HeaderText="FAQ ID" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
</Columns>
</asp:datagrid>
</form>
请仔细检查上面的示例。你可能注意到的第一件事就是按钮列不包含任何文本。这是因为仅需通过HTML即可显示按钮，因此TableCell的Text属性返回了一个空字符串。
在本文开始部分我讲述了一个电子商务公司的场景，该公司希望显示部分货运信息，但同时提供显示所有货运信息的选择。到目前为止的示例中，我们仅显示了sp_Popularity存储过程返回列中的一小部分列。想象一下我们仅希望显示最受欢迎的常见问题的描述列，然后提供一个Detail按钮允许用户查看某个常见问题的其余信息。
虽然我们不希望在DataGrid中显示FAQID列，但是我们仍然需要为detialsClicked事件处理程序提供该信息，因为它数据库中表的关键字并唯一标识了每个常见问题。通过对DataGrid标记进行小小的改动(在与数据库中FAQID列对应的BoundColumn标记中增加Visible= "False")，我们仍然能够传递该信息。此改动隐藏了FAQID列，但仍然允许detailClicked事件处理程序访问某个常见问题的标识(通过e.Item.Cells(1).Text)。
因此我们所要做的就是改写detailsClicked事件处理程序，以便当它被触发时获得用户希望显示的那个常见问题的信息，然后再显示该常见问题的详细信息。在阅读了一系列关于如何使用DataGrid的文章后，当需要显示数据库中的数据时，你的第一个想法应该就是使用DataGrid。因此我们的页面看起来应该是这样:
<script language="vb" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
If Not Page.IsPostBack then
BindData() 'Only bind the data on the first page load
End If
End Sub
Sub BindData()
'Make a connection to the database
'Databind the DataReader results to the gPopularFAQs DataGrid.
End Sub
Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs)
'Get detailed information about the selected FAQ and bind
'the database results to the dgFAQDetails DataGrid
End Sub
</script>
<form runat="server">
<asp:DataGrid runat="server" id="dgFAQDetails" ... >
...
</asp:datagrid>
<asp:DataGrid runat="server" id="dgPopularFAQs" ... >
<Columns>
<asp:ButtonColumn Text="Details" HeaderText="FAQ Details"
ButtonType="PushButton" />
<asp:BoundColumn DataField="FAQID" Visible="False" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
</Columns>
</asp:datagrid>
</form>
示例运行结果如下:
本示例展示了如何在DataGrid的每一行中显示概要信息和一个Detail按钮，当按钮被点击时，对所选择的数据项显示其余信息。
Category Name FAQ Description Views Author Author's Email Date Added Getting Started
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)? 163,148 Scott Mitchell test@test.com 03-20-2001
FAQ Details FAQ Description
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)?
…
源代码
<% @Import Namespace="System.Data" %>
<% @Import Namespace="System.Data.SqlClient" %>
<script language="vb" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
If Not Page.IsPostBack then
BindData()
End If
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
Sub dispDetails(sender as Object, e As DataGridCommandEventArgs)
Dim FAQID as Integer = Convert.ToInt32(e.Item.Cells(1).Text)
'Get information about the particular FAQ
Dim myConnection as New SqlConnection(ConfigurationSettings.AppSettings("connectionString"))
'2. Create the command object, passing in the SQL string
Dim strSQL as String = "spGetFAQ"
Dim myCommand as New SqlCommand(strSQL, myConnection)
myCommand.CommandType = CommandType.StoredProcedure
' Add Parameters to SPROC
Dim parameterFAQId as New SqlParameter("@FAQID", SqlDbType.Int, 4)
parameterFAQId.Value = FAQID
myCommand.Parameters.Add(parameterFAQId)
'Set the datagrid's datasource to the datareader and databind
myConnection.Open()
dgFAQDetails.DataSource = myCommand.ExecuteReader(CommandBehavior.CloseConnection)
dgFAQDetails.DataBind()
dgFAQDetails.Visible = True 'Make the FAQ Details DataGrid visible
End Sub
</script>
<form runat="server">
<asp:DataGrid runat="server" id="dgFAQDetails"
BackColor="#eeeeee" Width="90%"
HorizontalAlign="Center"
Font-Name="Verdana" CellPadding="4"
Font-Size="10pt" AutoGenerateColumns="False"
Visible="False">
<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />
<Columns>
<asp:BoundColumn DataField="CatName" HeaderText="Category Name" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
<asp:BoundColumn DataField="ViewCount" DataFormatString="{0:#,###}"
HeaderText="Views" ItemStyle-HorizontalAlign="Center" />
<asp:BoundColumn DataField="SubmittedByName" HeaderText="Author" />
<asp:BoundColumn DataField="SubmittedByEmail" HeaderText="Author's Email" />
<asp:BoundColumn DataField="DateEntered" HeaderText="Date Added"
DataFormatString="{0:MM-dd-yyyy}" />
</Columns>
</asp:datagrid>
<p>
<asp:DataGrid runat="server" id="dgPopularFAQs"
BackColor="#eeeeee" Width="85%"
HorizontalAlign="Center"
Font-Name="Verdana" CellPadding="4"
Font-Size="10pt" AutoGenerateColumns="False"
OnItemCommand="dispDetails">
<HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" />
<AlternatingItemStyle BackColor="White" />
<Columns>
<asp:ButtonColumn Text="Details" HeaderText="FAQ Details" ButtonType="PushButton" />
<asp:BoundColumn DataField="FAQID" Visible="False" />
<asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
</Columns>
</asp:datagrid>
</form>
需要注意的第一件事就是ASP.Net Web页面中有两个DataGrid。第一个(dgFAQDetails)用于显示一个特定常见问题的详细信息。第二个(dgPopularFAQs)是我们一直用来显示最受欢迎的10个常见问题的那个DataGrid。注意dgPopularFAQs DataGrid的FAQID绑定列被修改了，增加了Visible="False"，以便FAQID列不在dgPopularFAQs DataGrid的输出中显示。
在过去的三篇文章中我们研究了将数据库查询的结果显示在HTML表格中(第一篇)，在无需编写代码的情况下美化HTML表格(第二篇)和本篇中如何在每列中增加按钮并对事件进行响应。我们将在今后的文章中看到“增加按钮并当按钮被点击时进行响应”的概念可被扩展以允许进行排序、分页和编辑数据
选择自 chinapro的 Blog
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
