Blazor 服务器端：api 调用后刷新 gui

Question

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

现在，如果调用 API，我想从数据库中重新获取 blazor 客户端上的新状态（或所有传感器）。

我尝试应用本指南中的“3. State Container”：https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/

如何在 API 请求后强制网站重新获取传感器？ Sensor 和 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";
        }
    }
}

我的 API

        [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

我不完全理解你的问题，因为它没有说清楚，我可能遗漏了一些东西......

但是，你提出的 State Container 模式无论如何都不能为你服务。它旨在管理您的组件等的状态。但我相信您正在寻找一种方法来通知您的客户端应用程序“API 被调用”，并且它（客户端应用程序）应该更新新状态...我说的对吗？

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

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

希望这行得通...