I’m currently working on an ASP.Net project for a client of mine that utilises the ASP.Net AJAX framework to asyncronously load a report into a web page. Now sometimes in this application the report is loaded when the page loads up, which meant the users have to wait until the report had been generated before they got to see a page.
What I wanted to do is show them a page first, put up a ‘loading report’ progress bar then show the report when the AJAX request has ended.
After deliberating a while I decided to load the page then use some client side code to do another postback to get the report. I wanted to run some code when the AJAX call started to show my progress bar, then run some code to show my report when the AJAX call ended.
I looked at the ASP.Net AJAX documentation and came accross the PageRequestManager class. This class can be found in the Sys.WebForms namespace and can be used to manage and control a partial page update, which seemed exactly what I wanted to do.
First I need to get a reference to an instance of the PageRequestManager class, you cannot instantiate the class directly so you need to call it’s getInstance() method.
var prm = Sys.WebForms.PageRequestManager.getInstance();
Now I need to tell my PageRequestManager instance which JavaScript functions I want to run when the AJAX call initializes and when the call ends.
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
All thats left to do now is write the functions.
function InitializeRequest(sender, args)
{
// Show Progress Bar
}
function EndRequest(sender, args)
{
// Show Report
}
The above code will run on every asyncronous postback of the page, allowing you to perform client side functions like showing and hiding content at the start and end of every AJAX call.
So that’s the basics of the PageRequestManager class, you can view the documentation here at the offical ASP.Net AJAX site which gives you a much in depth guide to using the class.
