This tutorial will show you how to use two of the new controls in ASP.NET 3.5, the DataPager and the ListView. We will use the DataPager to navigate through pages of data from a SQL database, with no code-behind.
Download the Full Working Version of this Project written with Visual Studio.NET 2008 Here!
Looking for more .NET Database Tutorials? Click Here!
Along with the addition of the ListView Control into version 3.5 of the .NET Framework, we also have the DataPager, which is a helper control to the ListView. This tutorial will show you how to use the DataPager in conjunction with the ListView to create a pages, and to navigate through those pages.
In this example, we will use a simple database with one table, which has three columns - id, name and age. Once we have our database ready, we will use the ListView to display the records as normal, but in the LayoutTemplate we will add a DataPager Control.
We will start by adding our Controls to the ASPX page:
<form id="form1" runat="server">
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<LayoutTemplate>
</LayoutTemplate>
<ItemTemplate>
</ItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM tblPeople"></asp:SqlDataSource> |
There's nothing special about this yet - looks like we're building a ListView to display data as normal. But we'll continue and add to the LayoutTemplate:
<form id="form1" runat="server">
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<ol>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</ol>
<asp:DataPager ID="DataPager1" runat="server" PageSize="2">
<Fields>
<asp:NextPreviousPagerField
ShowFirstPageButton="true"
ShowPreviousPageButton="true"
ShowNextPageButton="false"
ShowLastPageButton="false" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField
ShowFirstPageButton="false"
ShowPreviousPageButton="false"
ShowNextPageButton="true"
ShowLastPageButton="true" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
</ItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM tblPeople"></asp:SqlDataSource>
</form>
|
We add the PlaceHolder to the LayoutTemplate as normal, and then we add the DataPager control. We set the PageSize to 2 to demonstrate how the control works at runtime. We add between the fields tags the ones we want to display. We set the initial values of the FirstPage and PreviousPage buttons to false because we will start on the first page. Same with the ShowNext and ShowLast buttons - we are not sure these will be available, because we don't always know the size of the dataset we are displaying. If there is more than we can display on one page, these will be enabled automatically.
Next, we add to the ItemTemplate:
|
<ItemTemplate>
<li>
<%# Eval("name") %>, (<%# Eval("age") %>)
</li>
</ItemTemplate>
|
This part of the code will display the contents of our SqlDataSource, we use it as normal - even though we are using a DataPager. The DataPager will handle the paging entirely.
Now if we run this web application, we should be able to click through the paging links to view multiple pages of our data.
The whole code for the ASPX page will be as follows:
<form id="form1" runat="server">
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<ol>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</ol>
<asp:DataPager ID="DataPager1" runat="server" PageSize="2">
<Fields>
<asp:NextPreviousPagerField
ShowFirstPageButton="true"
ShowPreviousPageButton="true"
ShowNextPageButton="false"
ShowLastPageButton="false" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField
ShowFirstPageButton="false"
ShowPreviousPageButton="false"
ShowNextPageButton="true"
ShowLastPageButton="true" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<li>
<%# Eval("name") %>, (<%# Eval("age") %>)
</li>
</ItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM tblPeople"></asp:SqlDataSource>
</form>
|
Download the Full Working Version of this Project written with Visual Studio.NET 2008 Here!
Looking for more .NET Database Tutorials? Click Here!
|