Monday, March 26, 2012

Progress bar appear when submiting form

I have a contact us form that sends an email.

I want to use an update panel which allows me to do the following:

When the user clicks the send button, form dissapear and progress bar is show for a couple seconds and then notification to the user if email sent ok or not.

I have implemented this using updatepanel and updateprogress but 99% of the time the updateprogress is not displayed because the command is carried out so quick. I would like the progress bar be displayed and give the user the feel of the email being sent. I have the form in a standard panel. How can i make sure the form disappear and updateprogress is displayed?

I have looked at using the updatepanelanimator but it seems difficult to use and think i can do what i want to do without it, correct?

Appreciate any help.

You could approach this a number of ways.. here is probably the quickest and dirtiest way but I don't recommend it:

Add:

System.Threading.

Thread.Sleep(2000);

To your server side processing, this will block the current thread for a specific number of milliseconds forcing the browser and UpdateProgress to wait for the response. Please don't do this. :)

A better way to do this would be to use an animation sequence to give the user the visual feedback that something has taken place, in this case that an email has been sent. The ASP.NET Ajax Animation Toolkit works excellent for this because you can specify the duration for which animations will run... so even if your UpdateProgress and UpdatePanel have completed processing, you could still have an animation still playing before the user moves on to a new action.

Try the animation framework, it's quick to pickup and has some very nice tutorials:http://ajax.asp.net/ajaxtoolkit/Walkthrough/UsingAnimations.aspx

Cheers,
Al

No comments:

Post a Comment