RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Using the New ListView Control in ASP.NET 3.5

ASP.NET's new ListView control provides template-based layout for both display and CRUD database operations, making it an extremely way to build data-centric Web applications.

ny user-focused application that you write requires some sort of data integration. At minimum, you will need to retrieve some data from a data source such as a relational database or an XML file, and format it before displaying it in the user interface. Although previous versions of ASP.NET provided data-centric display controls such as GridView, these controls lacked the customization and extensibility features required by a professional web developer. To address this shortcoming, the ASP.NET 3.5 provides a new control named ListView that provides excellent customization and extensibility features. Using these features, you can display data in any format, using templates and styles, and also perform CRUD (Create, Read, Update, and Delete) activities with minimal code.

This article focuses on the data access steps involved in using the new ListView control, and includes advanced features such as editing data and handling events.

A Primer on the ListView Control
Most data-bound controls supplied with ASP.NET automatically enclose the displayed data with additional markup. As an example, the GridView control displays its data rendered inside of an HTML table (<table>), displaying each record of data bound to it as a table row (<tr>) and each record field as a cell within the row (<td>). While you can use TemplateField elements and other tools to customize the appearance of a GridView, the GridView's output will still be enclosed within a table element. But sometimes you want to have complete control over the appearance of the HTML markup generated by the data-bound controls. This is exactly where the ListView control comes into play. The ListView control does not automatically enclose its rendered output in any additional markup. Instead, it's your responsibility to specify the precise HTML rendered for the ListView control. You specify the precise markup using the ListView's built-in templates. Table 1 lists the templates supported by the ListView control.

Table 1. ListView Templates: The ListView control supports these templates.
Template Purpose
AlternatingItemTemplate Display alternating items with different markup to help viewers distinguish consecutive items.
EditItemTemplate Controls display when an item is in edit mode.
EmptyDataTemplate Controls display when the ListView's data source returns no data.
EmptyItemTemplate Controls the display for an empty item.
GroupSeparatorTemplate Controls the content to display between groups of items.
GroupTemplate Specifies a container object such as a table row, div, or span element for the content.
InsertItemTemplate Specifies content to render when users insert an item.
ItemSeparatorTemplate Controls the content to display between individual items.
ItemTemplate Controls content to display for individual items.
LayoutTemplate Specifies the root element that defines a container object, such as a table, div, or span element that surrounds content defined in the ItemTemplate or GroupTemplate.
SelectedItemTemplate Specifies the content to display for the currently selected item.

The two key templates are the LayoutTemplate and ItemTemplate. As the name suggests, the LayoutTemplate specifies the overall markup for the ListView control, while the ItemTemplate specifies the markup used to display each bound record. For example, the following code displays a list of items within an HTML table control in a ListView:

<asp:ListView ID="..." runat="server" DataSourceID="...">
  <table …….>
   <tr runat="server" ID="itemPlaceholder"></tr>
   <td><%# Eval("Name") %></td>
In the preceding code, the ID of the <tr> control inside the LayoutTemplate control is set to itemPlaceHolder, which tells the ListView to place content generated through the ItemTemplate control inside the <table> control. This is required because you define the LayoutTemplate and ItemTemplate separately.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date