Real-Time Progress Bar With ASP.NET AJAX

Due to the disconnected nature of the web, developers have often wondered how to display certain metrics such as a real-time progress bar. This article will show you how to easily build a real progress bar that actually reports progress of a process running on the server using ASP.NET AJAX.
Our Scenario
First, let's define our scenario so that we're all on the same page. We'll pretend that we have made a portal (web application) that allows the local IT administrators to run a task on each computer in the office. Since this task takes a variable amount of time, they want to see a real-time progress bar showing how much further the task has to be done.

Now, I don't want to lose you in the scenario, so I'll tell you up front that we are going to completely fake the "run some code on another machine" stuff. Try to keep focus on the fact that we are talking about using ASP.NET AJAX and how to report progress cleanly back to the client.

Our Needs vs ASP.NET AJAX
Let's talk about some of our needs, and how they are solved by ASP.NET AJAX. First of all, like we mentioned before the nature of the web is 'disconnected'. This means that once you write your data to the client (in our case the amount of progress that has passed), the connection is closed, so you can't update values later in the same request).

We will solve this need by implimenting a "polling" architecture by consuming an embeded webservice every second. This may seem like a heavy amount of data being transfered, but it's not. This is because consuming web services in ASP.NET AJAX is a very light weight request as it is not posting or rendering the entire page. As a side note, this is different than when you simply wrap your site in an "UpdatePanel", which *will* upload the entire view state of the page.

The second need we will have is to perform a custom action when the progress is updated. For simplicities sake, we're just going to display the current progress percentage on the page. Instead of messing up each page with a lot of JavaScript, we'll encapsulate the client code into a custom "script control" that has a method we can tap into to perform our desired functionality.

ScriptControls are just regular WebControls. The difference is that they use the ASP.NET AJAX framework to associate JavaScript code with the rendered control. Think about it as if it's a "code-behind" file... that's not "behind", but rather on the client.

To get ASP.NET great offer please visit our website ASP.NET 3.5 Hosting Australia