Display .gif and continue playing while traveling to the server - asp.net

Question

I have a button with which I connected the clientClick event handler and the Click (server) event handler. On clientClick, I would like to display an animated gif, and I would like it to continue to play while traveling to the server. At the moment, the gif is displayed instantly, then the animation "pauses", and then the page reloads. I would like the gif to play right before the page loads.

As you probably can guess, the whole thing is to implement the egg timer function, so that users know that something is happening.

Thank you very much,

Dan

Answer 1

You should use the update panel and on the server side, you need to register this code document.all["slowScreenSplash"].style.display = "none"; .

I have illustrated the syntax of how to register JS from the server side if you use the update panel.

This is a test than an example progressbar.

<DIV ID="slowScreenSplash" STYLE="position:absolute;z-index:5;top:40%;left:15%;" align="center"> <DIV ID="slowScreenSplash" STYLE="position:absolute;z-index:5;top:40%;left:15%;" align="center"> Please wait whilst your request is being processed...
</DIV>

call this event in the buttonclick event.

  document.all["slowScreenSplash"].style.display = "none"; string scriptstring = "alert('Welcome');"; ScriptManager.RegisterStartupScript(this, this.GetType(), "alertscript", scriptstring, true); 

Answer 2

Since you are doing asp.net, I assume you are not implementing a lot of JavaScript or Ajax.

There are AJAX plugins for ASP.NET, and you can use the update container (not 100% sure what it called), and just connect to the events in that.

This is probably the easiest way. You can also read on jQuery, they provide an AJAX method that is very easy to use. Of course, you will need to provide a method on the server that does the processing and returns a response. Then, as soon as you get the answer (the method for this is easily accessible from the jQuery AJAX method), paste the contents into the page and turn off the animation.

If that sounds a lot, just go AJAX to ASP.NET (lookup AJAX Control Toolkit).

Answer 3

I would divide it into three files - your initial form - a page for processing a slow task - a page for displaying the result of the task.

Put the animated gif at the top of the second page, use Response.Flush to move some html back to the browser (this will display and play the gif). When your finished processing Resoponse.Write javascript fragment to redirect the browser to the last page of the process.