Q: ASP MVC sb-admin 2 Bootstrap template: Panel content refresh I'm wondering what would be a good approach to refresh the panel content, e.g., for the tasks panel shown below.
The value (amount of tasks) is "requestable" through an API. What I want to do is to GET uri/api/tasks which returns a JSON array (list of all tasks) and update the amount of tasks.

The corresponding div in my Index.cshtml looks as follows:
<div class="col-lg-3 col-md-6">
            <div class="panel panel-green">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-tasks fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">12</div>
                            <div>New Tasks!</div>
                        </div>
                    </div>
                </div>
                <a href="#">
                    <div class="panel-footer">
                        <span class="pull-left">View Details</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>

Unfortunatelly I don't know where to put my API calls and how to invoke them.

A: If you want to keep things simple i would use ajax and an onload function from jquery
with your c# method
//this will return a list of strings in json format.
public ActionResult GetData()
{
//array of string 
String[] array = {"Bob","Joe","Dave"};
 return json(array,JsonRequestBehaviour.AllowGet);
}

Then in the view 
<script>
$(document).ready(function(){
     $.ajax({
        url: "/Controller/GetData",

        method: 'GET',
        contentType: "application/json; charset=utf-8",
        success: function (result) {

        $.each(result,function(key,value){
        //append the dom in here for each result in the array.
        });

        },
        error: function (result) {
        }
});
});
</script>

