Partial rendering after page loaded

Question

I have a page that contains some usercontrols. I would like to load these usercontrols after postback like an ajax rendering.

Each usercontrols display a list from database and I dont want the user to wait while server code builds up the response I think it will be useful if the page is displayed for the user and after the usercontrols are loaded through an ajax request.

Is there an exist solution in ASP.NET MVC? Is there an exist solution for this problem?

thanks advance: l.

Answer 1

Just use jQuery to bind the HTML returned from the action method (which should return a partial view result - e.g the output of the user control/partial):

Controller:

[HttpGet]
public PartialViewResult GetSomeData()
{
   var data = somewhere.GetSomething();
   return PartialView(data); // partial view should be typed to data.
}

jQuery:

$(document).ready(function() {
   $.get('/home/getsomedata/', function(data) {
      $('#target').html(data);
   });   
});

Answer 2

I usually do this way:

In the markup I reserve space for the user control to be loaded like

<div id="i-tabs-5">
    <div style="text-align:right;margin-bottom:6px;">...</div>
    <div id="issueNoteListPlaceholder"></div>
</div>

then on DOM Ready I make an ajax call that return a partial view result and replace the content of the placeholder

$(document).ready(function () {
    loadIssueNotes();
});

function loadIssueNotes() {
    $.ajax({
        type: "get",
        dataType: "html",
        url: '<%: Url.Content("~/Controller/Action") %>',
        data: {},
        success: function (response) {
            $("#issueNoteListPlaceholder").html('').html(response);
        }
    });
}