Using the ListView and DataPager Controls

In this chapter, we examine the two new databound controls introduced with the .NET Framework 3.5: the ListView and the DataPager controls. The ListView control is an extremely flexible control. You can use it in many of the same situations in which you would have used the GridView, DataList, FormView, or Repeater control in the past. The DataPager control works with the ListView control. It enables you to add support for paging to a ListView control.

Using the ListView Control

You can think of the ListView control as a super-flexible GridView control. Like a GridView control, the ListView control can be used to display, edit, delete, select, page through, and sort database data. However, unlike the GridView, the ListView control is entirely template driven.

Furthermore, unlike the GridView control, you can use the ListView control to insert new data into a database. You also can think of the ListView control as a replacement for the DataList control. Like a DataList control, the ListView control can be used to display database records in multiple columns. For example, you can use the ListView control to render a photo gallery.

Finally, you can think of the ListView control as a superfancy Repeater control. Like a Repeater control, the ListView control is entirely template driven. However, unlike a Repeater control, the ListView control can be used to edit, page through, and sort database data.

The ListView control supports the following templates:

• LayoutTemplate—Used to specify the containing element for the contents of the ListView.
• ItemTemplate—Used to format each item rendered by the ListView.
• ItemSeparatorTemplate—Used to display content between each item rendered by the ListView.
• GroupTemplate—Used to specify the containing element for a group of items rendered by the ListView.
• GroupSeparatorTemplate—Used to display content between each group of items rendered by the ListView.
• EmptyItemTemplate—Used to render content for the remaining items in a GroupTemplate.
• EmptyDataTemplate—Used to specify content that is displayed when no items are returned from the ListView control’s data source.
• SelectedItemTemplate—Used to specify the content displayed for the selected item in the ListView.
• AlternatingItemTemplate—Used to render different content for alternating items in a ListView.
• EditItemTemplate—Used to render content for editing an item in a ListView.
• InsertItemTemplate—Used to render content for inserting a new item in a ListView.

Using the LayoutTemplate and ItemTemplate

Let’s start with a simple scenario in which you might want to use the ListView control. Suppose that you have a set of database records that you want to display in a set of HTML <div> tags. The page in Listing illustrates how you can use the LayoutTemplate and ItemTemplate templates to display the records from the Movie database table.

The ListView control in Listing contains five templates. First, the LayoutTemplate is used to create a single containing <div> tag for all the items rendered by the ListView. The content contained in the LayoutTemplate is rendered once and only once. In the page in Listing, the LayoutTemplate is used to display a <div> tag with a dashed border. The <div> tag contains a Placeholder control with an Id of itemPlaceholder. This control is never rendered to the browser. The Placeholder control gets replaced with the contents of the ItemTemplate.

Technically, you are not required to use a Placeholder control with a ListView control. Instead of using a ListView control, you can use any server-side control with an Id of itemPlaceholder. However, since the control gets replaced, it makes sense to stick with using the Placeholder control.

Using the GroupTemplate

You can use the ListView control’s GroupTemplate to group multiple items together. Grouping items is useful when you want to display items in multiple columns. For example, you might want to display a photo gallery in which three pictures are displayed per row. The page in Listing 14.3 displays a set of photographs within a series of HTML <div> tags. A maximum of three photographs are displayed in each <div> tag.

The ListView control also supports an EmptyItemTemplate that can be used to render content for the leftover items in a GroupTemplate. For example, if you set the GroupItemCount property to 3 and there are four items, then the contents of the EmptyItemTemplate are displayed for the final two items.

Selecting a Row

You can set up the ListView control so you can use it to select items. This is useful when you want to create a master/detail form. For example, the page in Listing contains two ListView controls. The first ListView works like a tab strip. It enables you to select a movie category. The second ListView displays a numbered list of matching movies.

Sorting Database Data

You can sort the items in a ListView control by adding one or more button controls to the ListView that have a CommandName property set to the value Sort and a CommandArgument property set to the name of a property to sort by. For example, the page in Listing contains a ListView that renders an HTML table. You can click the column headers to sort the table by a particular column

Editing Database Data

You can use the ListView control to update, delete, and insert items. The page in Listing illustrates how you can use the ListView to modify or delete the records in the Movie database.

Using the DataPager Control

The DataPager control displays a user interface for navigating through multiple pages of items. The DataPager control works with any control that supports the

Using the DataPager Control

IPageableItemContainer interface. Unfortunately, there is currently only a single control that supports this interface: the ListView control. So this means that you can only use the DataPager with the ListView control.

The DataPager control includes the following properties:

•  PageSize—Gets or sets the number of items to display at a time.
• PagedControlId—Gets or sets the control to page (the control must implement IPageableItemContainer).
• Fields—Gets the fields contained by the DataPager.
• StartRowIndex—Gets the index of the first item to show.
• MaximumRows—Gets the maximum number of rows to retrieve from the data source.
• TotalRowCount—Gets the total number of items available from the data source.

You set the PageSize to control the number of items to display per page. The PagerControlId property is optional. If you place the DataPager within the ListView control’s LayoutTemplate, you don’t need to set the PagerControlId property. If, on the other hand, you place the DataPager outside of the ListView control, you need to set the PagerControlId property to the ID of the ListView.

If you add a DataPager to a page and do nothing else, the DataPager won’t render anything. To display a user interface for the DataPager, you need to add one or more fields to the DataPager. The DataPager control supports the following fields:

• NextPreviousPagerField—Used to display Next, Previous, First, and Last links.
• NumericPagerField—Used to display Next, Previous, and page numbers links.
• TemplatePagerField—Used to create a custom user interface for paging.

Creating a Custom User Interface for Paging

If you need total and complete control over the paging user interface, you can use the TemplatePagerField to customize the appearance of the DataPager. The page in Listing illustrates how you can use the TemplatePagerField.

Data Source Paging with the DataPager Control

You can take advantage of the DataPager control when performing data source paging. The page in Listing contains a ListView control bound to a LinqDataSource control. Because, the LinqDataSource control has its AutoPage property set to the value true, it performs paging on the database server.

The LinqDataSource control and LINQ to SQL are discussed later Chapter. LINQ to SQL is the preferred method of data access in .NET Framework 3.5.