ASP.NET AJAX Progress Bar: Update from Code Behind

Question

I have an Import function for an Excel spreadsheet within an application. It uses the FileUpload control at the moment. I upload the file, then run an operation on that file. I want to inform the user of the operation being done, and the percentage that is done. I figure that I can take the total number of rows I extracted from the Excel spreadsheet, and continuously divide as I insert each record into the database and update a progress bar.

The problem is that I can't seem to find any solution that updates a progress bar from the Code Behind. I tried using Matt Berseth's solution.

It's very nice to look at, but I can't see to get it working from the Code Behind. Theoretically, I figured that putting a value into a textbox on the page, and setting the onchange to a JavaScript function to set the percentage would work as a test, but even that didn't give me the desired results.

Any suggestions as to how this can be done?

Answer 1

What you should know is that you cannot check the status of a file upload using the standard FileUpload control. What you can do is to upload the file on the server and then connect to it using ODBC and start reading and inserting lines in your database asynchronous (by making a ajax request to a page or using a script service).

As far as the progress bar goes, you should simply use a CSS progres bar (you can find a simple example at: http://css-tricks.com/examples/ProgressBars/).

Then, you should build a script service (using a web serivice) with a method that can return the status of your progress from the server:

Your *.asmx file should contain something like:

[WebMethod]
public int GetStatus()
    {
        int progress = 0; // in percents
        // your server-side code here
        return progress;
    }

Your aspx page should contain something like:

<asp:ScriptManager runat="server" ID="ScriptManager">
 <Services>
    <asp:ServiceReference Path="~/services/import.asmx" InlineScript="false" />
 </Services>
</asp:ScriptManager>

Then, you should be able to call that method from JavaScript periodically (each second for example, using setTimeout) and update the progress bar width with simple JavaScript or jQuery:

var tout, service;

function UpdateStatus() {
    if (tout != null)
         clearTimeout(tout);

    if (service == null)
         service = new namespace.here.serice_class_here();

    service.GetStatus(onSuccess, onFailure);    
}

function onSuccess(result) {
    // update the width of the progress with result (the integer value of the progress)
    progress_bar.style.width = percent + "%";        

    // call the method again
    tout = setTimeout("UpdateStatus()", 1000);
}

function onFailure(error) {
    alert(error.get_message());
}

You could extend your onSuccess JavaScript function and when the progress is complete (returned value is 100%) you could redirect the user to another page or display an info or a button depending on your needs.

I hope this helps!