Using the DetailsView Control

// Read the name from the grid

GridViewRow row = grid.Rows[selectedRowIndex]; string name = row.Cells[0].Text;

// Update the details label

detailsLabel.Text = "You selected " + name + ".";

}

Execute the project, and select one of the records. You should see a display like the one in Figure 11.9.

Figure 11.9. Displaying details about the selected row

It was easy to add this new feature, wasn’t it?

Using the DetailsView Control

ASP.NET 2.0 introduced the DetailsView control, which can come in very handy when you want to display more details about one record in a grid. You’ll find this control very useful when you need to display details about a record that

445

Chapter 11: Managing Content Using Grid View and Details View

contains many fields—so many, in fact, that the main grid can’t display all of them.

A common use of the DetailsView control is to create a page that shows a list of items, and allows you to drill down to view the details of each item. For instance, an ecommerce site might initially present users with only a little information about all available products, to reduce download time and make the information more readable. Users could then select a product to see a more detailed view of that product.

Let’s see how this works by using a GridView and a DetailsView in our Address Book web form.

Replace detailsLabel with a DetailsView control, as shown in the following code snippet:

File: AddressBook.aspx (excerpt)

</asp:GridView> <br />

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

</asp:Content>

Next, we’ll modify the BindGrid method to specify the grid’s data key. The data key feature of the GridView control basically allows us to store a piece of data about each row without actually displaying that data. We’ll use it to store the EmployeeID of each record. Later, when we need to retrieve additional data about the selected employee, we’ll be able to read the employee’s ID from the data key, and use it in our SELECT query.

Add this row to your code-behind file:

Visual Basic

File: AddressBook.aspx.vb (excerpt)

'Open the connection conn.Open()

'Execute the command

reader = comm.ExecuteReader()

'Fill the grid with data grid.DataSource = reader

grid.DataKeyNames = New String() {"EmployeeID"} grid.DataBind()

'Close the reader

reader.Close()

446

Using the DetailsView Control

Figure 11.10. The DetailsView control in action

C#	File: AddressBook.aspx.cs (excerpt)

//Open the connection conn.Open();

//Execute the command

reader = comm.ExecuteReader();

//Fill the grid with data grid.DataSource = reader;

grid.DataKeyNames = new string[] { "EmployeeID" }; grid.DataBind();

//Close the reader

reader.Close();

As you can see, we tell the GridView which keys to store by setting the DataKeyNames property. This property needs to be populated with an array of

447

Chapter 11: Managing Content Using Grid View and Details View

keys, because the GridView supports storing zero, one, or many keys for each row it displays. In this case, we create an array that contains just one value: EmployeeID. In the code you’ve just written, you can see the syntax that creates such an array on the fly, without declaring an array first.

After you make this change, you’ll be able to access the EmployeeID value for any given row through the GridView’s DataKeys property.

With this new data at hand, loading the details of the selected employee into the

DetailsView is a straightforward process. In the GridView’s SelectedIndexChanged event handler, we just need to make another database query to read the details we want to display for the selected employee, then simply feed the results to the DetailsView object, like this:

Visual Basic

File: AddressBook.aspx.vb (excerpt)

Protected Sub grid_SelectedIndexChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles grid.SelectedIndexChanged

BindDetails()

End Sub

Private Sub BindDetails()

' Obtain the index of the selected row

Dim selectedRowIndex As Integer = grid.SelectedIndex ' Read the employee ID

Dim employeeId As Integer = _ grid.DataKeys(selectedRowIndex).Value

' 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, Address, City, State, Zip, " & _ "HomePhone, Extension FROM Employees " & _

"WHERE EmployeeID=@EmployeeID", conn)

'Add the EmployeeID parameter comm.Parameters.Add("EmployeeID", Data.SqlDbType.Int) comm.Parameters("EmployeeID").Value = employeeId

'Enclose database code in Try-Catch-Finally

448

Using the DetailsView Control

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()

End Try End Sub

C#	File: AddressBook.aspx.cs (excerpt)

protected void grid_SelectedIndexChanged(object sender, EventArgs e)

{

BindDetails();

}

private void BindDetails()

{

//Obtain the index of the selected row int selectedRowIndex = grid.SelectedIndex;

//Read the employee ID

int employeeId = (int) grid.DataKeys[selectedRowIndex].Value;

//Define data objects SqlConnection conn; SqlCommand comm; SqlDataReader reader;

//Read the connection string from Web.config string connectionString =

ConfigurationManager.ConnectionStrings[

"Dorknozzle"].ConnectionString;

//Initialize connection

conn = new SqlConnection(connectionString); // Create command

comm = new SqlCommand(

"SELECT EmployeeID, Name, Address, City, State, Zip, " + "HomePhone, Extension FROM Employees " +

"WHERE EmployeeID=@EmployeeID", conn); // Add the EmployeeID parameter

comm.Parameters.Add("EmployeeID", SqlDbType.Int);

449