Progress bar for a long running upload/task

• Download source code - 5.39 KB

Introduction

In most projects, we would either allow the user to upload files or long running tasks to be performed. It would be great if we could communicate to the user that there is some process happening in the background, with a progress bar.

Background

I searched the web to get some kind of help, and at last found this useful link which shows an easy-to-implement, cross-browser technique for displaying an animated progress GIF while a long running method is going on in your ASP.NET page. This code would help to implement a cross-browser technique for displaying an animated progress GIF while a long running method is going in your ASP.NET page, which actually satisfied my requirement. But there was a small issue: this animated GIF was shown even when ASP.ENT validations failed on the page. The requirement was to show this animated GIF only when the validations succeeded. The next section explains how this problem was addressed.

Using the code

The code below contains the .aspx controls used in the page. The span element is hidden. The span element contains the animated GIF, the TextBox, and the RequiredFieldValidator to test validation. The button for upload calls the JavaScript function showDiv() on client click.

<table>
<tr>
    <td align="left" colspan="2">
        <span runat="server" id='myHiddenDiv' style='display:none'> 
            <img runat="server" src="images/progress-wheel.gif" 
               id='myAnimatedImage'/>
            <b class="upload" style="color:#8CC63E;font-size:x-large;"> 
            Uploading....
            </b>
        </span> 
    </td>
</tr>
<tr>
    <td>
        Title:
    </td>
    <td>
        <asp:TextBox ID="TitleTextBox" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
        ControlToValidate="TitleTextBox" ErrorMessage="Please enter title" 
        runat="server"></asp:RequiredFieldValidator>
    </td>
</tr>
<tr>
    <td>
        Select File
    </td>
    <td>
        <asp:FileUpload ID="FileUpload1" runat="server" />
    </td>
</tr>
<tr>
    <td colspan="2">
        <asp:Button ID="Button1" runat="server" Text="Button" 
        onclick="Button1_Click" OnClientClick="return showDiv();" />
    </td>
</tr>
</table>

The code snippet below contains the JavaScript code to enable the progress bar GIF when the upload is taking place. When the user clicks the upload button, the showDiv() JavaScript method gets executed. The WebForm_DoPostBackWithOptions function is the ASP.NET 2.0 system that internally calls Page_ClientValidate. The parameters for the object WebForm_PostBackOptions() are:

function WebForm_PostBackOptions(eventTarget, eventArgument, 
         validation, validationGroup, actionUrl, trackFocus, clientSubmit)

In our case, we have set eventTarget to uploadButton, client side validation to true, and there is no actionUrl, so this will be a postback in the current page.

new WebForm_PostBackOptions(uploadButtonId, "", true, "", "", false, false)

Once the above code gets executed, we can find out whether the client-side validation was a success or failure, by calling var validated = ValidatorOnSubmit();. In case all client-side validations are true, then we can use the setTimeout method to make the DOM reset the src property of the image after 200ms. So when you click the upload button or long running methods, the image will be shown until the postback returns and the page is reloaded. Once the page is reloaded, the animated progress bar will disappear.

<script language="javascript">
function showDiv() 
{
    var uploadButtonId = ''
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(
       uploadButtonId, "", true, "", "", false, false));

    var validated = ValidatorOnSubmit();

    if(validated == true)
    {
        document.getElementById('').style.display ="";
        setTimeout('document.images["myAnimatedImage"].src = 
                           "images/progress-wheel.gif"', 200); 
    }     
} 
</script>

References

• ASP.NET Animated GIFs and Long Running Processes