DataPager Example in ASP.NET using C#

In this article we will introduce with the DataPager control in ASP.NET using C#.

DataPager Example in ASP.NET using C#

DataPager in ASP.NET is used for paging. DataPager is divided the big data items into pages. You will drag the DataPager from ToolBox and drop into webpage. In this example we use ListView and DataPager. We use SQLDataSource for data binding. You will click on special tag button of DataPager and select from Choose pager style dropdownlist for styling. You will Editfield by clicking on Edit pager Field. You can see the following image.

DataPager.aspx (Design Page):

DataPager.aspx (source code):

<%@ Page Title="" Language="C#" MasterPageFile="~/RoseindiaMaster.master" 
AutoEventWireup="true" CodeFile="DataPager.aspx.cs" Inherits="DataPager" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<h2 style="color:Green">DataPager in ASP.NET 4, C#</h2>
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<AlternatingItemTemplate>
<tr style="background-color: #FAFAD2;color: #284775;">
<td><asp:Label ID="CountryNameLabel" runat="server" 
Text='<%# Eval("CountryName") %>' /></td>
<td><asp:Label ID="PopulationLabel" runat="server" 
Text='<%# Eval("Population") %>' /></td>
</tr>
</AlternatingItemTemplate>
<EditItemTemplate>
<tr style="background-color: #FFCC66;color: #000080;">
<td><asp:Button ID="UpdateButton" runat="server" CommandName="Update" 
Text="Update" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" 
Text="Cancel" /></td>
<td><asp:TextBox ID="CountryNameTextBox" runat="server" 
Text='<%# Bind("CountryName") %>' /></td>
<td><asp:TextBox ID="PopulationTextBox" runat="server" 
Text='<%# Bind("Population") %>' /></td>
</tr>
</EditItemTemplate>
<EmptyDataTemplate>
<table runat="server" 
style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<InsertItemTemplate>
<tr style="">
<td><asp:Button ID="InsertButton" runat="server" CommandName="Insert" 
Text="Insert" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" 
Text="Clear" /></td>
<td><asp:TextBox ID="CountryNameTextBox" runat="server" 
Text='<%# Bind("CountryName") %>' /></td>
<td><asp:TextBox ID="PopulationTextBox" runat="server" 
Text='<%# Bind("Population") %>' /></td>
</tr>
</InsertItemTemplate>
<ItemTemplate>
<tr style="background-color: #FFFBD6;color: #333333;">
<td><asp:Label ID="CountryNameLabel" runat="server" 
Text='<%# Eval("CountryName") %>' /></td>
<td><asp:Label ID="PopulationLabel" runat="server" 
Text='<%# Eval("Population") %>' /></td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="1" 
style="background-color: #FFFFFF;border-collapse: collapse;
border-color: #999999;border-style:none;border-width:1px;
font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr runat="server" style="background-color: #FFFBD6;color: #333333;">
<th runat="server">
CountryName</th>
<th runat="server">
Population</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" 
style="text-align: center;background-color: #FFCC66;
font-family: Verdana, Arial, Helvetica, sans-serif;color: #333333;">
</td>
</tr>
</table>
</LayoutTemplate>
<SelectedItemTemplate>
<tr style="background-color: #FFCC66;font-weight: bold;color: #000080;">
<td>
<asp:Label ID="CountryNameLabel" runat="server" 
Text='<%# Eval("CountryName") %>' />
</td>
<td>
<asp:Label ID="PopulationLabel" runat="server" 
Text='<%# Eval("Population") %>' />
</td>
</tr>
</SelectedItemTemplate>
</asp:ListView>
<asp:DataPager ID="DataPager1" runat="server" PageSize="2" 
PagedControlID="ListView1">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
ShowNextPageButton="False" ShowPreviousPageButton="true" 
/>
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" 
ShowNextPageButton="true" ShowPreviousPageButton="False" 
/>
</Fields>
</asp:DataPager>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:ChartDatabaseConnectionString %>" 
SelectCommand="SELECT [CountryName], [Population] FROM [ChartPopulation]">
</asp:SqlDataSource>
</div>
</asp:Content>

Output: