Introduction

I’ve been working on the Auburn InterConnect project recently. This is the first post about this project so I put a tad bit introduction about the project. Auburn InterConnect is an event management website designed for Auburn University Graduate School, mostly for international students. The goal is to make connection between local and international students by creating and organizing events to help students with culture here in Auburn.

As of now, the website is written in ASP.NET with C# and .NET Framework. The website is built using .NET Framework 4, but does not utilizes any feature of C# pass 2.0. The data store is SQLServer 2008 R2.

Old Way of Doing Things

Now the technical part. As with any data-driven website, Auburn InterConnect stores and populates the website with events stored in the database. At the beginning of the project, I did not know about ASP.NET data-bound controls. I had to write SQL statement and perform queries manually using  SQLConnection and SQLCommand objects to retrieve records into some kind of iterator, such as SqlDataReader, and write custom presentation code (HTML) to display individually.  While this give you total control, it is very time consuming to get all parts (especially the presentation layer) just right. The following is a gist of what I have to do.

//Write SQL statement
string queryStr = "SELECT eventId, eventName, startTime FROM [Events] " +
    "WHERE creatorId=@cid AND approved=1 AND endTime>@now " +
    "ORDER BY [Events].startTime";

//Create connection and query parameters
SqlConnection con = new SqlConnection(Config.SqlConStr);
SqlCommand command = new SqlCommand(queryStr, con);
command.Parameters.Add(new SqlParameter("cid", userId));
command.Parameters.Add(new SqlParameter("now", DateTime.Now));
con.Open();

//Execute query
SqlDataReader reader = command.ExecuteReader();

//Create HTML table and for each record, create table row, etc..

Using Data-Bound Controls

I had always known about the GridView server control in ASP.NET even when I was doing things manually (as above) but never took a good look at it. It turns out GridView is just one of many controls in ASP.NET called data-bound controls designed to make creating data-driven websites easier.

To use a data-bound control, just drag a control (e.g. GridView) onto the design canvas, and click on the smart tag of the control to connect the control to a data source as shown in figure below. In Choose Data Source, select New Data Source, and select your database connection. This will add a new DataSource object to your page.

GridView Smart Tag GridView Smart Tag

During the configuration of the data source, you can still manually write your SQL statements, but the tool also include a Query Builder, which can be used to visually build the query as shown below.

Visual Studio Query Builder

After finish configuration the data source, we have a grid with data from our database on the page.

One obvious benefits is that we do not need to manually create table and write HTML code to display our data. Another benefit is that we no longer have to manually execute the SQL commands in our code. The data-bound control will execute the queries when it binds and render the data.

We can click on the smart tag of the grid view again to configure and set the style of header and cells of each columns.

Templates

Another nice feature about data-bound controls is that you can customize how the data are displayed using templates. Using templates you can specify the presentation code (HTML) to which the data is bound. For example, for a data field, you might want to display the value in a hyperlink. You can insert a HyperLink control to replace the plain-text Label control.