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">&lt;&lt; Previous</a>

</div>

<div id="rightnav">

   <a id="NextPageNav" runat="server">Next &gt;&gt;</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.