DataGrid Web控制項深度曆險(1)

來源:互聯網
上載者:User
datagrid|web|控制項 DataGrid Web控制項深度曆險(1)



這篇文章是一系列關於使用DataGrid Web控制項文章的第一部分。ASP.Net DataGrid Web控制項可將資料庫資訊顯示在HTML表格中,並且功能強大。在最簡單的情形下DataGrid顯示HTML表格架構,但是它可被增強以顯示豐富的使用者介面,可根據資料庫的列進行排序,甚至允許對資料庫結果進行分頁!所有這些有趣的主題將在今後一系列文章中涉及。

從資料庫中擷取表格資訊並將其顯示在一個HTML表格中是傳統ASP編程中最普通的任務之一。在傳統ASP編程中需要通過多行交織的HTML和代碼實現上述功能。下面的原形代碼顯示了這些代碼通常的形式。

Create Database Connection
Populate a recordset based on some SQL query
Output the HTML table header (<table ...>)
Loop through the recordset
Emit the HTML for a table row
...
Emit the HTML table footer (</table>)


如果你是一個ASP開發人員,你也許多次編寫了上述代碼。ASP.Net的優點之一就是它包含很多Web控制項。這些產生HTML的Web控制項提供了一個可程式化的介面,它允許開發人員將代碼和內容分離,並在代碼中將產生HTML的實體作為對象使用。也就是說,如果我們需要通過ASP.Net顯示一些HTML內容,將編寫如下的代碼:

<script language="vb" runat="server">
sub Page_Load(sender as Object, e as EventArgs)
lblMessage.Text = "Hello, World!"
end sub
</script>

<asp:label runat="server" id="lblMessage" />

這裡帶有runat=”server”屬性(類似於HTML標記)的lblMessage Web控制項被放置在HTML中。然後,在Page_Load事件處理常式中(該事件處理常式在每次頁面裝載時被調用)lblMessage的Text屬性被設定為”Hello World”。此處對於Web控制項的使用,實現了代碼和內容的分離。在傳統的ASP中,需要將<%="Hello, World!"%>放置在HTML中合適的位置才能達到同樣的效果。



DataGrid基礎

要在ASP.Net Web頁面中加入DataGrid,只需執行如下代碼:

<asp:datagrid runat="server" id="ID_of_DataGrid" />
這裡的id值將作為在伺服器端代碼中使用DataGrid的名稱,我們通過將上述文法放置在HTML中來使用DataGrid。但是為了讓DataGrid顯示任何有用的資訊,我們需要將DataGrid綁定到一些資訊的集合。這些資訊的集合可以是任何支援IEnumerable介面的對象。它包括Arrays,集合類(ArrayList ,Hashtable等),Datasets和其它很多個物件。由於希望集中精力顯示資料庫資訊,因此在本文中我們僅關注將DataGrid綁定至Datareader。Datareader類似於傳統ADO/ASP中順序的(forward-only)記錄集。(如需瞭解在ADO.Net中讀取資料庫結果至Datareaders中,請閱讀Efficiently Iterating Through Results from a Database Query using ADO.NET )

那麼如何將資料繫結至DataGrid?其實出奇的簡單。第一件事是提取資料庫資料至datareader.對於本例,我使用ASPFAQs.com資料庫,並且提取最受歡迎的10個問題。一旦將資料提取至datareader,將datareader綁定至DataGrid只需兩行代碼。第一行將DataGrid的Datasource屬性設定為Datareader;第二行調用DataGrid的DataBind方法,代碼如下所示:



<% @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>

<asp:datagrid id="dgPopularFAQs" runat="server" />

運行結果如下:

Simple DataGrid Demo
This demo shows how to bind the results of a query to an unformatted DataGrid.


FAQID
Description
ViewCount
SubmittedByName
Submitted

ByEmail
Date

Entered
CatName

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)?
161056
Scott Mitchell
mitchell@4guysfromrolla.com
3/20/2001 2:53:45 AM
Getting Started

181
How can I format numbers and date/times using ASP.NET? For example, I want to format a number as a currency.
123888
Scott Mitchell
mitchell@4guysfromrolla.com
1/19/2002 3:12:07 PM
ASP.NET













首先注意用於編寫資料繫結的代碼數量不多。我們建立一個串連,指定一個SQL命令(這裡使用一個預存程序,sp_Popularity),開啟資料庫連接,設定DataGrid的DataSource屬性為Datareader,最後調用DataGrid的DataBind方法。這種做法完全將代碼從內容分離,沒有像在傳統ASP中混合HTML表格和DataReader輸出的文法。

花些時間看一下運行結果。你會發現DataGrid使用HTML表格顯示資料庫內容,儘管並不美觀。雖然我們完成了顯示資料這一主要工作,但使用者介面方面還有很多工作。幸運的是美化DataGrid的結果出奇的簡單。遺憾的是需要等到下一篇文章中作介紹。



總結

這是一系列關於DataGrid使用文章的一部分,我們研究了DataGrid最基本的功能:熟悉ASP.Net Web頁面和顯示綁定資料庫結果。遺憾的是DataGrid的輸出並不美觀。但是我們不久會看到美化DataGrid的結果很簡單。另外我們還將會在接下來的文章中看到更多使用者介面的進階選項,如資料庫結果的分頁顯示,DataGrid結果的排序和其它功能。



相關文章

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