Bluring the page and displaying gif image when processing.

Question

Hi, I am using c# ASP.NET VS 2005 . I have a functionality where i have to click on a upload button and the data has to be uploaded from selected input file to database.

When i click the upload button its taking atleast 40 sec to upload the data from the file.

I want to display some gif image to the user when the data is being uploaded. I want to disable the page (blur the page) as well, so that the user will not click on any other button when the data is beeing uploaded.

Please suggest some idea.

Thanks,.

Regards, Jebli.

Answer 1

I believe jQuery is a perfect solution for you. Please have a look on these sites - guys have already solved your problem:

This is exactly what you're looking for:

http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/

And these may become handy:

http://www.aspcode.net/Ajax-loading-animation-with-JQuery-and-ASPNET.aspx

http://www.linein.org/blog/2008/11/13/jquery-display-images-text-until-script-is-finished/

Answer 2

Hi Jebli,

You may want to use asp:UpdatePanel as a container for your data upload controls, so then you can apply UpdateProgress overlay as perfectly described here: http://blogs.visoftinc.com/archive/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited.aspx

That would allow you to "grey out" browser window and show an animated GIF, while data is uploaded.

Regards, Kris