There are many asp.net progress bars out there which are much prettier than this, but what I wanted was a generic solution to the problem where I have a long running operation in the background and I want to display a progress bar AND a running text info box, which can be updated as the background server side operation progresses.
Download Source : ajax_progressbar_with_text_feedback.zip
Rather than make a control, I have a generic page to do the trick. Since I can use the same page for all my large executions, there is no real advantage to having a control, unless of course we want to reuse the control in another site. Although even in this case, I can just copy the generic page. I find this approach more flexible then the control. Most of the logic is in the base class, which can be stored in a reusable common DLL. Of course for high traffic sites, we need to be careful about abusing the session, but for 99.9% of websites this is not an issue. It is also unlikely that many users are simultaneously performing an expensive operation requiring AJAX.
The idea is to inherit from the base class AsyncExecuteBase and override the Execute method.
public virtual void Execute() {
Feedback.AddFeedbackLine("Starting Processing, sleeping 3s ", 0);
Thread.Sleep(3000);
// ... update the information text and percent complete as we go
Feedback.AddFeedbackLine("completed step 1 of 3, sleeping 3s ", 20);
Thread.Sleep(3000);
Feedback.IsComplete= true;
}
Before calling the page, the class is stored in the session variable. When the button execute is called, we retreive the instance
var action = (AsyncExecuteBase) Session["ExecMethod" ];
The code is straightforward and simple the only other subtle point is that when reading and writing the Feedback I use a lock, to avoid partially updated strings.
Also note that normally the session variable would be set on another page, with the class implementing AsyncExecuteBase and then the user is redirected to the execution page, so the following code is only for the demo.
Session["ExecMethod"] = new AsyncExecuteBase(); // In practice this is set on another page which then redirects to this page for execution.
In a case where we want the text box with running information, we probably don't mind redirecting the user to another page. Also note that the feedback is html so on completion we can add a link for the user to click. In my applications this page inherits from the master page which provides the menus, headers and footers.
The progress bar is the simplest possible. It uses pure html and is 2 cell table. where the increasing width of the cell gives the progress information. A much more esthetic progress bar is available here, but it does not have the possibility to update text. at some point in the future, I might combine the two. Let me know if you implement this before me!:
http://mattberseth.com/blog/2008/05/aspnet_ajax_progress_bar_contr.html