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

來源:互聯網
上載者:User
datagrid|web|控制項 這篇文章是一系列關於使用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屬性設為資料庫中某個列的名稱,該列的值將作為按鈕的文本。



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。