How to use UpdateProgress control in Asp.Net and C Sharp

Category > ASP.NET || Published on : Friday, August 22, 2014 || Views: 5660 || How to use UpdateProgress control in Asp.net and C Sharp


In this post, we are discussing Asp.Net Ajax control "UpdateProgress control" in Asp.net and C Sharp.

If you are .Net developer then you have faced One of the problems with Ajax, problem is that is the fact that since it is asynchronus and in the background, the browser will not show or dispaly you any status or any background progress and with fast Web 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 and gets frustrated.

Luckliy, ASP.NET AJAX solves this problem for us, with a great control called "UpdateProgress". It will use your own template to show that an asynchronus method is working. you can look at the following example, which will show the control in action. I will be explained after that.

first create the a empty Asp.Net Web solution and then add a new web form into that solution and write the below codes

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>



    UpdateProgress control


   
       
       
           
                Loading...
           

       

       
           
               
           

       

   

Some Explanation: This simple example will show you how easy it is to use the UpdateProgress control. Once the button is clicked, the script sleeps for 5 seconds and the "Loading..." text message will be displayed on our page. You can use anything in the ProgressTemplate, including ordinary HTML markup and other controls(as you wish). A common use is an animated GIF, positioned strategically on the page using CSS positioning.

after that write the following method should be added to our CodeBehind file:

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


We can place multiple "UpdateProgress" controls on the page, and by using the "AssociatedUpdatePanelID" property, but you can make sure that the UpdateProgress is only shown when a certain UpdatePanel is updated.

Conclusion:
The DynamicLayout property is nice to know as well. It tells whether or not the page should reserve space for your progress control. If it's set to true, which is the default, the space is dynamic, hence it's not reserved, but taken when the control is shown. If you wish to reserve the space, set this property to false. To see the difference, add the property to our example and change it back and forth.

If some of your postbacks are fast, the UpdateProgress will only be shown for a very short amount of time, resulting in a blinking behavior, which may confuse your users. For that reason, you may specify a minimum amount of time to occur before showing the progress control. This can be done with the DisplayAfter attribute. Specify a number of milliseconds to elapse before showing the progress control, e.g. 2000 if you wish to wait for 2 seconds.

Download Source Codes