DataGrid Web控制項深度曆險(3) part3

來源:互聯網
上載者:User
datagrid|web|控制項 在本文第二部分我們研究了如何通過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屬性返回了一個Null 字元串。

在本文開始部分我講述了一個電子商務公司的情境,該公司希望顯示部分貨運資訊,但同時提供顯示所有貨運資訊的選擇。到目前為止的樣本中,我們僅顯示了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
mitchell@4guysfromrolla.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表格(第二篇)和本篇中如何在每列中增加按鈕並對事件進行響應。我們將在今後的文章中看到“增加按鈕併當按鈕被點擊時進行響應”的概念可被擴充以允許進行排序、分頁和編輯資料。回見……

祝編程愉快!



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。