An Extensive Examination of the DataGrid Web Control: Part 1By 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.
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:
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:
Here the label Web control
lblMessage is placed in the HTML using HTML-like tags with
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
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!).
To place a DataGrid on an ASP.NET Web page you simply need to add the following code:
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
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
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.
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
property to the resulting DataReader, and finally call the DataGrid's
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! :-)
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.