Click here to Skip to main content
Click here to Skip to main content

AsyncPageRepeater Tutorial

, 10 Oct 2006
Rate this:
Please Sign up or sign in to vote.
Explains how to implement a fast, feature rich AJAX Paging and Sorting Repeater WITHOUT touching the code behind or database.

Sample Image - APRScreenshot.jpg

Introduction

This article will explain how to utilitize and implement the AsyncPageRepeater (from the highly anticipated AsyncControls Suite).

As with all AsyncControls, the AsyncRepeater comes with many enhancements not found in the asp:Repeater control. Some of the more innovative and robust features are implemented via the inherited class, AsyncPageRepeater. As the name suggest it is a AsyncRepeater that implements not only paging, but built-in sorting. Along with the many DTHML effects that are built into the AsyncRepeater, it has combined the bonus visual and responsiveness of the AsyncControl with a killer function.

The AsyncPageRepeater boast two great features that everyone seems to recognize, paging and sorting. Paging is one of the best known ways to decrease load times and increase readability when it comes to displaying a lot of data. I have seen many Paging Repeaters in my day; but never one that didn't require changes to the code behind or the DB. Sorting is the end all for ordering data. I have seen some sorting approaches in my time, but none have been this easy to implement. Again no database changes, and no code behind changes what so ever. Sorting comes with the price of adding some header controls, but you do not have to change any other components (no db change, no code behind change).

Implementing the AsyncPageRepeater paging:

The paging implemented with the AsyncPageRepeater can be implemented in less than 10 seconds.

1.) Rename the Repeater to AsyncPageRepeater.
2.) Add set the property: PageSize=XX

Once you have done the above, your once regular postback repeater has been transformed into an AsyncPageRepeater. You can build the page and view your master piece. Thats it; literally two steps. As I stated before you don't have to touch anything but the ASPX code. No database changes, nothing. Also the AsyncPageRepeater will only request the datasource once. It doesn't do multiple request to the datasource object. One bind, one time and your're done.

Paging Performance:


600 tabular results (12 cols), (PageSize = 50):
Bind time: 3.1 seconds
Paging time: 2.7 seconds
Server hardware: 1 GB ram, P4 2.8 GHz

In my opinion that is fast. So there is absolutely no performance hit for using the AsyncPageRepeater in place of the asp:Repeater. Keep in mind that it is all AJAX, no postback land.

Implementing AsyncPageRepeater sorting:

The sorting mentioned in the previous section makes reference to adding some header cotnrols. These header controls are actually IAsyncCommandControl implementations. So you can create your own or choose from the three that come with the AsyncControls Suite (AsyncButton, AsyncLinkButton, AsyncImageButton). Which ever you do, just add an IAsyncCommandControl for every column that you want to sort. Each IAsyncCommandControl must set two properties, SortID, and SortType. The SortID is the ID of the AsyncControl that you are going to sort against. It can be anything that uses the Text property to display its value. In addition to that you can even use an AsyncHiddenField to sort your columns, which means you can sort anything (images, nested AsyncRepeaters, etc). Next set the SortType. This property is really simple to use, but you can increase the accuracy of the sort if you choose the correct type. You can choose from Number, Money, DateTime, and Text. The default is None. SortType is text by default (it is the safest to always assume). For numerical sorting (either money, decimal, or integers), the safest to assume is Money (it will sort all numberical types). SortType.Money will omit the currency symbol while sorting and just pays attention to the numbers. That is why you can use it in any numerical sort. And of course SortType.DateTime will sort the dates.

Sorting Performance:

600 tabular results (12 cols), PageSize = 50;
Sort time (Asc || Desc): 2.4 seconds (sorting 50 fields)
Server hardware: 1 GB ram, P4 2.80 GHz

AsyncPageRepeater ASPX Code

AsyncPageRepeater Code Behind

AsyncPageRepeater Notes:

The AsyncPageRepeater is one of the only paging repeaters that I know that has a fully customizable look. Every visual aspect of the AsyncPageRepeater can be customized. Utilize the Range* & *Component* properties to visually and functionally modify the AsyncPageRepeater.
<dw:AsyncPageRepeater runat="server"
RangeCurrentPageTextFormat="<b>{0}</b>"
PreviousPageComponentText="<< "
NextPageComponentText=" >>"
RangeOfTextFormat = "Showing Results {0} to {1} of {2}"
....

AsyncPageRepeater Reference Guide:

In this section I will try to explain all the properties associated with the AsyncPageRepeater. There are many so bear with me as I try to give examples and proper usage of the properties. Inherently this will also explain some the the properties associated with other AsyncControls.

AsyncPageRepeater Doc Screenshots

Here is the entire documentation page on the AsyncPageRepeater:

AsyncPageRepeater Events:

PageChanged, PageChanging; you use this events based soley on objective behavior you want to implement.

PageChanged - Occurs when a page has changed. I found that this really a form of notification. After the user changes the page the event is raised. However you can use the VisibleItems collection to see the newly visible AsyncRepeaterItems and do as you will with them.

PageChanging - Occurs when a page is about to be changed. Before the page is switched the event is raised. So you can alter the items to be displayed. This is the most powerful event. The method is passed AsyncPagingEventArgs, which gives you extended abilities.

AsyncPagingEventArgs.FromPage returns the page number the user was viewing.

AsyncPagingEventArgs.GoingToPage can return the page number click by the user, or you can set the page that should be displayed. That gives you the ability to keep the user on one page, or restrict them to pages.

##REFERENCE GUIDE TO BE FINISHED##

Conclusion

Overall the AsyncPageRepeater in my opinion, is amazing. Its fast, functional and easy to implement.
I am beta testing the AsyncControls Suite (its free, why not) and requires no JS knowledge at all. I know a lot about the AsyncControls Suite so there will be more tutorials. If anyone has any questions or comments about the AsyncControls or the AsyncPageRepeater please post it.

Additional Links/References

AsyncControls.com has a demo of the AsyncPageRepeater discussed in this article along with a list of the other 30+ AsyncControls. It also has a video of ASP.Net page being converted by just renaming your current controls. Usually to convert a page you can just prepend Async to any of the controls on the front end. No code behind changes or javascript know-how are required for it to function.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

C. Bess
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
GeneralNo source code Pinmemberzhaojicheng10-Oct-06 14:48 
GeneralRe: No source code PinmemberC. Bess11-Oct-06 4:15 
This is a just tutorial for an AsyncControl. The beta version is free, no source code though.
 
More than just, Senior Systems Programmer @ VoxTechnologies

GeneralSorting doesn't work well Pinmemberleddt5-Oct-06 9:34 
GeneralRe: Sorting doesn't work well PinmemberC. Bess5-Oct-06 9:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 10 Oct 2006
Article Copyright 2006 by C. Bess
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid