ASP MVC sb-admin 2引导模板:面板内容刷新 [英] 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.

该值(任务量)可通过API请求".我想做的就是获取uri/api/tasks，它返回一个JSON数组(所有任务的列表)并更新任务数量.

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.

Index.cshtml中的相应div如下所示:

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>

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

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

推荐答案

如果想保持简单，我会使用ajax和jquery的onload函数

If you want to keep things simple i would use ajax and an onload function from jquery

使用您的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>

这篇关于ASP MVC sb-admin 2引导模板:面板内容刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！