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

comm.Parameters["EmployeeID"].Value = employeeId;

// Enclose database code in Try-Catch-Finally

try

{

// Open the connection

conn.Open();

// Execute the command

reader = comm.ExecuteReader();

// Fill the grid with data

employeeDetails.DataSource = reader;

employeeDetails.DataKeyNames = new string[] {"EmployeeID"};

employeeDetails.DataBind();

// Close the reader

reader.Close();

}

finally

{

// Close the connection

conn.Close();

}

}

Now, if you execute the project and select one of the employees, you should see

a page like the one shown in Figure 11.10.

Styling the DetailsView

Displaying the data in the DetailsView control is easy enough, but you’ll probably

want to make it look a bit prettier. We’ll start by changing the row headings in

the left-hand column. Open AddressBook.aspx and modify the DetailsView

control like this:

File: AddressBook.aspx (excerpt)

<asp:DetailsView id="employeeDetails" runat="server"

AutoGenerateRows="False">

<Fields>

<asp:BoundField DataField="Address" HeaderText="Address" />

<asp:BoundField DataField="City" HeaderText="City" />

<asp:BoundField DataField="State" HeaderText="State" />

<asp:BoundField DataField="Zip" HeaderText="Zip" />

<asp:BoundField DataField="HomePhone"

HeaderText="Home Phone" />

<asp:BoundField DataField="Extension"

HeaderText="Extension" />

</Fields>

450

Chapter 11: Managing Content Using Grid View and Details View

Figure 11.11. Viewing employee details

<HeaderTemplate>

<%#Eval("Name")%>

</HeaderTemplate>

</asp:DetailsView>

As you can see, we customize the DetailsView control in a similar way to the

GridView, except that this time we’re dealing with fields instead of rows. We set

the AutoGenerateRows property to False; then, we define the fields we want to

show, and create a HeaderTemplate which displays the name of the employee in

the header—we’ll see what this looks like in a minute.

To further improve the appearance of the DetailsView, add this skin to Skin-

File.skin:

451

Styling the DetailsView