In this article I will explain with an example, how to implement paging in
ASP.Net ListView control using
DataPager control without DataSource in C# and VB.Net.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
HTML Markup
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 found and then its
SetPageProperties method is called by passing the
StartRowIndex and
MaximumRows form the arguments.
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
Demo
Downloads