ASP MVC sb-admin 2 Bootstrap 模板：面板内容刷新

Question

我想知道刷新面板内容的好方法是什么，例如，对于下面显示的任务面板。

值（任务数量）是通过 API “可请求的”。我想要做的是获取返回 JSON 数组（所有任务列表）的 uri/api/tasks 并更新任务数量。

我的Index.cshtml中对应的div如下：

<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>

不幸的是，我不知道将 API 调用放在哪里以及如何调用它们。

Answer 1

如果你想让事情变得简单，我会使用 ajax 和 jquery 的 onload 函数

用你的 c# 方法

//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>