明輝手游網(wǎng)中心:是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺!

DataGrid Web控件深度歷險(3) part1

[摘要]這篇文章是一系列關(guān)于使用DataGrid Web控件文章的第三篇。ASP.Net DataGrid Web控件可將數(shù)據(jù)庫信息顯示在HTML表格中,并且功能強大。在第一篇文章中我們討論了DataGrid的基本功能;在第二篇文章中我們討論了設(shè)定DataGrid顯示屬性的信息。本文將研究如何將事件與Da...
這篇文章是一系列關(guān)于使用DataGrid Web控件文章的第三篇。ASP.Net DataGrid Web控件可將數(shù)據(jù)庫信息顯示在HTML表格中,并且功能強大。在第一篇文章中我們討論了DataGrid的基本功能;在第二篇文章中我們討論了設(shè)定DataGrid顯示屬性的信息。本文將研究如何將事件與DataGrid聯(lián)系起來。

導言

在第一篇文章中我們研究了DataGrid的基本功能 (它是一個被設(shè)計用于在HTML表格標簽中顯示數(shù)據(jù)的ASP.Net Web控件),展示了通過ASP.Net頁面顯示數(shù)據(jù)庫內(nèi)容是如何的簡單。在第二篇文章中我們研究了如何自定義DataGrid的顯示。正如在先前演示(Demo)中看到的,通過很少的程序代碼我們就能以印象深刻的格式顯示數(shù)據(jù)庫信息。

雖然顯示數(shù)據(jù)非常有效,但是真正有用的是能否將某種形式的動作與DataGrid聯(lián)系起來。例如,想象一下你正在為某個電子商務公司工作并被要求通過DataGrid顯示所有訂單信息。每一個訂單含有很多相關(guān)的數(shù)據(jù),包括訂購的商品、訂購時間、購買者的信息(姓名、地址等)、購買者選擇的運貨方式等。在一個DataGrid中(為每一個訂單)顯示所有這些信息將會導致過度的信息顯示。

正如在DataGrid Web控件深度歷險(2)中看到的,我們可以通過將AutoGenerateColumns屬性設(shè)為False,然后通過Columns屬性指定需要顯示的列。雖然這種做法使得數(shù)據(jù)易于理解,但是如果用戶同時希望能夠查看到任意一個訂單的復雜細節(jié),那又該怎么做呢?理想地我們希望在DataGrid的每一行上有一個標記為Detail的按鈕,當點擊這個按鈕后將顯示訂單的全部信息。

本文的示例將引領(lǐng)讀者創(chuàng)建一個非常類似的應用。在前面的演示中我們顯示了ASPFAQs.com最受歡迎的10個常見問題。本文將對該演示進行擴充以顯示10個常見問題的最關(guān)鍵信息,同時每一行包含一個Detail按鈕。

構(gòu)建基礎(chǔ)

我們在第二篇文章中提到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>
示例運行結(jié)果如下:

包含按鈕的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”>)。這是因為為了跟蹤被點擊的按鈕和應該發(fā)生的關(guān)聯(lián)動作,ASP.Net頁面應能夠重新創(chuàng)建頁面和DataGrid中的一系列按鈕。為了做到這一點需要使用頁面的狀態(tài)信息(ViewState)。對狀態(tài)信息的討論超出了本文的范圍;為了獲取更多信息請閱讀: Form Viewstate。

注意在示例中創(chuàng)建的按鈕是一個文本鏈接按鈕。這是ButtonColumn類生成的缺省外觀。如果想顯示一個標準的按鈕,可在ButtonColumn標記中指定ButtonType=”PushButton”。ButtonColumn類包含一些重要的屬性。在上面的代碼中使用了兩個格式方面的屬性。HeaderText屬性指定DataGrid中按鈕所在列的頁眉中的文字。Text屬性指定了每個按鈕的文本顯示。與BoundColumn標記類似,ButtonColumn標記可將每個按鈕的文本設(shè)為DataGrid的DataSource屬性中某一列的值-在ButtonColumn類中省略掉Text屬性并將DataTextField屬性設(shè)為數(shù)據(jù)庫中某個列的名稱,該列的值將作為按鈕的文本。