datagrid|web| Control DataGrid Web Control Depth Adventure (1)
This article is the first part of a series on using the DataGrid Web Control article. The ASP.net DataGrid Web control displays database information in an HTML table and is powerful. In the simplest case, the DataGrid displays the HTML table frame, but it can be enhanced to display a rich user interface, sorted by database columns, and even allows pagination of database results! All of these interesting topics will be covered in a series of articles in the future.
Getting tabular information from a database and displaying it in an HTML table is one of the most common tasks in traditional ASP programming. In traditional ASP programming, it is necessary to implement the above functions through multiple lines of interleaved HTML and code. The following prototype code shows the usual form of the code.
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>)
If you are an ASP developer, you may have written the above code several times. Asp. One of the advantages of net is that it contains many Web controls. These HTML-producing Web controls provide a programmable interface that allows developers to detach code from content and use the HTML-producing entity as an object in code. In other words, if we need to display some HTML content through ASP.net, we will write the following code:
<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"/>
A lblmessage Web control with runat= "server" attributes (similar to HTML tags) is placed in HTML. The Text property of Lblmessage is then set to "Hello World" in the Page_Load event handler, which is invoked on each page mount. The use of Web controls here enables separation of code and content. In the traditional ASP, the need to <%= "Hello, world!" %> placed in the appropriate position in HTML to achieve the same effect.
DataGrid Basics
To add a DataGrid to the ASP.net Web page, simply execute the following code:
<asp:datagrid runat= "Server" id= "Id_of_datagrid"/>
The ID value here will be used as the name of the DataGrid in the server-side code, and we use the DataGrid by placing the above syntax in HTML. But in order for the DataGrid to display any useful information, we need to bind the DataGrid to a collection of information. The collection of this information can be any object that supports the IEnumerable interface. It includes arrays, collection classes (ArrayList, Hashtable, etc.), datasets and many other objects. Because you want to focus on displaying database information, in this article we focus only on binding the DataGrid to DataReader. DataReader is similar to the ado/asp (forward-only) recordset in traditional order. (For information on reading database results in ado.net to datareaders, read efficiently iterating through Results from a Database Query using ado.net)
So how do you bind data to a DataGrid? It's surprisingly simple. The first thing is to extract database data to DataReader. For this example, I use the aspfaqs.com database and extract the 10 most popular questions. Once you extract the data to DataReader, it takes only two lines of code to bind DataReader to the DataGrid. The first row of the DataGrid's DataSource property is set to DataReader; the second line calls the DataGrid's DataBind method, as shown in the following code:
<% @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"/>
The results of the operation are as follows:
Simple DataGrid Demo
This demo shows you to bind the results a 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
...
First, note that the code used to write data binding is not large. We create a connection, specify an SQL command (here using a stored procedure, sp_popularity), open the database connection, and set the DataGrid's DataSource property to DataReader, The last call to the DataBind method of the DataGrid. This approach completely separates code from content, without the syntax of mixing HTML tables and DataReader output in traditional ASP.
Take some time to look at the results of the operation. You will find that the DataGrid uses HTML tables to display the contents of the database, albeit not beautifully. Although we have completed the main task of displaying data, there is still a lot of work to do with the user interface. Luckily, the results of the DataGrid are surprisingly simple. Unfortunately, it is necessary to wait for the next article to be introduced.
Summarize
This is part of a series of articles about DataGrid usage, and we studied the most basic features of the DataGrid: Familiarity with ASP.net web pages and displaying bound database results. Unfortunately, the output of the DataGrid is not beautiful. But we will soon see that the results of the beautification of the DataGrid are simple. In addition, we will see more advanced options for the user interface in the following articles, such as pagination of database results, sorting of DataGrid results, and other features.
