Using ASP.NET 3.5's ListView and DataPager Controls: Displaying Data with the ListView

Introduction
In November 2007 Microsoft released ASP.NET 3.5. As noted in An Overview of ASP.NET 3.5 and Visual Studio 2008, this released included two new ASP.NET data Web controls: the ListView and DataPager. In a nutshell, the ListView control provides a very flexible means for displaying a collection of data while still offerring rich data features like paging, sorting, editing, inserting, and deleting. The DataPager control can be associated with a ListView to render a paging interface.

Prior to ASP.NET 3.5, developers who needed to display a set of records could choose between the GridView, DataList, and Repeater controls. The GridView provides rich data features, but has a very boxy layout; the DataList and Repeater allow for a more flexible layout, but lack the "point and click" data features found in the GridView, DetailsView, and FormView controls. The ListView bridges the gap between layout flexibility and built-in data features.

This article, the first in a series of articles on the ListView and DataPager controls, looks at the ListView's many available templates and illustrates how to display data. Read on to learn more!

ListView Basics
Many of ASP.NET's data Web controls automatically surround the data bound to them with additional markup. For example, the GridView control displays its data rendered inside of an HTML <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>). Consequently, the GridView's layout is extremely boxy. While page developers can use TemplateFields and other tools to tweak the appearance of a GridView, the GridView's output will still be encased within a <table>.

The ListView control, on the other hand, does not encase its rendered output with any additional markup. We (the page developer) are responsible for specifying the precise HTML rendered for the ListView control. This markup is specified through the ListView's 11 templates:

• AlternatingItemTemplate
• EditItemTemplate
• EmptyDataTemplate
• EmptyItemTemplate
• GroupSeparatorTemplate
• GroupTemplate
• InsertItemTemplate
• ItemSeparatorTemplate
• ItemTemplate
• LayoutTemplate
• SelectedItemTemplate

The two key templates are the LayoutTemplate and ItemTemplate. The LayoutTemplate specifies the ListView's encasing markup, while the ItemTemplate specifies the markup used to generate each record bound to the ListView. For example, to display an ordered list of items with a ListView, the resulting templates would look like the following:

<asp:ListView ID="..." runat="server

" DataSourceID="...">
   <LayoutTemplate>
      <ol>
         <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
      </ol>
   </LayoutTemplate>

   <ItemTemplate>
      <li><%# Eval("columnName") %></li>
   </ItemTemplate>
</asp:ListView>

Since the ListView's LayoutTemplate and ItemTemplate are each defined separately, we need some way to tell the LayoutTemplate, "Hey, for each record you are displaying, put the rendered item markup here." This is accomplished by adding a server-side control with the ID value specified by the ListView's ItemPlaceholderID property. This property defaults to a value of "itemPlaceholder", which is why I have named the PlaceHolder control in the LayoutTemplate as such. I could, however, had given the PlaceHolder control an alternate ID, but then I'd need to specify this value in the ListView's ItemPlaceholdID property.

To output a particular field value in the ItemTemplate, use the databinding syntax, <%# Eval("columnName") %>.

Imagine that the above ListView is bound to an employees database table, and that in the ItemTemplate we were rendering the FullName column within the <li> element. What would the ListView's rendered markup look like?

Well, the ListView would start by rendering it's LayoutTemplate:

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

It would then render its ItemTemplate for each record bound to the ListView control. This might result in the following markup:

<li>Scott Mitchell</li>
<li>Sam Smith</li>
<li>Jisun Lee</li>
<li>Andrew Fuller</li>
<li>Edgar Johnson</li>
<li>Ellen Plank</li>

The ItemTemplate's rendered markup is put in place of the PlaceHolder control (since its ID matches the ListView's ItemPlaceholderID value. The net result is the following markup:

<ol>
<li>Scott Mitchell</li>
<li>Sam Smith</li>
<li>Jisun Lee</li>
<li>Andrew Fuller</li>
<li>Edgar Johnson</li>
<li>Ellen Plank</li>
</ol>

An Example of Displaying Simple Data with the ListView
An ASP.NET version 3.5 website is available at the end of this article with a demo illustrating the ListView control in action. This demo uses the Microsoft Access Northwind database, which is included in the demo

application's App_Data folder. The "Simple Data" demo illustrates how to use the ListView to display records from the Northwind database's Products table. An AccessDataSource control is used to query the Products table and bind the resulting records to the ListView.

In particular, the ListView starts by displaying the title "Product Listing" in an <h3> element. It then lists the products within a <blockquote> element, which has the effect of indenting the output. Each product has its name, category, unit price, and quantity per unit displayed. And each product is separated from one another via a horizontal rule element (<hr>), which is defined in the ItemSeparatorTemplate.

The ListView and AccessDataSource's declarative markup follows:

<asp:ListView ID="ProductList" runat="server" DataSourceID="ProductDataSource">
   <LayoutTemplate>
      <h3>Product Listing</h3>
      <blockquote>
         <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
      </blockquote>
   </LayoutTemplate>

   <ItemSeparatorTemplate>
      <hr />
   </ItemSeparatorTemplate>

   <ItemTemplate>
      <h4><%#Eval("ProductName")%> (<%# Eval("CategoryName") %>)</h4>
      Available at <%#Eval("UnitPrice", "{0:c}")%>,
      with <%#Eval("QuantityPerUnit")%>.
   </ItemTemplate>
</asp:ListView>


<asp:AccessDataSource ID="ProductDataSource" runat="server"
   DataFile="~/App_Data/Northwind.mdb"
   SelectCommand="SELECT [ProductName], [QuantityPerUnit], [UnitPrice], [CategoryName] FROM [Alphabetical List of Products]">
</asp:AccessDataSource>

When this page is visited, the ListView renders into the following HTML:

<h3>Product Listing</h3>
<blockquote>

<h4>Chai (Beverages)</h4>
Available at $18.00,
with 10 boxes x 20 bags.

<hr />

<h4>Chang (Beverages)</h4>
Available at $19.00,
with 24 - 12 oz bottles.

<hr />

<h4>Aniseed Syrup (Condiments)</h4>
Available at $10.00,
with 12 - 550 ml bottles.

<hr />

<h4>Chef Anton's Cajun Seasoning (Condiments)</h4>
Available at $22.00,
with 48 - 6 oz jars.

<hr />

<h4>Grandma's Boysenberry Spread (Condiments)</h4>
Available at $25.00,
with 12 - 8 oz jars.

... Many products have been removed for brevity ...

</blockquote>

Which appears in the visitor's browser like so:

Conclusion
The ListView control, new to ASP.NET 3.5, offers the same rich data features found in the GridView, but allows for a much more flexible rendered output. As we saw in this article, the ListView's rendered output is based on the markup, databinding expressions, and Web controls added to its LayoutTemplate and ItemTemplate. There are a number of other templates available, as well, and we will explore these along with features like sorting, paging, deleting, editing, and inserting in future installments of this article series.