Using the New ListView Control in ASP.NET 3.5 : Page 2

A Simple Data-Binding Example
Now that you have seen the various templates supported by ListView control, the next step is to create a new sample web site. Name it ListViewExample (you can download the sample code here). After creating the web site, select Website → Add New Item from the menu to add a new ASP.NET page named SimpleListView.aspx (see Listing 1). This page will use the ListView control to display products data from the Product table in the AdventureWorks sample database.

In Listing 1, the SqlDataSource control retrieves data from the Product table of the AdventureWorks database by setting the ConnectionString and SelectCommand properties to appropriate values. The ConnectionString property obtains the connection string from the web.config file through an ASP.NET expression. On my test machine, the connection string is defined in web.config as:

   <connectionStrings>
    <add name="AdventureWorks"  
     connectionString="server=localhost;uid=sa;
     pwd=thiru;database=AdventureWorks;"/>
    </connectionStrings>

After setting the SqlDataSource properties, the next step is to display that data through the ListView control. Here's the markup contained in the LayoutTemplate:

   <LayoutTemplate>
    <table cellpadding="2" runat="server" id="tblProducts" 
     style="width:460px">
     <tr runat="server" id="itemPlaceholder">
     </tr>
    </table>
    <asp:DataPager runat="server" ID="DataPager" PageSize="3">
     <Fields>
      <asp:NumericPagerField ButtonCount="10" 
       PreviousPageText="<--" NextPageText="-->" />
     </Fields>
    </asp:DataPager>
   </LayoutTemplate>

The LayoutTemplate defines the container for the output generated through the ListView control. In addition to the table control that defines the overall layout of the ListView control, the LayoutTemplate also defines the <asp:DataPager> control, which provides paging functionality for the ListView control. The DataPager control lets you page data and display navigation controls for any data-bound control that implements the IPageableItemContainer interface (which the ListView control does).

There are two ways to associate the DataPager control with a data-bound control:

1. Set the PagedControlID property of the DataPager control to the name of the data-bound control.
2. Place the DataPager control inside the data-bound control hierarchy. For the ListView control, you can put the DataPager control inside the LayoutTemplate element.

Setting the DataPager's PageSize property controls the number of items displayed for each page of data. You can also change the way a page is submitted to the server by setting the QueryStringField property.

Figure 1. Simple ListView: Here's the output produced by data-binding the ListView control to a SqlDataSource control that retrieves some Product data.

Inside the DataPager control, you specify the NumericPageField template, which enables users to navigate to a particular page by selecting a page number.

   <asp:NumericPagerField ButtonCount="10" 
      PreviousPageText="<--"
      NextPageText="-->" />

The ItemTemplate element provides the markup for each record's details by retrieving the data from the data source control through the Eval() statement.

Figure 1 shows the output produced by navigating to the page in the browser.

Previous Page

Next Page