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

时间:2020-05-26 09:48:25

标签: blazor blazor-server-side

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

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

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

如何在API请求后强制站点重新获取传感器? Sensor和Blazor Client是不同的设备。


@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();
        }

1 个答案:

答案 0 :(得分:0)

由于您的问题不清楚,我不完全理解您的问题,我可能会遗漏一些东西...

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

如果是的话,我相信您可以实现SignalR客户端(Microsoft.AspNetCore.SignalR.Client)来实现。

前一段时间,我在Daniel Roths的Blazor预览版中看到了一些代码片段,展示了如何在Blazor中使用SignalR Client。搜索它,或者在文档中查找主题,然后查看它是否可以为您提供一些补救措施。

希望这行得通...