使用Ajax定期更新.Net Core Razor页面

Question

我正在创建的监视“仪表板”应用程序遇到一些麻烦。它将定期更新每个数据源的值，并在仪表板上显示作为卡显示的几个数据源的状态和信息。一个区域中有多个数据源。我已经设法将每个数据源都渲染为卡，但是问题与每5秒用其新值更新每个特定数据源卡有关。

当前，我只能一次又一次地向视图呈现完全相同的HTML，这不是我想要的。我需要使用每个数据源的新数据来更新我的ajax请求的第二次迭代的视图。注意：我使用的是示例数据库，其值与产品中的值不完全相同。

This is an example of the dashboard with dashboard items with a few data sources a within it.

因此，当前我的控制器具有[Produces("application/json")]，当前为仪表板返回json。仪表板包含一个区域列表，一个区域包含一个dashboardItems（它们是数据源，例如JSON中的“ DataSource1”）列表，而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;
     }}

这是我的剃刀页面：

@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"
}