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

Question

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

这里是源代码：

AdminLTE

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

• 对我来说，一个解决方案是自动更新整个页面，但这不行。
• 第二种解决方案是使用 Ajax 调用索引控制器，每次调用控制器时我都会从数据库中更新模型的值。但这不起作用，因为要弄清楚，必须刷新页面。不行。

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

Answer 1

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

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

示例 1：JavaScript append html

示例 2（部分视图/ajax 更新）：Update with partial view

Answer 2

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

要实现根据数据库中的最新数据自动更新特定内容的要求，您可以尝试：

1. 如果您想使用 Ajax 等向后端发出请求以获取数据并使用检索到的数据自动更新 DOM，正如 @TheMixy 所提到的，您可以尝试使用 setInterval() 方法重复调用您的函数。

2. 此外，您可以尝试将ASP.NET Core SignalR 集成到您的项目中，这有助于实现实时网络功能，使服务器端代码能够立即将内容推送到客户端。

   当您从后端代码添加/更新订单时，您可以调用客户端方法将数据从服务器推送到所有连接的客户端，然后在客户端收到数据后更新内容。