ASP.NET Core使用SignalR时如何用JS给表格加单行并解决重复问题

开发者阿泽

2026-9-30

问题根因

你每次收到UpdateServers信号通知时，都会调用接口拉取全量服务器数据，且直接使用append方法将所有数据追加到表格末尾，没有清空上一次渲染的历史数据，因此每次更新都会重复叠加全量数据，导致出现重复条目。

修复方案

在遍历渲染新数据前，先清空表格的原有内容即可，只需要在$.each遍历逻辑前新增一行清空tbody的代码：

$('#table').empty();

修改后的完整JS代码如下：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.js"></script>
<script>
    var connection = new signalR.HubConnectionBuilder().withUrl("/myHub").build();

    connection.on("UpdateServers", function () {
        $.get("/api/ServersAPI", function (data) {
            console.log(data);
            // 新增清空逻辑，避免重复渲染
            $('#table').empty();
            $.each(data, function (i, item) {
                var img;
                if (item.state == "Ready") {
                    img = "<img src='~/icons/enabled.png' style='width: 20px; height: 20px'/>"
                } else if (item.state == "Reboot Pending") {
                    img = "<img src='~/icons/warning.png' style='width: 20px; height: 20px'/>"
                }
                $('#table').append("<tr><td>" + item.computerName + "</td><td>" + item.type + "</td><td>" + img + "</td>");
            });
        });
    });

    connection.start().then(() => {
        connection.invoke("PostServers").catch(function (err) {
            return console.error(err.toString());
        });
    });
</script>