How can we load multiple partial views on single view between specific time period?

Question

I have multiple partial view on my single view page. Partial views load dynamically. And I want partial views load 1 by 1. Is it possible to do so?

Answer 1

In you View, keep three Divs and assign the Url details in some attribute like below.

Sample HTML

<div id="Div1" attr-Url="@Url.Action("ActionName", "ControllerName", 
                                                    new { area = "Area Name" })">
</div>

<div id="Div2" attr-Url="@Url.Action("ActionName", "ControllerName", 
                                                    new { area = "Area Name" })">
</div>

<div id="Div3" attr-Url="@Url.Action("ActionName", "ControllerName", 
                                                    new { area = "Area Name" })">
</div>

Now, you can use Success CallBack of Load Event.

JQuery

$(document).ready(function () {
    var url = $('Div1').attr('attr-Url');
    $('Div1').load(url, function () {

        //Success callback
        url = $('Div2').attr('attr-Url2');
        $('Div2').load(url, function () {

            //Success callback
            url = $('Div3').attr('attr-Url3');
            $('Div3').load(url, function () {

                //Success callback
            }); 
        });
    });
});

If you notice the above code. Once the first partial view is loaded successfully, Second Partial View starts to load and sequentially third.

Hope this will help you...

Answer 2

This approach may be of use to you:

Render Partial Views using JQuery in MVC3

It uses jquery and .load(), to call an action that renders your partial view as html and returns it to the javascript, that you'd later place wherever you desire.

UPDATE:

If you want to load them in a sequence, one after the other, you can use the complete callback of jquery's load() to chain one after the other.

If you want to have them load at specific times or intervals, you can use javascript's setTimeout