Disable Control When Asp.net AJAX is in progress

If the AJAX call to the server take too much time, then there is a possibility that user might press some other buttons or some other event occurred which will cause your AJAX call to stop and make a new request.

To overcome this situation, I decided to have div on the top of the page so that while AJAX call is in progress user cannot do any thing else.

So I simply Drag and Drop a Update Progress Control and write the following stuff. 

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        <div id="Progress">Please wait ......</div>
       <div id="bgDiv"></div> 
    </ProgressTemplate>
</asp:UpdateProgress>

And add the following style on head section of the page. 

   1: <style>
   2:     #bgDiv {
   3:       position:absolute;
   4:       top:0px;
   5:       bottom:0px;
   6:       left:0px;
   7:       right:0px;
   8:       overflow:hidden;
   9:       padding:0;
  10:       margin:0;
  11:       background-color:black; 
  12:       filter:alpha(opacity=50);
  13:       opacity:0.5;
  14:       z-index:500;
  15:     }
  16:     #Progress
  17:     {
  18:         position: absolute;
  19:         background-color:Red;
  20:         width: 300px;
  21:         z-index: 600;
  22:     }
  23:  
  24:  
  25:     </style>

There we go whenever AJAX call made, a background div will appear and on top of that we have our message “Please wait”

Here is the snapshot

image

5 Comments

  • It's nice, but perhaps you'd like to check this CSS sample so you make it transparent for other browsers instead of just IE. Take a look here http://www.domedia.org/oveklykken/css-transparency.php

  • Hi,

    Yes, I have been toying with the same issues. &nbsp;I first disabled all the buttons and fields in client script - but this only worked in IE.

    I now apply a CSS style to all buttons and fields to make them look disabled and simply return false; in my script methods (client side) if a partial update is happening.

    I still like the user being able to keyboard and mouse over navigate while the update is happening because they can get ready for the next step while the update is happening.

    Anyway....I am being pedantic as the updates only take 0.5 seconds in my app.

  • Just look at jQuery (here' an example disabling all &lt;a&gt;, but you can do the sabe for buttons...

    Sys.Application.add_init(App_Init);

    function App_Init() {

    &nbsp; &nbsp;Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequest);

    &nbsp; &nbsp;Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);

    }

    function BeginRequest(sender, args) {

    &nbsp; &nbsp;$("a").attr("disabled", "disabled");

    }

    function EndRequest(sender, args) {

    &nbsp; &nbsp;$("a").attr("disabled", "");

    }

  • Wicked blog - helped me out today!

  • ModalUpdateProgress works fine!!!

Comments have been disabled for this content.