Cyclic update of a container in ASP.NET Core MVC

Question

I'm trying to create a cyclic updating container in ASP.NET Core MVC. That's how it look like

And here is the source code:

AdminLTE

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.

• One solution for me was to auto-update the whole page, but it's not ok.
• Second solution was to use Ajax to call the Index Controller, where I update the model's value from database each time controller is called. But this does not working, because to figure it out, the page must be refreshed. Not ok.

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

So how can I make this informative section to get updated in an automatic cyclic mode?

<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

One option is to use JavaScript function setInterval() and make an update per each desired time interval. See here for details and basic example: JavaScript setInterval

On each time interval trigger an ajax call to a separate method in your controller that returns a partialview (so just the html code you want to update) and append it to your page (make sure you first empty the target container):

example 1: JavaScript append html

example 2 (partialview/ajax update): 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.

To achieve the requirement of updating particular content automatically based on the latest data from database, you can try:

1. If you'd like to make request to backend using Ajax etc to get data and update the DOM with retrieved data automatically, as @TheMixy mentioned, you can try to call your function repeatedly using setInterval() method.

2. Besides, you can try to integrate ASP.NET Core SignalR in your project, which could help implement real-time web functionality that enables server-side code to push content to clients instantly.

   You can call client methods to push data from server to all connected clients while you add/update orders from your backend code, then update the content on client side once it received the data.