How can the UpdatePanel's ContentTemplate be hidden while an UpdateProgress is being used?

Question

What is the easiest way to hide the Contents of an Update Panel when the UpdateProgress is invoked?

Answer 1

I'm not sure if this will work but you can put script tags inside the progresstemplate and hide a div inside the updatepanel. It most likely won't un-hide when it comes back though. You could catch the postback when it returns with javascript like so:

  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){ 
        alert('postback returned'); 
   });

Answer 2

Another way you can do it is make your content invisible at first like this:

<div id="content" style="display: none;">
</div>

Then end every update by adding this to the end of the content template:

<script type="text/javascript">
document.getElementById("content").style.display = "block";
</script>

I haven't tried this myself but I believe it should work.

EDIT -- I just realized this probably won't work quite like you want it to. The content will be invisible as its loading, and it'll become visible after it's done. But the content won't disappear until it receives that first byte from the server. That may or may not be the effect you're looking for depending on what kind of load times you're seeing.

Answer 3

Here is a nice example doing this using Ajax Control Toolki

<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
  runat="server" TargetControlID="up">
     <Animations>
        <OnUpdating> ... </OnUpdating>
        <OnUpdated> ... </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

*  TargetControlID - ID of the UpdatePanel  whose updates are used to play the animations (this is also the default target of the animations)
* OnUpdating - Generic animation played as when any UpdatePanel begins updating
* OnUpdated - Generic animation played after the UpdatePanel has finished updating (but only if the UpdatePanel was changed)

Also you may watch this video

Answer 4

this should help http://www.asp.net/Ajax/Documentation/Live/tutorials/ProgrammingUpdateProgress.aspx