Post
Ask Question

UpdateProgress Control in AJAX

One of the problems with Ajax, is the fact that since it's asynchronus and in the background, the browser will not show you any status. With fast servers and fast methods, this is not a big problem, but whenever you have a method which takes up a bit of time, the user is very likely to get impatient. Fortunately, ASP.NET AJAX solves this problem for us as well, with a nice control called UpdateProgress. It will use your own template to show that an asynchronus method is working. Have a look at the following example, which will show the control in action. It will be explained afterwards. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head runat="server">  
  5.     <title>UpdateProgress control</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.         <asp:ScriptManager ID="ScriptManager1" runat="server" />  
  11.         <asp:UpdateProgress runat="server" id="PageUpdateProgress">  
  12.             <ProgressTemplate>  
  13.                 Loading...  
  14.             </ProgressTemplate>  
  15.         </asp:UpdateProgress>  
  16.         <asp:UpdatePanel runat="server" id="Panel">  
  17.             <ContentTemplate>  
  18.                 <asp:Button runat="server" id="UpdateButton" onclick="UpdateButton_Click" text="Update" />  
  19.             </ContentTemplate>  
  20.         </asp:UpdatePanel>  
  21.     </form>  
  22. </body>  
  23.   
  24. </html>  
The following method should be added to your CodeBehind file: 
  1. protected void UpdateButton_Click(object sender, EventArgs e)  
  2.   
  3.  {   
  4. System.Threading.Thread.Sleep(5000);   
  5. }