asp.net-mvc - 在新数据上刷新 Razor 页面

Question

在几个教程之后，我得到了一个 ASP.NET MVC 应用程序，它显示了员工进出和发放设备的仪表板。它是标准的东西，没有什么花哨的东西，SQL Server、Azure、脚手架和 Razor 页面。当通过添加新员工对数据库进行更改时，全屏仪表板视图不会更新，因此我对其进行了 10 秒的刷新（Yuck），这也有效，但我想在有更改时实时刷新数据。按照更多教程，我可以使用 SignalR 将示例文本放入我在仪表板页面上创建的 div 中。我接近我需要的东西，但缺少使用实际数据更新页面的能力，而不仅仅是示例文本。有没有办法让 SignalR 在控制器或视图中刷新/重新加载整个页面？

这是我希望的集线器中的废话代码：

await _messageBrokerHubContext.Clients.All.SendAsync("location.reload(true)"); 

当然，这很愚蠢。我没有看到任何使用 razor 页面代码的教程，只有 javascript 或 Blazor，所以我质疑我对 SignalR 的理解/实现。

这是我的 Razor 部分代码的示例：

<tbody>
@foreach (var item in Model)
{
    <tr class="@(item.ScanDateIn<DateTime.Today ? "text-danger":"" )">
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Plate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Phone)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Van)
        </td>
        <td>
            @(item.ScanDateIn<DateTime.Today ? "Missed Punch Out": @Html.DisplayFor(modelItem => item.ScanTimeOut) )
        </td>
    </tr>
    }
</tbody>

这是控制器示例：

public async Task<IActionResult> Index2()
{
    var Drivers = driverRepository.GetTodaysDrivers();

    if (Drivers == null)
    {
        RedirectToAction(nameof(Index));
    }

    return PartialView(await Drivers);
}

教程 SignalR 示例代码：

   protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        while (!stoppingToken.IsCancellationRequested)
        {
            await Task.Delay(1000);
            Driver driver = new Driver() { Id = 1, Name = "Neo", ScanDateIn = DateTime.Now, Phone = "555-1212", Plate = "Matrix1" };

            var eventMessage = new EventMessage($"Id_{ driver.Id.ToString():N}", $"Title_{driver.Name:N}", driver.ScanDateIn);

            await _messageBrokerHubContext.Clients.All.SendAsync("onMessageReceived", eventMessage, stoppingToken);

        }

SignalR Javascript 示例代码（所有这些都应该被删除，这是我认为刷新页面代码显示用于控制器或视图的地方？？）

let messageCount = 0;

signalrConnection.on("onMessageReceived", function (eventMessage) {
    messageCount++;
    const msgCountH4 = document.getElementById("messageCount");
    msgCountH4.innerText = "Messages: " + messageCount.toString();
    const ul = document.getElementById("messages");
    const li = document.createElement("li");
    li.innerText = messageCount.toString();
   for (const property in eventMessage) {
        const newDiv = document.createElement("div");
        const classAttrib = document.createAttribute("style");
        classAttrib.value = "font-size: 80%;";
        newDiv.setAttributeNode(classAttrib);
        const newContent = document.createTextNode(`${property}: ${eventMessage[property]}`);
        newDiv.appendChild(newContent);
        li.appendChild(newDiv);
    }
    ul.appendChild(li);
    window.scrollTo(0, document.body.scrollHeight);
});

如果你能做到这一点，谢谢。

标签： asp.net-mvcrazorsignalr