Build Your Own ASP.NET 3.5 Website Using C# & VB (78 page)

using a specific element:

Licensed to [email protected]

Managing Content Using Grid View and Details View

447

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

Visual Basic

myGridView.DataSource = myDataReader

myGridView.DataBind()

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 and 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

snippet:

Dorknozzle\VB\01_AddressBook.aspx
(excerpt)

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

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

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

Runat="Server">

ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

Address Book

Switch to Design view to see how your grid is represented in the designer. It should

look something like Figure 11.1.

Licensed to [email protected]

448

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

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

Dorknozzle\VB\02_AddressBook.aspx.vb
(excerpt)

Imports System.Data.SqlClient

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

Licensed to [email protected]

Managing Content Using Grid View and Details View

449

End Sub

Private Sub BindGrid()

Dim conn As SqlConnection

Dim comm As SqlCommand

Dim reader As SqlDataReader

Dim connectionString As String = _

ConfigurationManager.ConnectionStrings( _

"Dorknozzle").ConnectionString

conn = New SqlConnection(connectionString)

comm = New SqlCommand( _

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

"FROM Employees", conn)

Try

conn.Open()

reader = comm.ExecuteReader()

grid.DataSource = reader

grid.DataBind()

reader.Close()

Finally

conn.Close()

End Try

End Sub

End Class

C#

Dorknozzle\CS\02_AddressBook.aspx.cs
(excerpt)

using System;

⋮

using System.Data.SqlClient;

public partial class AddressBook : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindGrid();

}

}

private void BindGrid()

{

SqlConnection conn;

SqlCommand comm;

Licensed to [email protected]

450

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

SqlDataReader reader;

string connectionString =

ConfigurationManager.ConnectionStrings[

"Dorknozzle"].ConnectionString;

conn = new SqlConnection(connectionString);

comm = new SqlCommand(

"SELECT EmployeeID, Name, City, State, MobilePhone " +

"FROM Employees", conn);

try

{

conn.Open();

reader = comm.ExecuteReader();

grid.DataSource = reader;

grid.DataBind();

reader.Close();

}

finally

{

conn.Close();

}

}

}

What’s going on here? If you disregard the fact that you’re binding the SqlDataReader

to a GridView instead of a Repeater or DataList, the code is almost identical to

that which we saw in the previous chapter.

Now save your work and open the page in the browser
. Figure 11.2 shows how the

GridView presents all of the data within the Employees table in a cleanly formatted

structure.

Licensed to [email protected]

Managing Content Using Grid View and Details View

451

Figure 11.2. Displaying the address book in GridView

Okay, perhaps it doesn’t look all that clean right now! However, the display will

change as we get some practice using the GridView’s powerful and intuitive

formatting capabilities. You’ll notice that the GridView closely resembles the

structure of the query’s result as you might see it in SQL Server Management Studio.

All the names of the columns in the database table show as headers within the table,

and all the rows from the database table are repeated down the page.

If you look at the generated page source (right-click the page in browser and choose

View Source
or similar), you’ll see that the GridView indeed generated a table for

you:

id="ctl00_ContentPlaceHolder1_grid"

style="border-collapse:collapse;">

Licensed to [email protected]

452

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

⋮

Formatted for Readability

The HTML generated by ASP.NET won’t look exactly as it does above. You’ll find

that ASP.NET will output long, convoluted lines of td elements, each of which

appears directly after the previous one. We’ve simply made the code a little easier

to read; the two HTML tables are otherwise identical.

There’s no doubt that the GridView’s automatic presentation features are useful.

The GridView automatically displays all columns retrieved from the database in

the order in which they’re sent from the database. While this is very useful, in some

cases you’ll want your grid to display only a subset of the information retrieved

from the database, and in many cases you’ll also want to change the order in which

the columns of data are displayed.

Let’s learn how to customize the GridView by selecting the columns we want to

show in a given order. In this case, one of the columns that we want to retrieve from

the database, but hide from users, is the EmployeeID column. We need to retrieve

the table’s primary key because it’s required for any database operations that involve

the unique identification of a record (including tasks such as editing or deleting an

employee from the list). The user doesn’t need to be overwhelmed with this information, though—after all, humans don’t use numeric IDs to identify people in a list. Licensed to [email protected]