Chapter 11: Managing Content Using Grid View and Details View

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

Styling the DetailsView

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 SkinFile.skin:

451