In this article I will explain with an example, how to use DataPager control in ASP.Net using C# and VB.Net.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
HTML Markup
Following HTML Markup consists of an ASP.Net ListView control. The ListView control will be displayed in HTML Table Layout.
The ListView has the following Templates:
LayoutTemplate
This determines the layout of the whole ListView. This section of ListView will have a PlaceHolder enclosed in HTML tags.
An HTML Table has been placed inside the LayoutTemplate.
ItemTemplate
This contains the actual DataBound items which will be populated from Database, similar to the ItemTemplate of ASP.Net GridView or DataList controls.
Inside the ItemTemplate, records will be populated from the database.
GroupTemplate
This plays the vital role in repeating the ListView items horizontally, and it is associated with the GroupItemCount property. This section of ListView will have a PlaceHolder enclosed in HTML tags.
The GroupPlaceHolder will display the contents from GroupTemplate.
DataPager control
Then there is an ASP.Net DataPager control placed inside the LayoutTemplate which will be used to display the pager.
The DataPager control has been assigned with following properties:
PagedControlID - It has been set with the ID of the ListView control.
PageSize – It is used to set the number of records to display on the ListView. In this case it is 10.
Finally, the ListView has been assigned with OnPagePropertiesChanging event handler. It will be called, when the DataPager Page is changed or clicked.
<asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
ItemPlaceholderID="itemPlaceHolder1" OnPagePropertiesChanging="OnPagePropertiesChanging">
<LayoutTemplate>
<table cellpadding="0" cellspacing="0">
<tr>
<th>CustomerId</th>
<th>ContactName</th>
<th>Country</th>
</tr>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
<tr>
<td colspan="3">
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="lvCustomers" PageSize="10">
<Fields>
<asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
ShowNextPageButton="false" />
<asp:NumericPagerField ButtonType="Link" />
<asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false"
ShowPreviousPageButton="false" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td><%# Eval("CustomerId") %></td>
<td><%# Eval("ContactName") %></td>
<td><%# Eval("Country") %></td>
</ItemTemplate>
</asp:ListView>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
Binding the ListView control
Inside the Page Load event of the page, the ListView is populated with records from the Customers table of the Northwind database.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.PopulateData();
}
}
private void PopulateData()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "SELECT CustomerId, ContactName, Country FROM Customers";
cmd.Connection = con;
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataTable dt = new DataTable();
sda.Fill(dt);
lvCustomers.DataSource = dt;
lvCustomers.DataBind();
}
}
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.PopulateData()
End If
End Sub
Private Sub PopulateData()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand()
cmd.CommandText = "SELECT CustomerId, ContactName, Country FROM Customers"
cmd.Connection = con
Using sda As New SqlDataAdapter(cmd)
Dim dt As New DataTable()
sda.Fill(dt)
lvCustomers.DataSource = dt
lvCustomers.DataBind()
End Using
End Using
End Using
End Sub
Handling Paging in ListView using DataPager control
This event handler is executed, when the page is changed or clicked inside the DataPager.
Inside this event handler, first the DataPager control is referenced and then its SetPageProperties method is called by passing the StartRowIndex and MaximumRows form the PagePropertiesChangingEventArgs.
Finally, ListView is again populated by calling the PopulateData function.
C#
protected void OnPagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
{
(lvCustomers.FindControl("DataPager1") as DataPager).SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
this.PopulateData();
}
VB.Net
Protected Sub OnPagePropertiesChanging(sender As Object, e As PagePropertiesChangingEventArgs)
TryCast(lvCustomers.FindControl("DataPager1"), DataPager).SetPageProperties(e.StartRowIndex, e.MaximumRows, False)
Me.PopulateData()
End Sub
Screenshot
![Using DataPager control with example in ASP.Net]()
Demo
Downloads
