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:
- Set the PagedControlID property of the DataPager control to the name of the data-bound control.
- 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.