Display data with .NET's ListView control

New to .NET 3.5 is the ListView control, which allows you to display data according to your needs. The control also provides a flexible layout model and powerful built-in data features.

The GridView data control introduced in .NET 2.0 was an improvement over the DataGrid data control in .NET 1.x, but there were still drawbacks, especially with loading and paging through data. Microsoft recognized the shortcomings and addressed them with the introduction of the ListView control in .NET 3.5. With the ListView control, you can display data according to your needs.


Before diving into how to use the ListView control, it is worth mentioning an important distinction between the paging features in the ListView and GridView controls. The GridView control provides built-in support for paging through data; this functionality was not included in ListView. Paging support is now in its own control called DataPager, which I will discuss in next week's column.


The output generated by ASP.NET data controls is often quite messy. If you look at the code generated by the GridView and DataList controls, you will encounter myriad HTML TABLE markup.

A great feature of the ListView control is that you control its output via templates. The templates allow you to control every aspect of the rendering of data.


Templates control certain aspects of the ListView control's generated HTML. Templates are required with ListView; they are optional with other data controls. These templates provide complete control over the output; that is, all aspects of the ListView's generated markup are controlled via templates.

The following list offers details about the numerous templates available with ListView.

  • AlternatingItemTemplate: Defines how alternating items are displayed.
  • EditItemTemplate: Defines the presentation for an item when it is edited.
  • EmptyDataTemplate: Specifies the content to display for empty individual items.
  • EmptyItemTemplate: Specifies the content to display for empty group items.
  • GroupSeparatorTemplate: Specifies the content to display between groups.
  • GroupTemplate: Defines the content for groups. This template is a placeholder for the data displayed for individual group items (when data is grouped).
  • InsertItemTemplate: Defines the presentation for a new item being inserted into the data set.
  • ItemSeparatorTemplate: Defines the content to display between individual data items.
  • ItemTemplate: Defines the data to display for single items.
  • LayoutTemplate: Defines the main presentation features for the control. This root template contains placeholders that are replaced by what is defined by ItemTemplate and GroupTemplate.
  • SelectedItemTemplate: Specifies the content to display when users select items.

While the templates provide various options, there is a certain way to put them to use. A key aspect of using the templates is specifying the appearance of the data bound to the control.


A placeholder tells ASP.NET where to place the ListView control's output data when it is rendered. This may be accomplished with the <asp:PlaceHolder> control or by assigning an id value of itemPlaceHolder to a control.

The examples in this article use a simple XML file as a data source. This listing displays the contents of the XML file:

<?xml version="1.0" encoding="utf-8" ?>


<site id="1" url="www.techrepublic.com" title="TechRepublic" />

<site id="2" url="www.cnet.com" title="CNET" />


An XmlDataSource control is used to access this XML file. The following ASP.NET page ties the ListView control to the XmlDataSource:

<%@ Page %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>ListView Example</title>



<form id="frmListViewExample" runat="server">

<asp:ListView ID="lvExample" runat="server" DataSourceID="XmlDataSource1">


<li style="">

id:<asp:Literal ID="litID" runat="server" Text='<%# Eval("id") %>' /><br />

url:<asp:Literal ID="litURL" runat="server" Text='<%# Eval("url") %>' /><br />

title:<asp:Literal ID="litTitle" runat="server" Text='<%# Eval("title") %>' /><br />





<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>




No data was returned.



<li style="">

id:<asp:Literal ID="litID" runat="server" Text='<%# Eval("id") %>' /><br />

url:<asp:Literal ID="litURL" runat="server" Text='<%# Eval("url") %>' /><br />

title:<asp:Literal ID="litTitle" runat="server" Text='<%# Eval("title") %>' /><br />







<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/sites.xml" />


A few key elements of this example include the following:

  • AlternatingItemTemplate and ItemTemplate display the actual data from the XML file. The templates use HTML list elements (<LI>) with Literal controls for each piece of data (id, title, and url). The Eval statements pull the specific data fields from the data source.
  • LayoutTemplate defines the overall appearance of the ListView control's output, as well as an unordered list for the output. The PlaceHolder control appears within the unordered list, but it will not appear in the output. The PlaceHolder control defines where the output data will appear -- it is placeholder content rendered via ItemTemplate and AlternatingItemTemplate.
  • ItemSeparatorTemplate displays a line between data items.
  • If no data is returned, the text defined in the EmptyDataTemplate is displayed.

The HTML generated for the ListView sample is a drastic change from the GridView control, where the data is automatically rendered in an HTML table.


<li style="">

id: 1 <br />

url: www.techrepublic.com <br />

title: TechRepublic



<li style="">

id: 2<br />

url: www.cnet.com<br />

title: CNET<br />



The alternate way to specify a data placeholder with the ListView control involves using any control and assigning it an id of itemPlaceHolder. Also, the control must have a runat property set to server. The ListView control in my previous example could have used the following syntax in its LayoutTemplate element without any change in the output.



<div id="itemPlaceHolder" runat="server" />



The key with the placeholder elements (regardless of the syntax) is that it does not appear in the rendered output -- it is truly just a placeholder.

Another option

In addition to other data controls like GridView, DataList, and Repeater, the ListView control is another option for working with data. It provides a flexible layout model and powerful built-in data features. The ListView control also offers user interaction with data when combined with the DataPager control.

Do you use .NET 3.5 in your development work, or are you still working with previous versions? Do you think the ListView control meets developers' data presentation needs? Share your experiences and thoughts with the Visual Studio Developer community.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.


Get weekly development tips in your inbox TechRepublic's free Visual Studio Developer newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically subscribe today!

By Tony Patton

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...