<script>
    $(document).ready(function () {
        $("#section1").load("/Test/Section1");
        $("#section2").load("/Test/Section2");
        $("#section3").load("/Test/Section3");
    });
</script>

<div id="section1" style="width:100px; height:100px; background-color: red;">

</div>

<div id="section2" style="width:100px; height:100px; background-color: green;">

</div>

<div id="section3" style="width:100px; height:100px; background-color: yellow;">

</div>

public class TestController : Controller
    {
        // GET: Test
        public ActionResult Index()
        {
            return View();
        }

        public async Task<ActionResult> Section1()
        {
            await Task.Factory.StartNew(()=> {
                Thread.Sleep(3000);
            });
          
            return new ContentResult() { Content = "Section1" };
        }

        public async Task<ActionResult> Section2()
        {
            await Task.Factory.StartNew(() => {
                Thread.Sleep(3000);
            });
            return new ContentResult() { Content = "Section2" };
        }

        public async Task<ActionResult> Section3()
        {
            await Task.Factory.StartNew(() => {
                Thread.Sleep(3000);
            });
            return new ContentResult() { Content = "Section3" };
        }
    }