Portfolio

Friday, June 17, 2011

ASP.Net AJAX Simple Paging System Using JQuery

Assalam-o-Alikum..
For the past few days I was googling to find some paging control for my ASP.net website.. I really found some cool and interesting paging controls/system but none of them were easy for a beginner like me :) So after reading so many articles and working with AJAX-Less Paging Controls, I've come up with my own Asp.Net Ajax Paging Control.. Its really simple but NOT an optimistic approach.. You guys can use it as RnD or in small websites but for Larger Sites I suppose JQuery based JSON Paging would be a better solution.

Im breaking my post in following parts

  • How Paging Works
  • Creating our PAgeing Control
  • Applying AJAX
  • Some jQuery



How Paging Works
Well, the main> reason of paging is showing limited amount of data per page. There are different methods of fetching required data. I use the following method

  • 1. Get the number of total records (T)
  • 2. Specify the number of records per page (N)
  • 3. Get current page number (C)
  • 4. Determine offset number [(C-1) * T]
  • 5. Determine limit number [N]

You can use either use SQL Query or LINQ or whatever you want to fetch your data, depending upon your requirement; I'm using my favorite LINQ :)

IEnumerable<Account> account = (from ac in dc.Accounts where AccountIDs.Contains(ac.AccountID) select ac).Skip((PageNumber - 1) * _configuration.NumberOfRecordsInPage).Take(_configuration.NumberOfRecordsInPage)

This will give me desirable data.

Creating our Paging Control
It is a simple paging control with FIRST, NEXT, PREVIOUS and LAST Buttons. Here is the html code for buttons, remember the HTML buttons should be placed in Ajax Update Panel (Content Template).

<table width="100%">
    <tr>
    <td align="center"><span class="SmallGreen"><asp:LinkButton ID="lbfirst" runat="server" CssClass="SmallGreen" Text="first" OnClick="lbfirst_Click"></asp:LinkButton></span></td><td><img src="../images/forum/separator.jpg" /></td>
    <td align="center"><span class="SmallGreen"><asp:LinkButton ID="lbprevious" runat="server" CssClass="SmallGreen" Text="previous" OnClick="lbprevious_Click"></asp:LinkButton></span></td><td><img src="../images/forum/separator.jpg" /></td>
    <td align="center"><span class="SmallGreen"><asp:LinkButton ID="lbnext" runat="server" CssClass="SmallGreen" Text="next" OnClick="lbnext_Click"></asp:LinkButton></span></td><td><img src="../images/forum/separator.jpg" /></td>
    <td align="center"><span class="SmallGreen"><asp:LinkButton ID="lblast" runat="server" CssClass="SmallGreen" Text="last" OnClick="lblast_Click"></asp:LinkButton></span></td><td><img src="../images/forum/separator.jpg" /></td>
    </tr>
    </table>

Following is the code for backend ASP.net CS file; I'm only showing the code for nex button, making the rest is upto you..

 protected void lbnext_Click(object sender, EventArgs e)
        {
        PageNumber = (int)Request.QueryString["page_no"];
        Offset = PageNumber - 1;
        RecordsperPage = 10;
        TotalRecords = [METHOD TO GET TOTAL RECORD COUNT];
        using (UnisterDataContext dc = Conn.GetContext())
                {
                    IEnumerable<Account> account = (from ac in dc.Accounts where AccountIDs.Contains(ac.AccountID) select ac).Skip(Offset * RecordsperPage).Take(RecordsperPage);
                    Result = account.ToList();
                }

        }

Applying AJAX
Well after doing this all we'll add out link buttons and paging div in ASP.net UPDATE PANEL

 <asp:UpdatePanel ID="unplConnections" runat="server" UpdateMode="Conditional">  
 <ContentTemplate>  
 <table width="100%">  
   <tr>  
   <td align="center"><span class="SmallGreen"><asp:LinkButton ID="lbfirst" runat="server" CssClass="SmallGreen" Text="first" OnClick="lbfirst_Click"></asp:LinkButton></span></td><td><img src="../images/forum/separator.jpg" /></td>  
   <td align="center"><span class="SmallGreen"><asp:LinkButton ID="lbprevious" runat="server" CssClass="SmallGreen" Text="previous" OnClick="lbprevious_Click"></asp:LinkButton></span></td><td><img src="../images/forum/separator.jpg" /></td>  
   <td align="center"><span class="SmallGreen"><asp:LinkButton ID="lbnext" runat="server" CssClass="SmallGreen" Text="next" OnClick="lbnext_Click"></asp:LinkButton></span></td><td><img src="../images/forum/separator.jpg" /></td>  
   <td align="center"><span class="SmallGreen"><asp:LinkButton ID="lblast" runat="server" CssClass="SmallGreen" Text="last" OnClick="lblast_Click"></asp:LinkButton></span></td><td><img src="../images/forum/separator.jpg" /></td>  
   </tr>  
   </table>  
 <div style="padding-top:10px;">   
  <asp:Repeater ID="repConnections" runat="server" OnItemDataBound="repConnections_ItemDataBound">  
 <ItemTemplate>  
 <unister:profiledisplay ID="pdConnections" runat="server" ShowDeleteButton="true" ShowAddREquestButton="true" ShowFriendRequestButton="false" />  
 </ItemTemplate>  
 <FooterTemplate>  
 <asp:Label ID="lblfooter" runat="server" CssClass="SmallGreen" Text=""></asp:Label>  
 </FooterTemplate>  
 </asp:Repeater>  
 </div>   
 </ContentTemplate>  
 </asp:UpdatePanel>  

Some jQuery Effects
I'm not applying as such jQuery here.. I'm just using a JQuery plugin called BlockUi. It helps me out in restricting users to press the button only once.. As soon as you press any paging button; blockUI will block our div or browser(whatever you choose) avoiding any post back mishaps.

 function change_heading(text)  
 {  
 document.getElementById("ctl00_Content_heading_text").innerHTML = text;  
 }  
 Sys.Application.add_init(function() {  
  // Get a reference to the PageRequestManager.  
  var prm = Sys.WebForms.PageRequestManager.getInstance();  
  prm.add_initializeRequest(function() {  
  $('#divRequests').block({ message: '<img src="<%=ResolveUrl("~") %>images/MessageBox/async.gif" />',  
               overlayCSS: { backgroundColor: '#72985E', opacity: 0.5 } });  
  });  
  // Unblock the form when a partial postback ends.  
  prm.add_endRequest(function() {  
   $('#divRequests').unblock();  
  });  
 });  


Conclusion
Altough this kind of paging technique works well but still I don't like it very much. Update Panel sucks our Bandwidth like hell.. I would really suggest using Jquery AJAX, its light weight and works very well.. :) But all those of you looking for simple start this technique is quite better.

1 comment:

  1. Thanks for the post, In this complex environment business need to present there company data in meaningful way.So user easily understand it .Sqiar (http://www.sqiar.com/) which is in UK,provide services like Tableau and Data Warehousing etc .In these services sqiar experts convert company data into meaningful way.

    ReplyDelete