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

Question

我正在尝试在 ASP.NET 核心 MVC 中创建一个循环更新容器。原来是这样

这里是源代码：

对于图中的例子，如果从数据库中，这里有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 调用控制器中的一个单独方法，该方法 returns 一个局部视图（所以只有 html 您要更新的代码）并附加它到您的页面（确保您先清空目标容器）：

示例 1：JavaScript append html

示例 2（partialview/ajax 更新）：Update with partial view

Answer 2

For the example in the image, if from database, here are 151 New Orders, when this part of panel is auto-updating, the value will be 151.

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

如果您想使用 Ajax 等向后端发出请求以获取数据并使用检索到的数据自动更新 DOM，如@TheMixy 所述，您可以尝试使用 setInterval() 方法重复调用您的函数。
此外，您可以尝试在您的项目中集成ASP.NET Core SignalR，这将有助于实现实时网络功能，使服务器端代码能够将内容即时推送到客户端。

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

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

Cyclic update of a container in ASP.NET Core MVC

c#

asp.net-core-mvc