Software Development

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.

Separation

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.

Presentation

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

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.

Placeholder

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" ?>

<sites>

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

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

</sites>

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>

</head>

<body>

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

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

<AlternatingItemTemplate>

<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 />

</li>

</AlternatingItemTemplate>

<LayoutTemplate>

<ul>

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

</ul>

</LayoutTemplate>

<EmptyDataTemplate>

No data was returned.

</EmptyDataTemplate>

<ItemTemplate>

<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 />

</li>

</ItemTemplate>

<ItemSeparatorTemplate>

<hr>

</ItemSeparatorTemplate>

</asp:ListView>

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

</form></body></html>

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.

<ul>

<li style="">

id: 1 <br />

url: www.techrepublic.com <br />

title: TechRepublic

</li>

<hr>

<li style="">

id: 2<br />

url: www.cnet.com<br />

title: CNET<br />

</li>

</ul>

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.

<LayoutTemplate>

<ul>

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

</ul>

</LayoutTemplate>

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!

About

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...

8 comments
MadestroITSolutions
MadestroITSolutions

First of all great article. Thanks for bringing this control up. That being said, personally I don't like using code embedded in the presentation layer (Eval statements). Granted, it makes the article short, easy to explain and more to the point, but it would be great if you could run your articles with code-behind examples as well(presentation/logic separation) so we can see the events these controls expose and how to work within their context. I am not familiar with ListView yet, but I am sure it must expose the usual ItemCreated, ItemDataBound, ect events. Thanks again!

ebaccell
ebaccell

Excelent article. I kept it in my arsenal. Simple, short, direct, clear I only missed a downloadable demo. Eduardo Baccelliere

rtorres
rtorres

It would definitely help if you showed a screen shot together with the code. Remember that a picture is worth a thousand words!

Tushar Mody
Tushar Mody

sounds great, but would be good to see a live demo to illustrate the functionality of the LISTVIEW control. Can't seem to find one.... Tushar

Justin James
Justin James

... I have been forcing Repeater to do. It's about time that they get the formula right, in terms of this type of component. :) thanks for letting me know about this one, I didn't dig too deep into the new ASP.Net controls when 3.5 came out. J.Ja

kjward2
kjward2

up to now, we have been developing using .net 2.0 in vs2005. will we need vs2008 to be able to incorporate these 3.5 controls in our apps, and will all of our users need to have framework 3.5 installed in order for us to deploy apps with these controls in them?

kjward2
kjward2

up to now, we have been developing using .net 2.0 in vs2005. will we need vs2008 to be able to incorporate new 3.5 controls in our apps, and will all of our users need to have framework 3.5 installed in order for us to deploy apps with these controls in them?

aspatton
aspatton

If using ASP.NET, then only the Web server needs to have .NET 3.5 installed. With a Windows application, the user's computer would need the latest version of the .NET Framework, but it could be installed along with the application via a setup program.

Editor's Picks