DataGrid Web控件深度歷險(3) part3
2024-07-21 02:24:22
供稿：網友
在本文第二部分我們研究了如何通過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
[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)?
…
源代碼
<% @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表格(第二篇)和本篇中如何在每列中增加按鈕并對事件進行響應。我們將在今后的文章中看到“增加按鈕并當按鈕被點擊時進行響應”的概念可被擴展以允許進行排序、分頁和編輯數據。回見……
祝編程愉快！
