DataGrid Web控件深度歷險(3) part1
2024-07-21 02:24:23
供稿：網友
這篇文章是一系列關于使用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屬性設為數據庫中某個列的名稱，該列的值將作為按鈕的文本。
