Question

I am making a web app in asp.net using c# that collects a lot of information from http web services at one time. Since this data collection process takes 10-20 seconds, I want to display a small loading frame with a small rotating image.

To make this happen on one page, I have a div called loadingdiv for which I set the Visible property of to false during PageLoad. When my “find movies” button is pressed, the c# code is supposed to hide the content that was originally on the page, show the loading image while loading the web service information in the backend, then hide the loading image and bring up the data display div.

If I comment out the class that loads the data from the webservices, this works fine. But as soon as I add my web service information it completely skips over the loadingdiv.Visible = true line and just does the 10-20 second operation.

Here’s the relevant lines of code.

 protected void btnFindMovies_Click(object sender, EventArgs e)
 {
    //Hides the main content that contained search options for movies
    thisarticle.Visible = false;
    articlediv.Visible = false;
    lblGenres.Visible = false;
    ratingdiv.Visible = false;
    List<int> gList = new List<int>(); //Genre List

    /* Other code that goes through checkboxes to find out which genres 
    to search for in the movie search */

    string title = "Movie Title Here"; 
    Page.Title = title;

    loadingdiv.Visible = true; //Shows loading div before completing search

    MovieSearch search = new MovieSearch(gList);  //Intensive web service use 
    (10-20 seconds)
    loadingdiv.Visible = false; //removes the loading div from the screen
}

How can I get the loadingdiv to show up while my web service operations are going through?

Answer 1

Everything in that method happens before any response is served to the user. This means that the following happens:

• The user clicks your button.
• A request is sent to the server and a postback occurs.
• During the postback, btnFindMovies_Click is fired. You set Visible = true, wait for the web services to return their information and then set Visible = false.
• The response is served to the browser.

Because this is all done on the same request, nothing is returned to the browser until all of this is done, which effectively eliminates the loadingdiv.Visible = true; line entirely.

If you want a loading div to show while some server-side code issues requests to web services, you will have to use AJAX to make these calls asynchronously and use Javascript to hide/show the loading div accordingly.

The following looks like a useful introductory guide to AJAX:

http://www.simple-talk.com/dotnet/asp.net/ajax-basics-with-jquery-in-asp.net/