'Loading' web page for async call

Question

I have a simple web page in ASP.NET / C#. Currently to fully render the data I require calling a block of code that runs on background threads and can take multiple minutes to complete. I've got it to the point (using the async attribute on the page declaration) to execute and return fine with the html once it's done. What I'd like it to do is allow me to return immediately with a 'loading page' of some sort and then have that page be updated when the background work has been completed. Right now I get nothing on the page while the background work is being processed. Any ideas on the best way or clever way to do that would greatly be appreciated!

Thanks,

Sieg

Answer 1

There are many ways to implement what you describe using Ajax but if you want to keep it really simple you can simply Flush() your response with some loading screen before you start the long running tasks:

<div>
    Loading..
    <% Response.Flush(); %>
    <% System.Threading.Thread.Sleep(5000); %>
    Done!
</div>

Answer 2

What you want is called HTTP Server Push or HTTP Streaming or Long Polling. Depending on how it's done.

There are lots of examples on the web, and also articles that explain the issues in depth. I'd begin by researching those.

You can also check out this SO question on HTTP Streaming...

http://stackoverflow.com/questions/1112413/cross-browser-implementation-of-http-streaming-push-ajax-pattern

There's a link to a great intro article in there.

Or this one with an example of Long Polling

http://stackoverflow.com/questions/333664/simple-long-polling-example-code

or

http://stackoverflow.com/questions/tagged/long-polling

Hope this helps.

Answer 3

I agree with the comments posted above.

I would and have however implement the "processor" as a separate page using a ashx (handler) as these are really simple to call and poll from javascript and you simply code the process request event feeding stuff in to the response stream.

I'd love to show you an example on my site but my host has decided to have a week off running my site whilst they update .net on their servers (s you can imagine im not particularly pleased with this).

Essentially though in my case I have a page that relies on data from: The bbc google amazon youtube some other random sites.

The page is returned to the user and the individual controls on the page then make ajax calls back to the server for their parts.

The default content for the tags in which the fed back data will be loaded in to is a simple animated gif image that looks much like a flash or silverlight loading circle.

Once the data comes back the gif is replaced with the server fed content.

This means the client sees "loading" and the server is busy handling everything (seemingly syncronously from its point of view) the client needs.

It's a clean user experience and the code is really simple.

I tripped over the idea when looking at how to do file uploading using silverlight.

Basic concept:

1. ajax call to "ashx". (maybe 10 lines of javascript)
2. server processes request. (depends on complexity of request, variables passed using querystring)
3. response populates 1 element on otherwise complete page. (ajax cllback does this)

Hope this helps :)