How to load multiple partial view in div asynchronously

Question

Team, I have a view which contains four partial view, which data is independent hence need to load them asynchronously. Div are formed as -

   <div class="col-md-6 partialContent" data-url="/Dashboard/PartialView1">
   </div>
   <div class="col-md-6 partialContent" data-url="/Dashboard/PartialView2">
   </div>

Controller Actions are. (Added thread.speep as wanted to check if it wait or process another method after div.load call)

public PartialViewResult PartialView1()
    {
        PartialView1ViewModel dcVM = new PartialView1ViewModel();
        // business logic code is here
        Thread.Sleep(5000);
        return PartialView("~/Views/Charts/_PartialView1.cshtml", dcVM);
    }
    public PartialViewResult PartialView2()
    {
        PartialView1ViewModel dcVM = new PartialView1ViewModel();
        // business logic code is here
        return PartialView("~/Views/Charts/_PartialView2.cshtml", dcVM);
    }

And finally, loading data into div as -

    $(".partialContent").each(function (index, item) {

    var url = $(item).data("url");
    if (url && url.length > 0) {
        $(item).load(url);
    }
});

So in this case we are expecting both method should be called, immediately but it waits till first methods processing completes.

How can we load all these partial views asynchronously without waiting for other action complete?

Can you please hint/guide?

Answer 1

I guess in your case, server locks requests by session (so session becomes thread safe for writing). If you disable it or make read-only in required actions you can achieve expected result.

Please check link for more details