时间戳

首页 > 解决方案 > ASP.NET Core MVC 中容器的循环更新

c# - ASP.NET Core MVC 中容器的循环更新

问题描述

我正在尝试在 ASP.NET Core MVC 中创建一个循环更新容器。这就是它的样子

在此处输入图像描述

这是源代码：

管理员LTE

对于图中的示例，如果来自数据库，这里有 151 个新订单，当这部分面板自动更新时，该值将是 151。

<script type="text/javascript">
    function updateModelData() {
        setInterval(updateModel, 3000);
        var i = 0;
        function updateModel() {
            $.ajax({
                url: "/Home/Index",
                type: "GET",
                dataType: "json",
                success: function (response) {

                    if (response.data.length == 0) {
                        // EMPTY
                    } else {
                        var obj = jQuery.parseJSON(response.data);
                        console.log(obj);
                    }
                }
            });
        }
    }
    updateModelData();
</script>

那么我怎样才能让这个信息部分以自动循环模式更新呢？

<section class="content">
    <!-- Small boxes (Stat box) -->
    <div class="row">
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua">
        <div class="inner">
            <h3>@Model.doctors_count</h3>
            <p>Doctors</p>
        </div>
        <div class="icon">
            <i class="fa fa-users"></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">
            <h3>@Model.nurses_count<sup style="font-size: 20px"></sup></h3>
            <p>Nurses</p>
        </div>
        <div class="icon">
            <i class="fa fa-users"></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">
            <h3>@Model.patients_count</h3>
            <p>Patients</p>
        </div>
        <div class="icon">
            <i class="ion ion-person"></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">
            <h3>65</h3>
            <p>This Month</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>
    <!-- /.row -->

标签： c#asp.net-core-mvc

解决方案

一种选择是使用 JavaScript 函数setInterval()并按每个所需的时间间隔进行更新。有关详细信息和基本示例，请参见此处：JavaScript setInterval

在每个时间间隔触发对控制器中单独方法的 ajax 调用，该方法返回部分视图（因此只是您要更新的 html 代码）并将其附加到您的页面（确保首先清空目标容器）：

示例 1：JavaScript 附加 html

示例 2（部分视图/ajax 更新）：使用部分视图更新

推荐阅读