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

在本文第二部分我们研究了如何通过 ButtonColumn 标记在 DataGrid 中显示按钮。此外，我们考察了如何将事件处理程序与按钮的点击联系起来。下面我们将了解到如何判断 DataGrid 中哪一行的按钮被点击并且基于这些信息执行相应的动作。

** 判断哪一行的按钮被点击 ** ** **

回想一下点击按钮的事件处理程序定义如下：

Sub eventHandlerName(sender as Object, e as DataGridCommandEventArgs)
...
End Sub

DataGridCommandEventArgs 类包含一个 Item 属性，该属性包含了触发该事件的源对象。 Item 属性是 TableRow 类的一个实例，它指向 DataGrid 中被点击的那一行。可使用 Cells 属性访问 TableRow 类中的列。例如有一个 DataGrid, 它的列信息定义如下：

1<asp:datagrid ...="" runat="server">
2<columns>
3<asp:buttoncolumn commandname="details" headertext="FAQ Details" text="Details"></asp:buttoncolumn>
4<asp:boundcolumn datafield="FAQID" headertext="FAQ ID"></asp:boundcolumn>
5<asp:boundcolumn datafield="Description" headertext="FAQ Description"></asp:boundcolumn>
6</columns>
7</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.

…

|

|

**源代码 **

1 @Import Namespace="System.Data" 

1 @Import Namespace="System.Data.SqlClient" 

 1<script language="vb" runat="server">   
 2Sub Page_Load(sender as Object, e as EventArgs)   
 3If Not Page.IsPostBack then   
 4BindData()   
 5End If   
 6End Sub   
 7  
 8  
 9Sub BindData()   
10'1. Create a connection   
11Dim myConnection as New SqlConnection(ConfigurationSettings.AppSettings("connectionString"))   
12  
13'2. Create the command object, passing in the SQL string   
14Const strSQL as String = "sp_Popularity"   
15Dim myCommand as New SqlCommand(strSQL, myConnection)   
16  
17'Set the datagrid's datasource to the datareader and databind 
18
19myConnection.Open()   
20dgPopularFAQs.DataSource = myCommand.ExecuteReader(CommandBehavior.CloseConnection)   
21dgPopularFAQs.DataBind()    
22End Sub   
23  
24  
25Sub dispDetails(sender as Object, e As DataGridCommandEventArgs)   
26Dim buttonColumn as TableCell = e.Item.Cells(0)   
27Dim FAQIDColumn as TableCell = e.Item.Cells(1)   
28Dim DescColumn as TableCell = e.Item.Cells(2)   
29  
30Dim buttonColText as String = **buttonColumn.Text**   
31Dim FAQIDColText as String = FAQIDColumn.Text   
32Dim DescColText as String = DescColumn.Text   
33  
34lblBCT.Text = buttonColText   
35lblFCT.Text = FAQIDColText   
36lblDCT.Text = DescColText   
37End Sub   
38</script>

 1<form runat="server">
 2<b>Value of Clicked Button Column Text</b>:   
 3<asp:label id="lblBCT" runat="server"></asp:label><br/>
 4<b>Value of FAQID Column Text</b>:   
 5<asp:label id="lblFCT" runat="server"></asp:label><br/>
 6<b>Value of Clicked Description Column Text</b>:   
 7<asp:label id="lblDCT" runat="server"></asp:label><br/>
 8<asp:datagrid autogeneratecolumns="False" backcolor="#eeeeee" cellpadding="4" font-name="Verdana" font-size="  10pt  " horizontalalign="Center" id="dgPopularFAQs" onitemcommand="dispDetails" runat="server" width="85%">
 9<headerstyle backcolor="Black" font-bold="True" forecolor="White" horizontalalign="Center"></headerstyle>
10<alternatingitemstyle backcolor="White"></alternatingitemstyle>
11<columns>
12<asp:buttoncolumn buttontype="PushButton" commandname="details" headertext="FAQ Details" text="Details"></asp:buttoncolumn>
13<asp:boundcolumn datafield="FAQID" headertext="FAQ ID"></asp:boundcolumn>
14<asp:boundcolumn datafield="Description" headertext="FAQ Description"></asp:boundcolumn>
15</columns>
16</asp:datagrid>
17</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 。因此我们的页面看起来应该是这样 :

 1<script language="vb" runat="server">   
 2Sub Page_Load(sender as Object, e as EventArgs)   
 3If Not Page.IsPostBack then   
 4BindData() 'Only bind the data on the first page load   
 5End If   
 6End Sub   
 7  
 8  
 9Sub BindData()   
10'Make a connection to the database   
11'Databind the DataReader results to the gPopularFAQs DataGrid.   
12End Sub   
13  
14  
15Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs)   
16'Get detailed information about the selected FAQ and bind   
17'the database results to the dgFAQDetails DataGrid   
18End Sub   
19</script>

 1<form runat="server">   
 2** <asp:datagrid ...="" id="dgFAQDetails" runat="server">   
 3...   
 4</asp:datagrid>   
 5**   
 6<asp:datagrid ...="" id="dgPopularFAQs" runat="server">
 7<columns>
 8<asp:buttoncolumn buttontype="PushButton" headertext="FAQ Details" text="Details"></asp:buttoncolumn>
 9<asp:boundcolumn **="" **visible="False" datafield="FAQID"></asp:boundcolumn>
10<asp:boundcolumn datafield="Description" headertext="FAQ Description"></asp:boundcolumn>
11</columns>
12</asp:datagrid>
13</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

