When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article
Jobs

ASP ASP.NET ASP FAQs Message Board Feedback ASP Jobs
 
Print this Page!
Published: Wednesday, December 26, 2007

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

By Scott Mitchell


A Multipart Series on ASP.NET's ListView and DataPager Controls
This article is one in a series of articles on ASP.NET's ListView and DataPager controls, which were introduced with ASP.NET version 3.5.

  • Displaying Data with the ListView - looks at the ListView control basics, with demos on how to display data using the LayoutTemplate and ItemTemplate.
  • Grouping Data with the ListView Control - shows how to render different formatting or encasing markup to every N rendered records.
  • Sorting Data with the ListView Control - shows how to include buttons to sort the ListView's data.
  • Paging Through Data with the ListView and DataPager Controls - shows how to page through the ListView's data using the DataPager control.
  • 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.
  • Creating an SEO-Friendly Paging Interface - learn how to configure the DataPager to render an SEO-friendly paging interface.
  • The Ultimate DataPager Interface - create the ultimate DataPager interface using ASP.NET Routing.
  • 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!

    - continued -

    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:

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

    The list of products.

    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.

    Until then... Happy Programming!

  • By Scott Mitchell


    Further Readings:

  • An Overview of ASP.NET 3.5 and Visual Studio 2008
  • The asp:ListView Control (Part 1)
  • Attachments


  • Download the Demo (in ZIP format)


  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article