Creating a AJAX Refresh bar

Lets Create a AJAX Loading Bar for a ASP.NET  web application .Its a Really simple design with few lines of code ..

You will need some pre requisites for this design .Im using Microsoft Visual Web Developer 2008 Express Edition even you can use  Microsoft Visual Studio

• First Create a AJAX enabled web site
• Create a ASP Page (AJAX Web Form)
• Insert Update Panel from AJAX Extensions in toolbox
• Then Place the Controller inside that that panel (Example – If you want to load in a button click place a button)

Coding

To see the animation visible to some time we have to create a artificial network delay.

Private sub Buttion1_click()

System.Threading.Thread.Sleep(3000)

‘time is in milliseconds

End sub

Coding 2

Next step is we must visually show the loading bar.

for this we need a Animated Gif File..Like this

You can easily create these kind of animations form  http://www.ajaxload.info/

• To the AJAX Form internet the Update Progress Control AJAX Extensions in toolbox
• Inside that panel place the Animated GIF File

I think you are done !

Here a Screen cap from a sample project used AJAX Refresh bar.

Tagged .net, AJAX, ASP, Tutorials, Web Development