Why doesn't my ASP.net page display until fully finished?

I'm using .net 2.0. This is a project that I have taken over for another developer.

I have a aspx page that can take a long time to display under certain condition due开发者_StackOverflow社区 to loading items from the database. What I want to do is to show a loading animation or something to let the user know the page is loading, so I tried to use the JQuery .ready() method, however, I can only see the results after the page is fully loaded. What I mean is that when I click on a link to my aspx page, nothing is drawn until all of the work is done. The work is done on the server side in Page_Load.

I'm looking for best practices of having the page display, even if all the user sees is an animation. Right now it appears as if something is wrong because it can take a while (over 15 seconds in some cases) before the page draws.

You might be able to use Asynchronous Pages to do this

http://msdn.microsoft.com/en-us/magazine/cc163725.aspx

One way to take the page loading code out and place it in a image button with a transparent image.

Then wrap any sections of the page that will be updated in an update panel.

Once the page has loaded you can click the hidden button with jQuery to load the data, and the update panel will handle a loading icon if you have set up a progress template.

asp:

<asp:UpdatePanel runat=server id=upMain>
 <ContentTemplate>
   <asp:gridView runat=server id=gridView>
   <asp:ImageButton runat=server id=hiddenLoadButton>
 </ContentTemplate>
</asp:updatePanel>

in button click:

protected void hiddenbuttonclick(object sender, eventargs args)
{
  gridview.DataSource = yourDataSource;
  gridView.DataBind();
}

jQuery:

$(document).ready(function(){

    $("#hiddenLoadButton").click();

});

Another option would be to use an ajax method to load the data.

In the flow, you are coming to the database call prior to the JQuery method passing all of its information to the page. There are two solutions to this, I can see:

1. Get the data via AJAX after the page load
2. Explicitly control the HTTP Response stream and flush after the JavaScript is sent

Without seeing the code, I cannot offer a specific answer to your issue.