MVC - JQuery - Async call to load dashboard data simultaneously

MVC - JQuery - Async call to load dashboard data simultaneously 

To load dashboard data we should use async method call, so it will not wait for previous method's completion. Means, dashabord data will call simultaneously to load all tiles data.

Below is the example, 

I have created only one method "GetOrders"  for all tiles data, but you have to write different methods as per your requirement.

 HTML

<div class="row">
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua" id="orders">            
            <div class="inner">
                <div id="divLoader" style="display:none;position: absolute"> 
                <img src="~/Content/images/loader.gif" alt="Loader" /></div>
                <h3 id="cOrders">&nbsp;</h3>
                <p>New Orders</p>
            </div>
            <div class="icon">
                <i class="ion ion-bag"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">        
        <!-- small box -->
        <div class="small-box bg-green">
            <div class="inner">
                <div id="divBounce" style="display:none;position: absolute"> 
                <img src="~/Content/images/loader.gif" alt="Loader" /></div>
                <h3 id="cBounce">&nbsp;</h3>
                <p>Bounce Rate</p>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-yellow">
            <div class="inner">
                <div id="divUsers" style="display:none;position: absolute"> 
                <img src="~/Content/images/loader.gif" alt="Loader" /></div>
                <h3 id="cUsers">&nbsp;</h3>
                <p>User Registrations</p>
            </div>
            <div class="icon">
                <i class="ion ion-person-add"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-red">
            <div class="inner">
                <div id="divVisitors" style="display:none;position: absolute"> 
                <img src="~/Content/images/loader.gif" alt="Loader" /></div>
                <h3 id="cVisitors">&nbsp;</h3>
                <p>Unique Visitors</p>
            </div>
            <div class="icon">
                <i class="ion ion-pie-graph"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
</div>

JQuery

<script>
    $(document).ready(function () {

        orders(Math.floor((Math.random() * 100) + 1));
        Bounce(Math.floor((Math.random() * 100) + 1));        
        Users(Math.floor((Math.random() * 100) + 1));
        Visitors(Math.floor((Math.random() * 100) + 1));

        function orders(wtime) {
            $("#divLoader").show();
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetOrders", "Dashboard")',
                data: { type: $(this).attr("data-type"), val : wtime },
                success: function (response) {
                    console.log(response);
                    $("#cOrders").append(wtime);
                    $("#divLoader").hide();
                },
                error: function () {
                    $("#divLoader").hide();
                    alert("Something wrong");
                }
            });
        }

        function Bounce(wtime)
        {
            $("#divBounce").show();
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetOrders", "Dashboard")',
                data: { type: $(this).attr("data-type"), val : wtime },
                success: function (response) {
                    console.log(response);
                    $("#cBounce").append(wtime);
                    $("#divBounce").hide();
                },
                error: function () {
                    $("#divBounce").hide();
                    alert("Something wrong");
                }
            });
        }

        function Visitors(wtime) {
            $("#divVisitors").show();
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetOrders", "Dashboard")',
                data: { type: $(this).attr("data-type"), val : wtime },
                success: function (response) {
                    console.log(response);
                    $("#cVisitors").append(wtime);
                    $("#divVisitors").hide();
                },
                error: function () {
                    $("#divVisitors").hide();
                    alert("Something wrong");
                }
            });
        }

        function Users(wtime) {
            $("#divUsers").show();
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetOrders", "Dashboard")',
                data: { type: $(this).attr("data-type"), val : wtime },
                success: function (response) {
                    console.log(response);
                    $("#cUsers").append(wtime);
                    $("#divUsers").hide();
                },
                error: function () {
                    $("#divUsers").hide();
                    alert("Something wrong");
                }
            });
        }  
    });
</script>

MVC Async Method

public async Task<ActionResult> GetOrders(int val)
        {
            await Task.Run(() =>
            {
                System.Threading.Thread.Sleep(val * 100);
                return Json(new { data = 10 }, JsonRequestBehavior.AllowGet);
            });

            return Json(new { data = 0 }, JsonRequestBehavior.AllowGet);
        }

Enjoy !!!

:)