Allow .ASPX page to display before .ASCX control finishes loading?

1
votes

I have an ASP.NET page with one control (.ascx) on it. The page (.aspx) onload assigns some text to a couple labels and passes a product ID to the .ascx control. The .ascx control, onload, takes that product ID from the .aspx page and hits the database several times, does several calculations, etc - basically takes a long time to load.

So when I'm clicking a link to this .aspx page, it is taking 7-10 seconds for the page to load. I've narrowed it down to the calculations on the .ascx control being the culprit and I've optimized the code as much as I can ... but it's still taking too long.

Is there a way to load the .aspx page BEFORE the control loads? (Maybe display a "Loading..." animation? Like used in an UpdateProgress?)

3
c#asp.netuser-controlsascx
You might consider posting the code that takes 7 seconds or so to execute. That is a tremendous amount of time to run some calculations and queries. Sounds like maybe the database needs some better indexes – NotMe

3 Answers

2
votes

You could do this with an UpdatePanel. It will take a little trickery, but try something like this:

1) Put the UserControl in an UpdatePanel.

2) Put a public property on your usercontrol like IsEnabled that it will use to conditionally do nothing or render a "please wait." Set it false from your main page.

3) Add some code in OnInit to your main page:

if (MyScriptManager.IsInAsyncPostback) {
    MyUserControl.IsEnabled=true;
}

4) Add a client script along these lines:

finished=false;
Sys.WebForms.PageRequestManager.pageLoaded(function(sender,args) {
    if (!finished) {
      finished=true;
      __doPostBack('','');
      // you can include the uniqueID of your updatepanel as the first arg 
     // otherwise it will refresh all update panels
    }
});

or with jquery..

finished=false;
$(document).ready(function() {
   if (!finished) {...
   }
});

What this should do is cause an async postback to be initiated immediately after the page is done loading, which will in turn cause the update panel to be refreshed. Since you set it to be enabled when it's in an async postback, it will render itself the 2nd time.

1
votes

The only possible way to achieve this is by setting it up as a separate HTTP resource. At the moment .NET is integrating the control into the page so that it is waiting unti it has everything it needs to respond.

You could do this a multitude of different ways:

  • Web Service that gets called via javascript
  • Seperate page which contains the control (and is hosted within an iFrame to appear to be on the same page)

The best way to do this would be to use an iFrame (or something similar) which will instruct the browser to request the control after the main page has been sent).

1
votes

Personally, I would never use an iFrame to load content on a page - that's more like a hack than anything and plus, iframe == "bad".

But they are right, you won't be able to do anything like what you're looking for.

If the user control DOES NOT have any web controls that cause a postback (or have any form controls that you need to access during a postback), then I would use AJAX to request the data on the server after the page has already loaded and use javascript to display the content on the page.