Grouping By a Data Field - learn how to group the data in a ListView
based on the actual data coming from the database.
Deleting Data - see how to delete the data bound to the ListView control.
Editing Data - learn how to edit the data bound to the ListView control.
Inserting Data - explore inserting new records directly from within the
ListView control's interface.
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:
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:
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:
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:
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:
<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.
