ASP.NET AJAX is great. I have fell in love with it since I first used it. It ease of use and increased user experienced is a great trade-off. But down to the point… It can be quite annoying for a user during a longer expierence when they have to wait between Async requests beteween the browser and server. Sometimes you can’t tell if the process is even working right. This began my use of the “Spinny” – showing a simple animated gif to simulate the load time of an AJAX request. Eventually I discovered that users sometimes will not wait patiently between requests and that being proactive to prevent this was the best approach.
The Problem: “I need a way to easily restrict a user from clicking anything on the interface during an AJAX request.”
For those people unfamiliar with a “Modal” popup, it is simply a grayed out screen preventing the user from clicking anything on the screen. In a web browser this simply means placing a DIV over the entire UI thus preventing a user from clicking any objects behind it.
The simplist and most effective way to accomplish this was using a couple tools reccommended by different colleagues.
BlockUI – this is a JQuery plugin that does much of the positioning work for us when creating a Modal. Check it out at: http://malsup.com/jquery/block/
So here it is step by step for implementation:
1. You will need to download the jquery and blockUI scripts and attach to your page:
Import the files into your VS project and reference them on your page (or MasterPage…or wherever). It is important to note you need to be using at least JQuery version 1.2.3 for the BlockUI plugin to work correctly. In my version I’m using JQuery 1.3.2 with BlockUI 2.0. I have also successfully tested with JQuery version 1.2.4.
2. Since we are developing a specific implementation using ASP.NET AJAX you will need to ensure your web application is AJAX Enabled (if your using the latest framework version 3.5 then your good to go). Then make sure you have a ScriptManager compoenent on the page (or your MasterPage), and that you have an UpdatePanel wrapping your page content (and that Children are acting as triggers to initiate an async postback. This is all standard ASP.NET AJAX implementation….. nothing special.
2. We will now need to create some HTML and CSS of what our message will look like inside the Modal Popup. This content does not need to be placed inside your UpdatePanel. I usually put it at the top of the page for consistency. It will need to have an associated HTML ID with it so we can attach it to the BlockUI.
One of your styles on this message should be your CSS “Display: none;” so that it does not show up on load.
3. Finally we need to create a new JS file and attach it the same page (or put it in the page head). This is the file that will do the integration:
This script has three main functions that I’ll explain in more detail:
modalBeginRequest – This is the begin of any AJAX request. The first thing we do is hide any scroll bars for the HTML document as a whole (which will be set back when it ends). Then activate the BlockUI component giving it the element of ID that it should activate (yes…it will automatically change its display to show it). I believe you could also provide a simply text message here as well if you don’t wish to customize. And finally the last statement in this function just clears our any previous error message encountered on a last Async request.
modalEndRequest – Finally when the request returns we first unblock the UI. Then we readd any scroll-bars that were present. And finally, take a look to see if there is any error message generated during the request, and if so display it in DIV (if you want to of course).
And thats it. The Modal Popup will now work like a charm anytime an Async postback occurs. It is quite reliable, reuseable, and easy. I think given this example and the attached code you could have this up and running in 5-10 min. What I have done in the past is throw all these components into a simple UserControl and its all completely enacapsulated.