An Extensive Examination of the DataGrid Web Control: Part 1
By Scott Mitchell
The First in a Multi-Part Series
This article is the first in a multi-part series on using the DataGrid Web control that will span several
weeks. The ASP.NET DataGrid Web control, which displays database information in an HTML table, is
highly versitile. In its simplest form (examined in this article) the DataGrid displays a bare-bones
HTML table, but it can be enhanced to output a richer UI, to allow for sorting based on the database
columns, and to even allow paging of the database results! All of these interesting topics will be
covered in future parts of this article series.
ASP.NET Data Web Controls Kick Start is author Scott
Mitchell's most recent book, which thoroughly examines three of the most commonly
used ASP.NET Web controls: the DataGrid, DataList, and Repeater. These three Web controls
can be difficult to master due to their numerous features and capabilities. With this book, you'll
quickly become an expert, learning the gritty details and true capabilities of each.
This 400+ page book explores the topics in this article series in much greater depth, along with
examining various topics and techniques not covered here.
Scott Mitchell is the editor and founder of 4GuysFromRolla.com, author of the An Extensive Examination
of the DataGrid Web Control article series, and author of numerous other ASP and ASP.NET
books.
Introduction
One of the most common tasks in classic ASP was retrieving tabular information from a database and
displaying it in an HTML table. With classic ASP this would require many lines of intermixed HTML and
code; the following pseudocode shows what the code would commonly look like:
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're an ASP developer chances are you've written code like above more times than you'd care to
admit! One of the advantages of ASP.NET is that it contains a number of Web controls. These Web controls,
which emit HTML, provide a programmatic interface, allowing developers to separate code and content
and treat these HTML emitting entities as objects in their code. That is, if we wanted to display
some HTML content using ASP.NET we'd do the following:
<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" />
Here the label Web control lblMessage is placed in the HTML using HTML-like tags with
the runat="server" attribute specified. Then, in the Page_Load event handler
(which is run every time the page is loaded) the Text property of the lblMessage
Web control is set to "Hello, World!" The use of Web controls here separates the code from the content;
in classic ASP one would need to place a <%="Hello, World!"%> in the proper place within
the HTML content to achieve the same effect.
There are ASP.NET Web controls that are much more useful and powerful than the simple label control.
The DataGrid Web control, which we'll be dissecting in this article, is one such powerful control.
The DataGrid emits the needed HTML for data-bound HTML tables. As we'll soon see, binding data to
a DataGrid is very easy; furthermore, with only a few slight property changes you can customize the look
and feel the DataGrid's output, rendering very professional looking HTML tables (a feat when one considers
my utter lack of artistic skill!).
DataGrid Basics
To place a DataGrid on an ASP.NET Web page you simply need to add the following code:
Here the id you choose will be the name of the DataGrid you'll use when referring to it
in your server-side code. The syntax above gets us started using a DataGrid by placing it in the
HTML content, but in order to have the DataGrid display anything useful we need to bind the DataGrid
to some collection of information. This collection of information can be any object that supports
the IEnumerable interface. This includes things like Arrays, collection classes (ArrayList,
Hashtable, etc.), DataSets, DataReaders, and a number of other objects. Since we'd like to focus on
displaying database information, for this article we'll focus on binding DataGrids to DataReaders, which
are synonymous to forward-only, firehose cursors Recordsets in classic ADO/ASP. (For more information
on reading database results into DataReaders using ADO.NET be sure to read:
Efficiently Iterating Through Results from a Database Query using
ADO.NET.)
So, how do we go about binding data to the DataGrid? It's amazingly simple. The first thing we need to
do is to grab a DataReader containing some database data. For this example I am hitting the
ASPFAQs.com database and bringing back the ten most popular
FAQs. Once I have this data in a DataReader, to bind it to my DataGrid I just need to write two lines
of code. The first line sets the DataGrid's DataSource property to the DataReader; the
second line calls the DataGrid's DataBind method. That's all there is to it, as the following
code snippet shows.
<% @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" />
First off note that the amount of code we have to write to utilize databinding is not much at all.
We essentially create a connection, specify a SQL command (in this case a stored procedure,
sp_Popularity), open the database connection, set the DataGrid's DataSource
property to the resulting DataReader, and finally call the DataGrid's DataBind method.
This approach completely isolates the code from the content; there's no mixing of HTML table and DataReader
output syntax, as we would have had with classic ASP.
Take a moment to view the live demo. You'll notice that the
DataGrid displays the database contents in a plane-Jane HTML table - it's pretty ugly. While the
main "work" has been done for us (displaying the data), there's a lot to be desired on the user-interface
front. Fortunately, prettying up the DataGrid results is amazingly easy. Unfortunately, this will
have to wait for the next part of this article series! Stay tuned! :-)
Summary
In this part of the series on DataGrid usage, we examined the very basics of DataGrids - how to plop
one down on an ASP.NET Web page and display bound database results. Unfortunately the DataGrid's
output is not pretty. However, as we'll soon see, prettying up
the display of the DataGrid is a breeze. Additionally, we'll look at more advanced UI options (such
as paging database results, sorting the DataGrid's results on the fly, and other cool stuff) in upcoming
portions of this article.
