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.
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
showDiv() on client click.
<td align="left" colspan="2">
<span runat="server" id='myHiddenDiv' style='display:none'>
<img runat="server" src="images/progress-wheel.gif"
<b class="upload" style="color:#8CC63E;font-size:x-large;">
<asp:TextBox ID="TitleTextBox" runat="server"></asp:TextBox>
ControlToValidate="TitleTextBox" ErrorMessage="Please enter title"
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" OnClientClick="return showDiv();" />
WebForm_DoPostBackWithOptions function is the ASP.NET 2.0 system that internally calls
Page_ClientValidate. The parameters for the object
function WebForm_PostBackOptions(eventTarget, eventArgument,
validation, validationGroup, actionUrl, trackFocus, clientSubmit)
In our case, we have set
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.
var uploadButtonId = ''
uploadButtonId, "", true, "", "", false, false));
var validated = ValidatorOnSubmit();
if(validated == true)