AJAX Partial Page Load?

Question

I have a page results page (you get there after submitting your search query elsewhere) whit a whole bunch of gridviews for different type of data objects.

Obviously, some of the queries take longer than the others. How can I make each gridview render as soon as it has the data it needs?

This has been tricky for me because it must work on a postback as well as a pageload. Also, the object data sources just fire automatically on page load/postback; I'm not calling any methods programatically to get the data. Will I have to change this?

Answer 1

Could you put the DataGrids inside panels that have their visibility set to false, then call a client-side javascript function from the body's onload event that calls a server side function that sets the visibility of the panels to true?

If you combined this with an asp:updateProgress control and wrapped the whole thing in an UpdatePanel, you should get something close to what you're looking for - especially if you rigged the js function called in onload to only show one panel and call a return function that showed the next etc.

Answer 2

@Gareth Jenkins

The page will execute all of the queries before returning even the first update panel, so he won't save any time there.

The trick to do this is to move each of your complex gridviews into a user control, in the user control, get rid of the Object DataSource crap, and do your binding in the code behind.

Write your bind code so that it only binds in this situation:

if (this.isPostBack && ScriptManager.IsInAsyncPostback)

Then, in the page, programaticly refresh the update panel using javascript once the page has loaded, and you'll get each individual gridview rendering once its ready.