AJAX UpdateProgress Image(GIF) and Text in ASP.NET C#

Hi, today I will show you how use AJAX Update Progress Bar to show loading process. You can show this with a loading GIF image or any text. Its better to use an image. You can download any one, as various kinds of GIF images are available in Google or you can create your own one.

Step #1 :
So, first off all create a new project and add  a new WebForm. Add a Script Manager at the top of the form before it flushes out from you mind and get an error. After adding take an Update Panel and within that UpdatePanel take a ContentTemplate. Each and every HTML and ASP controls have to be design within the ContentTemplate if you are putting them within UpdatePanel.

Step #2:
Take a new Button and a Label to execute the operation. And then add the most important thing for this article, the UpadateProgress. You will get this tool in the tool box within AJAX Extensions.

 

Add the UpdateProgress into the page and change the attribute AssociatedUpdatePanelID to the UpdatePanel name. and Dynamiclayout to true.

 AssociatedUpdatePanelID="UpdatePanel1"   DynamicLayout="true"

Step #3:
Here UpdatePanel1 is the UpdatePanel, which I have taken in the project. Place the image of loading into the ProgressTemplate within UpdateProgress with normal HTML image tool or write down the Text you want to display during the process.

Lets check the code how it works.

  
     
     
     
        
             
            Loading...
        
     
  

In the project I haven't done any such work that will took so much time to show the loading message. So I am using Thread.Sleep(3000) to gain a loading time of 3 seconds. Write down the following code into the button click event.

using System.Threading;

protected void btnShow_Click(object sender, EventArgs e)
{
     Thread.Sleep(3000);
     Label1.Text = "done !";
}

Now it should be clear how to show a progress bar (image or text) during  loading of some thing in ASP.NET. Hope it will help you to build your project successful. Happy coding... :)