Build Your Own ASP.NET 2.0 Web Site Using C# & VB, Second Edition

the table data cells. The DataList makes things a bit easier by generating a single-

column table for us, but even so, the built-in functionality isn’t overwhelming.

Here, we’ll learn about two more controls that offer much more functionality

and make it very easy for you to create a table: GridView and DetailsView. These

controls, which form part of ASP.NET’s set of data controls, give developers

much more power and flexibility over presentation, as you’ll see in the next few

sections. The processes by which information within a table is presented,

formatted, and edited have been completely revamped with the GridView and

DetailsView controls.

GridView vs DataGrid

The GridView control supersedes the DataGrid control, which was the

star of all data-displaying controls in ASP.NET 1.0 and 1.1. The DataGrid

is still present in ASP.NET 2.0 for backwards-compatibility purposes, but

for any new development, the GridView is recommended. The DetailsView

control is new in ASP.NET 2.0 and doesn’t have a corresponding control in

earlier versions.

Using the GridView Control

The GridView control solves a problem that has plagued developers for years:

data presentation. The GridView control generates simple HTML tables, so in-

formation within a GridView is presented to the end user in a familiar, cleanly

formatted, tabular structure. Similar to the Repeater control, the GridView can

also automatically display all the content contained in an SqlDataReader on a

page, based on styles we set within its templates. However, unlike the Repeater

control, the GridView offers several more advanced features, such as sorting or

paging (i.e. splitting a large result set into pages), and makes it easy to modify

the data in the underlying data source.

To sum up, GridView controls provide the following functionality:

❑

database table-like presentation

❑

table headers and footers

❑

paging

❑

sorting

428

Chapter 11: Managing Content Using Grid View and Details View

❑

style modification through templates

❑

customizable columns for advanced editing

You’ll learn about some of these features in this chapter, though we’ll leave the

more advanced ones (sorting, paging, and editing) for the next chapter.

As with any other ASP.NET server control, GridView controls are added to the

page using a specific element:

<asp:GridView id="myGridView" runat="server" />

Once we add the GridView to the page, we can bind an SqlDataReader to it as

follows:

Visual Basic

myGridView.DataSource = myDataReader

myGridView.DataBind()

C#

myGridView.DataSource = myDataReader;

myGridView.DataBind();

So far, the GridView doesn’t seem to function very differently from the Repeater

control, right? Think again! The Repeater control didn’t work unless we specified

content within the required <ItemTemplate> and </ItemTemplate> tags. The

GridView takes the structure of the database table automatically, and presents

the data to the user in a cleanly formatted HTML table.

Let’s take a look at GridView in action as we develop the Dorknozzle intranet’s

address book page. Start by opening the Dorknozzle project, if it’s not already

open, and creating a new web form named AddressBook.aspx, based on the

Dorknozzle.master master page. Also, make sure the new web form uses a code-

behind file.

Now, open AddressBook.aspx, and complete its code as shown in the following

code snippet.

File: AddressBook.aspx (excerpt)

<%@ Page Language="VB" MasterPageFile="~/DorkNozzle.master"

AutoEventWireup="True" CodeFile="AddressBook.aspx.vb"

Inherits="AddressBook" title="Dorknozzle Address Book" %>

<asp:Content ID="Content1"

ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

429

Using the GridView Control

<h1>Address Book</h1>

<asp:GridView id="grid" runat="server" />

</asp:Content>

By switching to Design View you can see how your grid is represented in the

designer, as Figure 11.1 indicates.

Figure 11.1. Viewing AddressBook.aspx in Design View

Now, double-click on an empty portion of the page to have the form’s Page_Load

event handler generated for you in the code-behind file. In Page_Load, we’ll call

a method named BindGrid, which will, in turn, create a database connection and

a database command object, execute that command, and bind the resulting data

reader to the grid, as shown below:

Visual Basic File: AddressBook.aspx.vb (excerpt)

Imports System.Data.SqlClient

430

Chapter 11: Managing Content Using Grid View and Details View

Partial Class AddressBook

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles Me.Load

If Not IsPostBack Then

BindGrid()

End If

End Sub

Private Sub BindGrid()

' Define data objects

Dim conn As SqlConnection

Dim comm As SqlCommand

Dim reader As SqlDataReader

' Read the connection string from Web.config

Dim connectionString As String = _

ConfigurationManager.ConnectionStrings( _

"Dorknozzle").ConnectionString

' Initialize connection

conn = New SqlConnection(connectionString)

' Create command

comm = New SqlCommand( _

"SELECT EmployeeID, Name, City, State, MobilePhone " & _

"FROM Employees", conn)

' Enclose database code in Try-Catch-Finally

Try

' Open the connection

conn.Open()

' Execute the command

reader = comm.ExecuteReader()

' Fill the grid with data

grid.DataSource = reader

grid.DataBind()

' Close the reader

reader.Close()

Finally

' Close the connection

conn.Close()

End Try

End Sub

End Class

431

Using the GridView Control