Периодически обновляйте страницу .Net Core Razor, используя Ajax

Question

У меня возникли проблемы с создаваемым приложением для мониторинга.Он предназначен для периодического обновления значений для каждого источника данных и отображения статуса и информации для нескольких источников данных, отображаемых в виде карточек на панели инструментов.В области есть несколько источников данных.Мне уже удалось отобразить каждый источник данных как карту, но проблема связана с обновлением каждой конкретной карты источника данных новыми значениями каждые 5 секунд.

В настоящее время мне удается только снова и снова отображать один и тот же HTML-код в виде представления, а это не то, что мне нужно.Мне нужно обновить представление на второй итерации моего ajax-запроса новыми данными для каждого источника данных.Примечание: я использую пример базы данных, чтобы значения не были точно такими, какими они будут в продукт.

Это пример панели инструментов с элементами панели инструментов с несколькими источниками данных внутри.

Так что в настоящее время мой контроллер имеет [Produces("application/json")], в настоящее время возвращает JSON для Dashboard.Панель инструментов содержит список областей, область содержит список элементов dashboardItem (которые являются источниками данных, например, «DataSource1» в JSON), а элемент dashboardItem содержит список частей.Вы можете увидеть структуру класса из JSON.

Я думаю, что создание строк HTML и рендеринг их в виде с помощью javascript, возможно, не лучшая идея, и вместо этого я должен использовать страницы Razor и частичную страницу?Может кто-нибудь, пожалуйста, посоветуйте мне лучший способ рендеринга в представление и обновления значений в представлении без необходимости обновления страницы.Вот почему я подумал об использовании ajax для этого.

 [HttpGet("GetDashboardItemsAsync/{areaName}")]
 public async Task<Dashboard> GetDashboardItemsAsync(string areaName)
 {
     Dashboard dashboard = new Dashboard();

     try
     {
     DashboardService service = new DashboardService(iOptionsSettings);
     dashboard = await service.GetAllAsync(areaName);
     return dashboard;
     }
     catch (Exception ex)
     {
         return dashboard;
     }}

Вот моя страница Razor:

@page
@model IndexModel

@{
    ViewData["Title"] = "Home page";
}


<div class="panels">
    <ul id="panelbar">
        <li class="k-state-active">
            <span class="k-link k-state-selected">Area1</span>
            <ul id="Areas" class="row"></ul>
        </li>  
    </ul>
</div>

Вот мой JQuery:

$(function getDashboardItems() {

    $.ajax({
        type: 'GET',
        url: '/api/GetDashboardItemsAsync/Area1',
        data: { get_param: 'value' },
        dataType: 'json',
        cache: false,
        success: function (data) {
            var areaIndex = 1;

            $.each(data.areas, function (i, item) {
                //HTML for dashboard areas
                var header = `
            <div class="area-card card col-sm-3 p-2">            
                <div class="dashboard-heading">
                    <strong>Title: ${item.title}</strong>
                </div>
                <hr/>
                <div id="areaDataSources` + areaIndex + `" class="card parts-card"></div>
            </div>`;
                $('#Areas').append(header);

                //dashboardItems array
                var dashboardItems = item.dashboardItems;
                var dataSourceIndex = 1;
                getDataSources(areaIndex, dataSourceIndex, dashboardItems);
                areaIndex++;
            });
        },
        complete: function () {
            // Schedule the next request when the current one's complete
            setTimeout(getDashboardItems, 5000);
        }
    });
});

function getDataSources(areaIndex, dataSourceIndex, dashboardItems) {
    $.each(dashboardItems, function (j, dashboardItem) {
        var dashboardItem = dashboardItems[j];
        //HTML for dashboard data sources
        var dataSources =
            `<div id="dataSource` + areaIndex + `-` + dataSourceIndex + `" class="data-source">
                <div id="dataSource` + areaIndex + `-` + dataSourceIndex + `" class="mt-2 mb-2" data-toggle="collapse"  data-target="#dataSource-` + areaIndex + `-` + dataSourceIndex + `">
                    <span id="dataSourceStatusIcon` + areaIndex + `-` + dataSourceIndex + `" class="data-source-status-icon"></span>
                    <span class="data-source-title">${dashboardItem.title}</span> - 
                    <span>${dashboardItem.count} Files Pending</span>
                </div>
                <div id="dataSource-`+ areaIndex + `-` + dataSourceIndex + `" class="collapse" data-toggle="collapse">
                    <div class="card-body list-group">Status: ${dashboardItem.statusMessage}</div>
                    <ul id="listOfParts-` + areaIndex + `-` + dataSourceIndex + `" class="list-of-parts card-body list-group"></ul>
                </div>
            <div>`;

        $('#areaDataSources' + areaIndex.toString()).append(dataSources);

        getDataSourceParts(dashboardItem.parts, areaIndex, dataSourceIndex);
        dataSourceIndex++;

    });
};

function getDataSourceParts(dashboardItemParts, areaIndex, dataSourceIndex) {
    $.each(dashboardItemParts, function (i, part) {
        //HTML for data sources list of parts
        var partsList = `<li>${part.serialNumber}</li>`;
        $('#listOfParts-' + areaIndex + '-' + dataSourceIndex).append(partsList);
    });
};

Здесьмой JSON, который возвращается моим контроллером:

{
  "areas": [
    {
      "title": "Line1",
      "status": "",
      "dashboardItems": [
        {
          "title": "DataSource1",
          "parts": [
            {
              "serialNumber": "Sales Representative"
            },
            {
              "serialNumber": "Senior Manager"
            }
          ],
          "count": 5,
          "statusColour": "Orange",
          "statusMessage": "There is currently a minor backup"
        },
        {
          "title": "DataSource2",
          "parts": [
            {
              "serialNumber": "Sales Representative"
            },
            {
              "serialNumber": "Senior Manager"
            }
          ],
          "count": 5,
          "statusColour": "Red",
          "statusMessage": "There is currently a major backup"
        }
      ]
    },
    {
      "title": "Line2",
      "status": "",
      "dashboardItems": [
        {
          "title": "DataSource1",
          "parts": [
            {
              "serialNumber": "Sales Representative"
            },
            {
              "serialNumber": "Senior Manager"
            }
          ],
          "count": 5,
          "statusColour": "Red",
          "statusMessage": "There is currently a major backup"
        },
        {
          "title": "DataSource2",
          "parts": [
            {
              "serialNumber": "Sales Representative"
            },
            {
              "serialNumber": "Senior Manager"
            }
          ],
          "count": 5,
          "statusColour": "Red",
          "statusMessage": "There is currently a major backup"
        }
      ]
    },
    {
      "title": "Line3",
      "status": "",
      "dashboardItems": [
        {
          "title": "DataSource1",
          "parts": [
            {
              "serialNumber": "Senior Manager"
            }
          ],
          "count": 1,
          "statusColour": "Green",
          "statusMessage": "The status is ok"
        }
      ]
    }
  ],
  "title": "Area1"
}