AJAX: Client Side Actions Before and After PostBack
(
Sep 15 2007 - 08:09:29 AM by
Rob Meade) - [
print article]
Overview
I was working on a search component for a website recently when I stumbled across what I thought to be a limitation with ASP.NET AJAX.
My component itself is pretty simple. It has a TextBox and an ImageButton for the main user controls. Under that I have an UpdatePanel which would display the results in a GridView. I also spent a little time working on an animated gif which I used as a progress indicator (everyone likes fluff!).
My plan was this: I wanted the user to enter a search term and click the button. I then wanted the progress indicator to appear and then disappear when it had returned the search results. This in itself was very straight forward, but almost immediately I noticed a problem. When the user clicked the ImageButton and initiated another search, the results from the previous search were displayed right up until the new results loaded. Other than a brief "flick" it was very difficult to tell that the new results were actually there.
Had I of course chosen not to use AJAX in my solution my page would have performed a full PostBack and to the user it's most likely that the loading of the new data would have appeared more obvious.
The Solution?
I tried several things to resolve the problem, unfortunately none of them worked. These included:
- clearing the GridView and update the UpdatePanel (server side)
- setting the visibility of the UpdatePanel to false (server side)
I checked on a couple of news groups and forums and nothing really seemed to come to light. However there was mention of one useful piece of information which was about my AJAX call only being able to perform one action, ie, return some data.
I did a little bit more digging on Google and stumbled across - wait for it - the official AJAX documentation. Within moments I had read an example entitled "Programming UpdateProgress Controls in Client Script". It made me think more about what it was I was trying to achieve:
- when the request is intialized, hide the existing search results, show the progress indicator (client side)
- when the request ends, hide the progress indicator, show the search results (client side)
Show Me Some Code!
Thankfully there are two very useful methods that you can place in JavaScript on your page which enable you to take control of both of these events (InitializeRequest and EndRequest). Below is the code I used within my search component:
<script language="javascript" type="text/javascript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args)
{
upnResults.style.display = 'none';
UpdateProgress1.style.display = 'inline';
}
function EndRequest(sender, args)
{
upnResults.style.display = 'inline';
UpdateProgress1.style.display = 'none';
}
</script>
The above code sits directly underneath my reference to my ScriptManager, as you can see the first thing it does is creates a reference to the ScriptManager, then it adds the two methods I've defined to the ScriptManager.
By creating these methods yourself you will find that the default behaviour, for example the progress indicator being displayed, will no long happen unless you tell it to as my example demonstrates.
This is just a very simple demonstration of what can be achieved. For me this was enough, however, there is real potential here for performing many actions both before and after an asynchronous PostBack.
Thanks for Reading
I hope you found this, my second article, easy to follow and that it has been of some use to you.