ASP.NET AJAX Modal Popup

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.”

The Solution: “This is quite easy to do using JQuery, BlockUI, and some JavaScript hooks through the use of a modal popup.”

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.

modalExample

The simplist and most effective way to accomplish this was using a couple tools reccommended by different colleagues.

JQuery – this is an amazing JavaScript library that will revolutionize the way you write JavaScript. I can’t say how awesome it is…check it out for yourself: www.jquery.com

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/

JavaScript hooks – by javascript hooks I simply mean, we need to connect the BlockUI component to fire everytime an async postback occurs.

Download Source Code Example (Visual Studio 2008)

Implementing It

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:

Download JQuery Script

Download BlockUI Script

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.

modal-1

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.

modal-2

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:

  1. // the id of the error label
  2. var ERROR_LABEL = "lblError";
  3.  
  4. // attach javascript
  5. $(document).ready(function() {
  6.     // grab the script manager
  7.     var manager = Sys.WebForms.PageRequestManager.getInstance();
  8.  
  9.     // hook in our callbacks for the ASP.NET Ajax Postbacks
  10.     manager.add_beginRequest(modalBeginRequest);
  11.     manager.add_endRequest(modalEndRequest);
  12.  
  13.     // override the 5px grey border
  14.     $.blockUI.defaults.css[‘border’] = ‘0px’;
  15.     $.blockUI.defaults.css[‘height’] = ‘100px’;
  16.     $.blockUI.defaults.css[‘width’] = ‘400px’;
  17.     //$.blockUI.defaults.css[‘background’] = ‘transparent url(Images/background_image_here.png) no-repeat’;
  18. });
  19.  
  20. function modalBeginRequest(sender, args) {
  21.     // kill the scrollbars
  22.     $(‘html’).css({ "overflow": "hidden" });
  23.  
  24.     // show a modal popup
  25.     $.blockUI({ message: $(‘#modalPopup’) });
  26.  
  27.     // clear the error text
  28.     $(‘#’ + ERROR_LABEL).html(”);
  29. }
  30.  
  31. function modalEndRequest(sender, args) {
  32.     // remove the modal popup
  33.     $.unblockUI();
  34.  
  35.     // restore the scrollbars
  36.     $(‘html’).css({ "overflow": "scroll" });
  37.  
  38.     // detect if an error in postback occured.
  39.     if (args != null) {
  40.         var error = args.get_error();
  41.         if (error != null) {
  42.             $(‘#’ + ERROR_LABEL).html(error.message);
  43.         }
  44.     }
  45. }

This script has three main functions that I’ll explain in more detail:

$(document).ready – This is a special JQuery function that will execute as soon as the DOM is ready to go, so we get maximum performance. Then we simply get a reference to the current script manager object and attach two JavaScript events to the ScriptManager. One event occurs when an AJAX request begins, the second occurs when an AJAX object ends. The final block of code is the initialization of the BlockUI component. Its name and reference is always the same – no matter what application. We adjust the width and height to whatever we like it to be, among some other styles. At this point you can also customize the blockUI box so that its not so simple…i.e. add a background image with rounded corners – specifically customize the component to your needs.

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).

Conclusions

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.

Download Simple AJAX Modal Example

Remarks

Thanks to Dirty Steve for introducing me to JQuery and BlockUI which have simply changed my life when it comes to JavaScript 🙂

Leave a Reply