What is Paging? Download: DatalistPaging.zip
If there is a lot of data which cannot be presented in a one page then we divide the data in different Pages. This method is called Paging.
In a Gridview paging is already built-in. Gridview is useful for multi-Column data. If there is only one Column to display and it have to repeat the same Style then we use either DataList or Repeater Control. But, with these controls problem is that we don’t have built-in paging property. So here we are going to take this case. We will explain that how Custom Paging can develop.
Explanation:
We are going to create a datalist populated with data of registered users to a website. We will also use the Users Uploaded images to their Profile and their current status.
<asp:DataListID="UserDataList" runat="server" RepeatDirection="Horizontal" RepeatColumns="4" DataSourceID="ObjectDataSource1">
<ItemTemplate>
<table align="center">
<tr>
<td>
<a href='UserProfile.aspx?userN=<%# Eval("Name") %>'>
<img alt='<%# Eval("Name") %> Profile Image'
src='PicHandler.ashx?Size=M&UserName=<%# Eval("Name") %>'/>
a>
td>
tr>
<tr>
<td>
<%# Eval("Name") %>
<br />
<%# Eval("Online") %>
td>
tr>
table>
ItemTemplate>
asp:DataList>
What we are doing?
1. RepeatColumns="4" means that DataList will have 4 Columns.
2. RepeatDirection="Horizontal" Datalist will repeat itself in horizontally.
3. We are using Custom Template ItemTemplate of DataList to create our desired Layout.
4. User Image is beeing accessed through the ASP .NET Handler “PicHandler.ashx”. For more information how to work with Database images please read Save and Display Images using ASP .NET 2.0 Profile
5. <%# Eval("Name") %> Is a data binding method to access a returned data filed. Here, we are accessing the Name field from the ObjectDataSource1
Now, we will creat or Navigation code or say Paging Template. This can be Inject under or above the DataList. We will controle the View by our Code behind, which we are going to explain later. This will show the Next, Previous and Current Pager Location.
<div id="Navigation" class="navigation" runat="server">
<div id="leftnav">
<a id="PreviousPageNav" runat="server"><< Previousa>
div>
<div id="rightnav">
<a id="NextPageNav" runat="server">Next >>a>
div>
<div id="numnav">
<asp:Label ID="PagerLocation" Text="a Number" runat="server" />
div>
div>
So how are we accessing the Data? And, from Where comes the Data? We are going to create our own methods to create the Users Data which will be extracted from built-in Membership database of ASP .NET 2.0. For that we ObjectDataSource. GetUsersData Is a Class name in App_Code folder GetAllUsersDataTableByPageIndex and is our Select Method. We need a Parameter to pass to the method for the current Page i.e SelectParameters, this job will be performed through QueryStringParameter, here perticularly PageIndex. That means: for every page view we will pass a QueryString to the method and it will return the page Data.
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="GetUsersData" SelectMethod="GetAllUsersDataTableByPageIndex" OnSelected="DataSource_Selected" OldValuesParameterFormatString="original_{0}">
<SelectParameters>
<asp:QueryStringParameter DefaultValue="0" Name="PageIndex" QueryStringField="PageIndex" Type="Int32" />
SelectParameters>
asp:ObjectDataSource>
Let’s have a look on the method which is the Heart of all Process. One more time this the function which is created in GetUsersData Class (create the class inside App_Code folder):
public static DataTable GetAllUsersDataTableByPageIndex(int pageIndex)
{
MembershipUserCollection mc = Membership.GetAllUsers();
DataTable dt = new DataTable("Users");
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Online", typeof(string));
// initialize to next value
int UpperIndexNextPage = (pageIndex + 1) * 12;
int LowerIndexNextPage = UpperIndexNextPage - 11;
// If upper limit is less then supposed one then reduce
// to the actual Lower value will stay the same
if (UpperIndexNextPage > mc.Count)
{
UpperIndexNextPage = mc.Count;
}
// Make sure that Next page Lower value is under the Upper Limit.
// If its only 1 then make the both upper and lower limits same
if (LowerIndexNextPage == mc.Count)
{
LowerIndexNextPage = 1;
UpperIndexNextPage = 1;
}
// Create Users Array.
string[] users = new string[mc.Count];
int i = 0;
foreach (MembershipUser st1 in mc)
{
users[i] = st1.UserName;
i += 1;
}
// Fill the DataTable, Notice how to see the user Current Status.
string name = string.Empty;
string status = string.Empty;
for (int j = LowerIndexNextPage - 1; j < UpperIndexNextPage; j++)
{
MembershipUser user = Membership.GetUser(users[j], false);
name = users[j];
if (user.IsOnline)
status = @" Online ";
else
status = "Offline";
dt.Rows.Add(new Object[] { name, status });
}
dt.AcceptChanges();
return dt;
}
We created a DataTable and filled it with Users data. But we are caring the upper limit and lower limit for the data rows to be return. This is decided through the PageIndex value passed from the Page Query String value. For further reading how to create Data Table please read:
1. Creating a DataTable Dynamically from MS SQL Data Source
2. Create a DataTable of All User in your Website
Now, we are going to develop the Code behind for the Page. At every page Refresh the DataSource_Selected is executed. Here is where we manage the Page Size and the Paging Template:
protected void DataSource_Selected(object sender, ObjectDataSourceStatusEventArgs e)
{
// Retrieve output parameter values returned from calling the
// "ProductsTableAdapter.GetProductsByCategoryId"
// method invoked by the ObjectDataSource control
MembershipUserCollection mc = Membership.GetAllUsers();
int UsersCount = mc.Count;
// from ObjectDataSource parameter pageIndex
int pageIndex = Convert.ToInt32(Request.QueryString["PageIndex"]);
int pageSize = 12;
UpdatePagerLocation(pageIndex, pageSize, UsersCount);
UpdateNextPrevLinks(pageIndex, pageSize, UsersCount);
Page.Title = "FriendsPoint.de | Members List: ";
}
void UpdatePagerLocation(int pageIndex, int pageSize, int UsersCount)
{
int currentStartRow = (pageIndex * pageSize) + 1;
int currentEndRow = (pageIndex * pageSize) + pageSize;
if (currentEndRow > UsersCount)
currentEndRow = UsersCount;
PagerLocation.Text =
currentStartRow + "-" + currentEndRow + " of " + UsersCount + " Users";
}
void UpdateNextPrevLinks(int pageIndex, int pageSize, int UsersCount)
{
string navigationFormat = "UsersWidPics.aspx?PageIndex={0}";
PreviousPageNav.HRef =
String.Format(navigationFormat, pageIndex - 1);
PreviousPageNav.Visible = (pageIndex > 0) ? true : false;
NextPageNav.HRef = String.Format(navigationFormat, pageIndex + 1);
NextPageNav.Visible =
(pageIndex + 1) * pageSize < UsersCount ? true : false;
}
Download the code for more detail. Download: DatalistPaging.zip