Coupling JQuery with a plugin called BlockUI. Can be downloaded at http://malsup.com/jquery/block/
What I came out with is a fairly generic solution for ASP.Net that handles all the ajax postbacks for a specific page or website by wiring the application_beginRequest and application_endRequest on the client side.
So here is the recipe:
1. ASP.Net 3.5 website
2. An aspx webpage
3. A script manager with a reference to:
- The JQeury library
- Block UI plugin
- A very short Javascipt file (enclosed below)
4. An update panel
1. Create your website - I use Visual Studio 2008
2. Add your page or your master page
3. Create a js directory and add the downloaded scripts from jQuery and JBlockUI
4. Add a new file to the js directory called wireRequestEvents.js
with the following code:
function BeginRequestHandler(sender, args)
function EndRequestHandler(sender, args)
5. Drop a script manager in your page with the following syntax:
6. Add your update panels with contect templates and you are good to go.
To demonstrate the technique I created a simple page with a button and a label inside an update panel. Once clicked the button waits 4 seconds and then changes the label. This imulates a long transaction on the server.
Here is what the users will see:
After they click the button the UI is blocked by a semi transperant div
The code for this is available at http://www.simplicityc.com/files/JQuerySample.zip