Using the PageRequestManager class in ASP.Net AJAX

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.


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.

2 thoughts on “Using the PageRequestManager class in ASP.Net AJAX

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s