Blazor中如何在foreach循环内发起网络请求更新设备在线状态

1. 定义设备数据模型 #

新增设备实体类，预留在线状态字段，初始值设为null用于标识加载中状态：

public class Device
{
    // 设备唯一标识，用于请求在线状态
    public int Id { get; set; }
    public string DeviceName { get; set; }
    // 其他设备业务属性...
    // null=加载中, true=在线, false=离线
    public bool? IsOnline { get; set; }
}

2. 编写组件逻辑 #

首先确保你已经在Program.cs中注册了HttpClient服务，组件中直接注入HttpClient使用即可：

@inject HttpClient Http

<!-- 设备表格 -->
<table class="table">
    <thead>
        <tr>
            <th>设备名称</th>
            <th>Is Online</th>
            <!-- 其他表格列 -->
        </tr>
    </thead>
    <tbody>
        @foreach (var device in DeviceList)
        {
            <tr>
                <td>@device.DeviceName</td>
                <td>
                    @if (device.IsOnline == null)
                    {
                        <span>加载中...</span>
                    }
                    else
                    {
                        <span>@(device.IsOnline.Value ? "Yes" : "No")</span>
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

@code {
    // 设备列表数据源
    private List<Device> DeviceList { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        // 第一步：先拉取所有设备的基础信息，渲染表格框架
        DeviceList = await Http.GetFromJsonAsync<List<Device>>("api/device/get-all");
        
        // 第二步：异步拉取每个设备的在线状态，不阻塞主页面渲染
        foreach (var device in DeviceList)
        {
            // *注意这里不要直接await，否则会变成串行请求大幅增加加载耗时*
            _ = GetOnlineStatus(device);
        }
    }

    /// <summary>
    /// 拉取单个设备的在线状态
    /// </summary>
    private async Task GetOnlineStatus(Device device)
    {
        try
        {
            // 携带设备ID请求服务端接口，接口路径替换为你的实际地址
            var isOnline = await Http.GetFromJsonAsync<bool>($"api/device/check-online?deviceId={device.Id}");
            device.IsOnline = isOnline;
        }
        catch
        {
            // 请求异常默认标记为离线，可根据业务需求调整
            device.IsOnline = false;
        }
        // 通知Blazor刷新对应行的UI
        StateHasChanged();
    }
}

3. 可选优化项 #

• 若设备数量超过20台，建议将单个查询接口修改为批量查询接口，一次性传入所有设备ID拉取状态，减少HTTP请求次数
• 可给加载中状态添加动画图标优化用户体验
• 如需实时更新在线状态，新增定时器定时调用GetOnlineStatus方法即可

内容的提问来源于stack exchange，提问作者Zapnologica