如何使用SignalR和ASP.NET Core更新单条数据并修复进度条重复问题

开发者阿泽

2026-9-30

问题解决步骤

1. 修复前端重复渲染问题

你每次收到SignalR推送时，都直接向#progressDIV容器追加新DOM元素，没有清空旧内容，是内容重复的直接原因。
在拉取服务器列表的回调函数最开头添加清空容器的逻辑：

connection.on("UpdateServers", function () {
    $.get("/api/ServersAPI", function (data) {
        // 新增这一行，清空原有内容再渲染
        progressDiv.innerHTML = '';
        console.log(data);
        $.each(data, function (i, item) {
            // 原有渲染逻辑保留
        })
    })
})

另外你给每个服务器名称节点设置的id="serverName"是重复ID，不符合DOM规范，建议用item.ID作为唯一标识，方便后续做增量更新。

2. 删除不必要的循环调用逻辑

你在渲染逻辑里调用了atualizaBD(item.ID, ...)方法，这个方法会发起PUT请求修改服务器数据，而PUT接口执行成功后又会触发SignalR推送，形成无限死循环，直接删掉渲染逻辑里的这行atualizaBD调用即可，这个方法仅用于你主动提交修改服务器属性的场景。

3. 优化后端Hub调用逻辑

你现在PUT接口里每次都新建Hub连接调用推送，性能极低，建议直接注入Hub上下文调用：
首先在Controller的构造函数中注入IHubContext：

private readonly IHubContext<MyHub> _hubContext;
// 替换成你自己的Controller构造函数
public ServersController(YourDbContext context, IHubContext<MyHub> hubContext)
{
    _context = context;
    _hubContext = hubContext;
}

然后把PUT接口里原来新建Hub连接的代码块替换成一行即可：

await _context.SaveChangesAsync();
// 删掉原来的HubConnectionBuilder相关代码，替换为下面这行
await _hubContext.Clients.All.SendAsync("UpdateServers");

4. 可选优化：增量更新提升性能

当前你每次更新都全量拉取所有服务器数据重绘，性能较差，可以改成仅推送修改的服务器ID和Phase值，前端局部更新：

后端PUT接口保存成功后推送增量数据：

await _hubContext.Clients.All.SendAsync("UpdateServerPhase", serv.ID, serv.Phase);

前端监听增量更新事件，直接修改对应进度条：

connection.on("UpdateServerPhase", function (serverId, newPhase) {
    // 按之前绑定的服务器ID找到对应进度条节点，直接修改宽度和状态即可
    // 不需要全量拉取接口重绘
})

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