UpdateProgress with an UpdatePanel

Question

I want to show the UpdateProgress on page A when a user clicks on the "Next" button to go to next page. The next page is Page B, which has heavy data loading.

When the button is clicked, it doesn't show the UpdateProgress.

What's missing from this code, and how can it be made to show?

<asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate >
       Please wait ...
    </ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
   <Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnNext" EventName="Click" />
   </Triggers>                                    

   <ContentTemplate>                                          
      <asp:Button ID="btnCancel" runat="server" TabIndex="1" Text="Cancel"onclick="btnCancel_Click" />                                    
      <asp:Button ID="btnNext" runat="server" TabIndex="2" Text="Next" onclick="btnNext_Click" />
   </ContentTemplate>                                 
</asp:UpdatePanel>

Answer 1

Try setting DisplayAfter to a very small value to make the progress indicator appear immediately, e.g.:

<asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="1">

Answer 2

Couple of things to try:

1) Move the UpdateProgress control inside the UpdatePanel

2) Remove the AssociatedUpdatePanelID attribute from the UpdateProgress tag

I'm banking on Option 1 doing the trick.

EDIT

Here is a non-ProgressTemplate way, using client-side event handlers:

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function BeginRequestHandler(sender, args)
{
     // some code to show image, e.g:
     document.getElementById('somedivwhichasimage').className = 'show';
}

function EndRequestHandler(sender, args)
{
     // some code to hide image, e.g:
     document.getElementById('somedivwhichasimage').className = 'hidden';
}
</script>

Answer 3

Add this code on the code behind of this page.

 protected void btnNext_Click(object sender, EventArgs e)
 {
     System.Threading.Thread.Sleep(3000);
 }

Hope this helps!!

Edit: Follow this link: http://msdn.microsoft.com/en-us/library/bb386421.aspx

Adding the code from aspx page that I tried and is working,

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>

   <asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1"> 
    <ProgressTemplate > 
     <asp:Label ID="lblwait" runat="server" Text="Please wait.."></asp:Label>
    </ProgressTemplate> 
</asp:UpdateProgress> 

<asp:UpdatePanel ID="UpdatePanel1" runat="server">  
   <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> 
   </Triggers>                                     

   <ContentTemplate>                                           
      <asp:Button ID="btnCancel" runat="server" TabIndex="1" Text="Cancel" />                                     
      <asp:Button ID="Button1" runat="server" TabIndex="2" Text="Next" onclick="Button1_Click" /> 
   </ContentTemplate>                                  
</asp:UpdatePanel> 

Answer 4

try putting UpdateProgress control inside UpdatePanel. and that should work for you.
hope that helps!