|

[email protected]

|

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)?

…

|

**源代码 **

1 @Import Namespace="System.Data" 

1 @Import Namespace="System.Data.SqlClient" 

 1<script language="vb" runat="server">   
 2Sub Page_Load(sender as Object, e as EventArgs)   
 3If Not Page.IsPostBack then   
 4BindData()   
 5End If   
 6End Sub   
 7  
 8  
 9Sub BindData()   
10'1. Create a connection   
11Dim myConnection as New SqlConnection(ConfigurationSettings.AppSettings("connectionString"))   
12  
13'2. Create the command object, passing in the SQL string   
14Const strSQL as String = "sp_Popularity"   
15Dim myCommand as New SqlCommand(strSQL, myConnection)   
16  
17'Set the datagrid's datasource to the datareader and databind   
18myConnection.Open()   
19dgPopularFAQs.DataSource = myCommand.ExecuteReader(CommandBehavior.CloseConnection)   
20dgPopularFAQs.DataBind()    
21End Sub   
22  
23  
24Sub dispDetails(sender as Object, e As DataGridCommandEventArgs)   
25Dim FAQID as Integer = Convert.ToInt32(e.Item.Cells(1).Text)   
26  
27'Get information about the particular FAQ    
28Dim myConnection as New SqlConnection(ConfigurationSettings.AppSettings("connectionString"))   
29  
30'2. Create the command object, passing in the SQL string   
31Dim strSQL as String = "spGetFAQ"   
32Dim myCommand as New SqlCommand(strSQL, myConnection)   
33  
34myCommand.CommandType = CommandType.StoredProcedure   
35  
36' Add Parameters to SPROC   
37Dim parameterFAQId as New SqlParameter("@FAQID", SqlDbType.Int, 4)   
38parameterFAQId.Value = FAQID   
39myCommand.Parameters.Add(parameterFAQId)   
40  
41  
42'Set the datagrid's datasource to the datareader and databind   
43myConnection.Open()   
44dgFAQDetails.DataSource = myCommand.ExecuteReader(CommandBehavior.CloseConnection)   
45dgFAQDetails.DataBind()   
46  
47dgFAQDetails.Visible = True  'Make the FAQ Details DataGrid visible   
48End Sub   
49</script>

 1<form runat="server">
 2<asp:datagrid autogeneratecolumns="False" backcolor="#eeeeee" cellpadding="4" font-name="Verdana" font-size="  10pt  " horizontalalign="Center" id="dgFAQDetails" runat="server" visible="False" width="90%">
 3<headerstyle backcolor="Black" font-bold="True" forecolor="White" horizontalalign="Center"></headerstyle>
 4<alternatingitemstyle backcolor="White"></alternatingitemstyle>
 5<columns>
 6<asp:boundcolumn datafield="CatName" headertext="Category Name"></asp:boundcolumn>
 7<asp:boundcolumn datafield="Description" headertext="FAQ Description"></asp:boundcolumn>
 8<asp:boundcolumn datafield="ViewCount" dataformatstring="{0:#,###}" headertext="Views" itemstyle-horizontalalign="Center"></asp:boundcolumn>
 9<asp:boundcolumn datafield="SubmittedByName" headertext="Author"></asp:boundcolumn>
10<asp:boundcolumn datafield="SubmittedByEmail" headertext="Author's Email"></asp:boundcolumn>
11<asp:boundcolumn datafield="DateEntered" dataformatstring="{0:MM-dd-yyyy}" headertext="Date Added"></asp:boundcolumn>
12</columns>
13</asp:datagrid>
14<p>
15<asp:datagrid autogeneratecolumns="False" backcolor="#eeeeee" cellpadding="4" font-name="Verdana" font-size="  10pt  " horizontalalign="Center" id="dgPopularFAQs" onitemcommand="dispDetails" runat="server" width="85%">
16<headerstyle backcolor="Black" font-bold="True" forecolor="White" horizontalalign="Center"></headerstyle>
17<alternatingitemstyle backcolor="White"></alternatingitemstyle>
18<columns>
19<asp:buttoncolumn buttontype="PushButton" headertext="FAQ Details" text="Details"></asp:buttoncolumn>
20<asp:boundcolumn datafield="FAQID" visible="False"></asp:boundcolumn>
21<asp:boundcolumn datafield="Description" headertext="FAQ Description"></asp:boundcolumn>
22</columns>
23</asp:datagrid>
24</p></form>

需要注意的第一件事就是 ASP.Net Web 页面中有两个 DataGrid 。第一个 ( dgFAQDetails ) 用于显示一个特定常见问题的详细信息。第二个 ( dgPopularFAQs ) 是我们一直用来显示最受欢迎的 10 个常见问题的那个 DataGrid 。注意 dgPopularFAQs DataGrid 的 FAQID 绑定列被修改了，增加了 Visible="False" ， 以便 FAQID 列不在 dgPopularFAQs DataGrid 的输出中显示。

在过去的三篇文章中我们研究了将数据库查询的结果显示在 HTML 表格中 ( 第一篇 ) ，在无需编写代码的情况下美化 HTML 表格 ( 第二篇 ) 和本篇中如何在每列中增加按钮并对事件进行响应。我们将在今后的文章中看到“增加按钮并当按钮被点击时进行响应”的概念可被扩展以允许进行排序、分页和编辑数据。回见 ……

祝编程愉快！

Published At
Categories with Web编程
Tagged with
comments powered by Disqus