Showing One Record at a Time with the DetailsView

The GridView control shows all of the records from its data source control at once. Sometimes, however, we may want to show just one record at a time. The DetailsView control provides this functionality. Like the GridView control, the DetailsView control is bound to a data source control in the same manner. Drag the DetailsView onto a page with a data source control and then, from the smart tag, associate the DetailsView with the data source control. After you assign the data source control, the DetailsView presents a vertical list of the columns in the data source control.

To familiarize ourselves with the DetailsView control, let's create a new ASP.NET page called DetailsView.aspx. As in the preceding hour, add a SqlDataSource control to the page, configuring it to select all records and columns from the Books table. Next, add a DetailsView to the page and associate it with the SqlDataSource control. After you have completed these steps, your screen should look similar to Figure 15.10.

Figure 15.10. A DetailsView control has been added to the page and assigned a data source control.

Take a moment to view the DetailsView in a web browser by going to the Debug menu and choosing Start Without Debugging. Figure 15.11 shows Internet Explorer when viewing DetailsView.aspx. Note that the first record returned by the SqlDataSource control is displayed.

Figure 15.11. A single record from the data source control is displayed.

You may have noticed that the DetailsView, by default, doesn't provide any mechanism by which to view the next record in the data source. That is, with the DetailsView we see one record at a time, but there's no way to move to the next record. To provide a means to step through the records, check the Enable Paging check box in the DetailsView's smart tag. This will add a pager row to the bottom of the DetailsView. The pager row contains the user interface for stepping through the records of the corresponding data source control. By default, the paging interface uses page numbers to allow the user to jump to a particular record.

After checking the Enable Paging check box, take a moment to view the ASP.NET page in a browser. Note that now there are five links at the bottom of the DetailsView, allowing you to navigate to any of the five records in the Books table by clicking on the appropriately numbered link.

By the Way

The GridView control makes it easy to allow the user to page through and sort the displayed data. We'll look at how to implement paging and sorting with the GridView later in this hour, in the "Paging and Sorting with the GridView" section.

Customizing the Paging Interface

The DetailsView control's pager row can be customized through the Properties window. First, click on the DetailsView in the Design view to load the properties. Next, scroll down to the Paging section of the Properties window. There, you'll see two properties:

• AllowPaging This property indicates whether paging is supported (it defaults to False). When you checked the Enable Paging check box in the smart tag, this property was set to true.

• PagerSettings This property contains a number of subproperties that customize the appearance of the pager row. For example, instead of having page number links, you can use Next/Previous links.

Let's change the PagerSettings property so that instead of the page number links, we use next, previous, first, and last links. Expand the PagerSettings property and go to the Mode subproperty. Here, you'll find a drop-down list with the various choices. By default, the Numeric option is selected; change this to the NextPreviousFirstLast option. Note how the DetailsView changes in the Design view in Visual Web Developer to include the next, previous, first, and last links. Figure 15.12 shows this pageable DetailsView when viewed through a browser.

Figure 15.12. The DetailsView now supports paging and is showing information for the book The Number.

Did you Know?

By default, the next, previous, first, and last links are displayed as >, <, <<, and >>, respectively. You can change these, if you like, via the PagerStyle's NextPageText, PreviousPageText, FirstPageText, and LastPageText properties. One important noteif you want to display a < or >, you need to use the escaped HTML equivalent: &lt; or &gt;.

By the Way

The GridView also supports pagination. With the GridView, however, you typically page through 10 or 20 records at a time, as opposed to one record at a time. In the next hour we'll examine how to implement and customize the paging features of the GridView control.

Customizing the Appearance of the DetailsView

The DetailsView's appearance can be customized just like the GridView's. There are DetailsView-level, row-level, and field-level formatting properties. The DetailsView-level and row-level properties can be configured through the Properties window in the Appearance and Styles sections, and the field-level properties are accessible through the smart tag's Edit Fields link, which displays theyou guessed itFields dialog box. The DetailsView also has an Auto Format option in its smart tag, just like the GridView.

While the process of customizing the formatting of the GridView and DetailsView is identical, there are some differences between the two controls' formatting properties. For example, the DetailsView does not have the notion of a "selected" row, so there's no SelectedRowStyle. As we'll see in the next hour, the DetailsView can be used to insert data into a database, and therefore it has an InsertRowStyle property.

For practice, take a moment to customize the appearance of the DetailsView. Go ahead and customize its fields like we did with the GridView. Add some color and font settings to liven up the web page. Figure 15.13 shows the DetailsView in a browser after gussying up the appearance. Note that I applied the same field-level customizations that we did with the GridView (renaming the header rows, moving the Price field to come after the Authors field, formatting the Price as a currency, and so on).

Figure 15.13. With some formatting, the DetailsView is much easier on the eyes.

Watch Out!

When setting the DataFormatString for the Price and LastReadOn fields, don't forget that you also need to set the HtmlEncode property to False. If you forget to do this, the formatting won't be applied to the field.

A Look at the DetailsView's Markup

When examining the GridView earlier in this hour, we took time to examine both the GridView's declarative markup in the Source view through Visual Web Developer and the rendered HTML that is sent to the web browser. Whenever you are working with a new Web control, I encourage you to explore both the control's declarative and HTML markup because doing so helps foster a better understanding as to how these controls are represented in the ASP.NET page and in the browser.

We're not going to spend the time to explore the DetailsView's markup in earnest here; that is a task that you can handle on your own. However, I do want to point out that the DetailsView is rendered as an HTML <table>. Instead of having a table row for each record in the associated data source control and a table cell for each column of each row, the DetailsView has a table row for each column of the data source control with two table cells per table row: one for the data source control's column's name and one for its value. The result is a two-columned HTML <table> that has one row for each database table column returned by the data source control.

Listing 15.3 shows the HTML emitted by the DetailsView shown in Figure 15.11.

Listing 15.3. The DetailsView Control Is Rendered as an HTML <table>

[View full width]

 1: <table cellspacing="0" rules="all" border="1"  style="height :50px;width:125px;border-collapse:collapse;">  2:     <tr>  3:         <td>BookID</td><td>1</td>  4:     </tr><tr>  5:         <td>Title</td><td>Visual Studio Hacks</td>  6:     </tr><tr>  7:         <td>Author</td><td>James Avery</td>  8:     </tr><tr>  9:         <td>YearPublished</td><td>2005</td> 10:     </tr><tr> 11:         <td>Price</td><td>24.9500</td> 12:     </tr><tr> 13:         <td>LastReadOn</td><td>&nbsp;</td> 14:     </tr><tr> 15:         <td>PageCount</td><td>478</td> 16:     </tr> 17: </table>