• Display ‘Please wait’ popup

    This procedure explains how to add a ‘Please wait’ screen to an ASP.net application.
    By default at server process (e.g. saving a request) you only see a progress bar in the status bar   . If it’s a long running process you might not see any update for a longer time, and users might think that the application stopped, is already finished or did not even start because they did not press the correct button. This might result in double clicks on the Save button or closure of the browser window without completion.

    Therefore it is better to display message in the middle of the screen so the user is aware that there is something going on. Current procedure describes how to disable all existing web controls (buttons etc.), coloring all areas in dark gray (fade out) and display an animated circle next to a “Please wait” text.

    The procedure has been created based on ASP.net 2005 (2.0) and Microsoft’s Ajax Control Toolkit Release 11119.

    CSS

    Add the following lines to your CSS file:

    JavaScript

    Add the following JavaScript Code to your aspx page:

    Taking a closer look at the script you see the last function “displayWait”. There you could define on which buttons the ‘Please wait’ screen should be displayed. In current example the button has to have the text “Save” or “Save and Close”. On all other buttons the “Please wait” screen will not be displayed. Of course you should modify this function according to your needs.

    Buttons in Ajax UpdatePanel

    Add an Update Panel to your aspx page. Place your buttons in the Update-Panel. At least the buttons which should display the ‘Please wait’ screen need to be in the UpdatePanel, but you could of course also add other buttons etc. there.

    Aspx Controls

    Add a Panel, Button and a ModalPopupExtender to your aspx page. The Panel will be displayed in the middle of the screen. The hidden button is necessary for the ModalPopupExtender as it needs a TargetControl.

    Image

    Add an animated gif to your project. Check Ajaxload.info to create your own if you like, otherwise you might use this one:

    Build

    That’s it. Now build your application. Or maybe you want to download the example.

Leave a comment

If you want to share your opinion, leave a comment.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">