Leon Amarant

Download Source Files [7KB]

This took me forever and a day to figure out. Thought it may be worth sharing.

The Requirement

I’m creating a website that, in short, contains a form that allows a user to upload an audio file. Audio files typically go for around 5MB in size. This is what I wanted to do…once a user presses the “Upload Audio” button, the form is first validated using the built in ASP.NET validation controls, then (assuming validation was successful), a”Processing” div would pop up in the middle of the screen while the file was being uploaded. This is typical stuff if you are at all concerned with good usability.

Recap

1. User presses button
2. Form validates via .NET validation controls
3. If form passes validation, display “processing” div
4. Process form
5. Complete

This is very simple to do using static pages (HTML, DHTML, JavaScript, CSS) since all of the validation was performed client side and you could therefore very easily incorporate a little extra javascript to display and position a div when the form was submitted.

Not the case in ASP.NET. In order to do this seemingly simple task, you basically have to jump through a few hoops…there’s client side validation, then server side script, and the “how do you call a client side function from server side scripting” questions.

The Solution

1) Create an aspx page

2) Put this code between the HEAD tags in the page (the css and javascript functions)

<!– Styles to center the div on the screen –>
<style type=”text/css”>
#ProgressBar
{
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-right: outset 1px #ccc;
border-bottom: outset 1px #ccc;
background-color: #ffffff;
text-align: center;
vertical-align: middle;
padding-top: 30px;
padding-bottom:30px;
top: 180px;
visibility:hidden;
} /* center <div> for IE*/
#ProgressBar{width:250px;margin:auto;}/* position div for browsers that have a clue*/
#ProgressBar,[nul]{left:50%;margin:0;margin-left:-125px;position:fixed;}
</style><!– javascript function to display the div after .NET validation –>
<script language=”javascript” type=”text/javascript”>
function ShowProgressBar(){if (typeof(Page_ClientValidate) == ‘function’)
Page_ClientValidate();
if (Page_IsValid){
document.getElementById(“ProgressBar”).style.visibility=”visible”;
}
return true;
}
</script>

3) Place this in the BODY (this is the actual div we are going to display)

<div id=”ProgressBar”>
<asp:Image ID=”Image1″ runat=”server” ImageUrl=”~/ajax-loader.gif” Height=”32″ Width=”32″ AlternateText=”Processing” />
</div>

4) Create your form in the BODY with .NET Validation components (like this)

<asp:RequiredFieldValidator
ID=”RequiredFieldValidator1″ runat=”server”
ErrorMessage=”- TextBox1 is Required”
ControlToValidate=”TextBox1″ /><br />
<asp:RequiredFieldValidator
ID=”RequiredFieldValidator2″ runat=”server”
ErrorMessage=”- TextBox2 is Required”
ControlToValidate=”TextBox2″ /><br />
<asp:RequiredFieldValidator
ID=”RequiredFieldValidator3″ runat=”server”
ErrorMessage=”- TextBox3 is Required”
ControlToValidate=”TextBox3″ />
<br /><br />
TextBox1: <asp:TextBox ID=”TextBox1″ runat=”server” /><br />
TextBox2: <asp:TextBox ID=”TextBox2″ runat=”server” /><br />
TextBox3: <asp:TextBox ID=”TextBox3″ runat=”server” /><br /><asp:Button ID=”Button1″ runat=”server” Text=”Go to Google.com” OnClick=”SubmitForm” OnClientClick=”ShowProgressBar()” />

Notice: the “OnClientClick” property in the asp:button tag. This calls the javascript function we created FIRST. Then, assuming that function returns TRUE, the .NET server side validation functions are executed….then the form is submitted.

5) Lastly…in order to mimic a long form submission paste this between your server side SCRIPT tags

Sub SubmitForm(ByVal s As Object, ByVal e As EventArgs)
’sleep the system to mimic download
System.Threading.Thread.Sleep(5000)
Page.Response.Redirect(“http://www.google.com”)
End Sub

Try it for yourself…..