Blazor 服务器端:在 API 调用后刷新 GUI

Question

我编写了一个服务器端 blazor 应用程序。您可以使用用于报告新状态的小 API 创建具有状态(良好、警告、错误...(的传感器。

现在，我想在调用 API 时从数据库重新提取 blazor 客户端上的新状态(或所有传感器(。

我试图应用"3.本指南中的状态容器"：https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/

如何强制站点在 API 请求后重新获取传感器？传感器和 Blazor 客户端是不同的设备。

@inject ISensorData _db

<h1>Dashboard</h1>
@if (sensors is null)
{
<p>Laden...</p>
}
else
{
if (sensors.Count == 0)
{
<p>Keine Sensoren vorhanden!</p>
}
else
{
foreach (SensorModel sensor in sensors)
{
<button class="btn btn-lg @StatusColor(sensor.Status) m-2">@sensor.Name @sensor.Message</button>
}
}
}
@code {
private List<SensorModel> sensors;
protected override async Task OnInitializedAsync()
{
sensors = await _db.GetSensors();
}
private string StatusColor(int status)
{
switch (status)
{
case 0:
return "btn-secondary";
case 1:
return "btn-success";
case 2:
return "btn-warning";
case 3:
return "btn-danger";
default:
return "btn-secondary";
}
}
}

我的接口

[HttpGet("updateState")]
public async Task<IActionResult> UpdateState(int id, int status, string? message)
{
if (id <= 0)
{
return BadRequest();
}
if (string.IsNullOrEmpty(message))
{
message = "";
}
try
{
await _db.UpdateState(id, status, message);
//Task.Run(async () => { _dbState.CallRequestRefresh(); });
_dbState.CallRequestRefresh();
}
catch(Exception ex)
{
throw ex;
}
return NoContent();
} enter code here

我的 API 控制器

{
_db = db;
NavigationManager = navigationManager;
hubConnection = new HubConnectionBuilder()
.WithUrl("https://localhost:44346/dbRefreshHub")
.Build();
hubConnection.StartAsync();
}

Answer 1

我不完全理解你的问题，因为它没有明确提出，我可能错过了一些东西......

但是，你提出的状态容器模式无法以任何方式为你服务。它旨在管理组件等的状态。但我相信您正在寻找一种方法来通知您的客户端应用程序"API 被调用"，并且它(客户端应用程序(应该更新新状态......我说的对吗？

如果是，那么我相信你可以实现SignalR客户端(Microsoft.AspNetCore.SignalR.Client(来做到这一点。

不久前，我在 Daniel Roths 的一个 Blazor 预览版中看到了一些代码片段，演示了如何在 Blazor 中使用 SignalR 客户端。搜索它，或者在文档中查找该主题，看看它是否可以为您提供一些补救措施。

希望这有效...