使用SignalR时数据在表格中显示为undefined的技术问题求助

我在基于ASP.NET Core的项目中使用PostgreSQL数据库与N-Tier架构，尝试通过SignalR获取任务列表数据时，前端表格中所有字段都显示为undefined。相关代码及截图如下：

前端JS代码（tasklisthub.js） #

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/taskListHub").build();

$(function () {
    connection.start().then(function () {
        alert('Connected to SignalR');
        InvokeTaskList();
    }).catch(function (error) {
        return console.error(error.toString());
    });
});

function InvokeTaskList() {
    connection.invoke("SendTaskList").catch(function (error) {
        return console.error(error.toString());
    })
}

connection.on("ReceivedTaskList", function (taskList) {
    GetTaskList(taskList);
});

function GetTaskList(taskList) {
    $('#getTaskList tbody').empty();

    var tablerow;
    $.each(taskList, function (index, value) {
        tablerow = $('<tr/>');
        tablerow.append(`<td>${value.CreateUser}</td>`);
        tablerow.append(`<td>${value.TaskTitle}</td>`);
        tablerow.append(`<td>${value.Priority}</td>`);
        tablerow.append(`<td>${value.CreateDate}</td>`);
        tablerow.append(`<td>${value.Status}</td>`);
        $('#getTaskList').append(tablerow);
    });
}

后端Hub代码（TaskListHub.cs） #

public class TaskListHub : Hub
{
    TaskListManager taskListManager = new TaskListManager(new EFTaskListDataAccessLayer());

    public TaskListHub(IConfiguration configuration)
    {
        var connectionString = configuration.GetConnectionString("DefaultConnection");
    }

    public async Task SendTaskList()
    {
        var taskList = taskListManager.itemGetList();
        await Clients.All.SendAsync("ReceivedTaskList", taskList);
    }
}

配置文件（appsettings.json） #

"ConnectionStrings": {
    "DefaultConnection": "User ID=postgres;Password=ada;Host=localhost;Port=5432;Database=pmts;Pooling=true;"
}

问题截图 #

排查方向及解决方案 #

1. 匹配前后端字段名称
   确保后端Task实体类的属性名（如CreateUser、TaskTitle）和前端JS中使用的字段名完全一致（区分大小写）。SignalR默认按属性名序列化，大小写不匹配会直接导致取到undefined。

2. 验证数据库返回的数据有效性
   在SendTaskList方法里加断点或日志，确认taskListManager.itemGetList()返回的列表中，每个实体的属性都有实际值，不是未赋值或null。

3. 修复Hub的依赖注入逻辑
   当前Hub构造函数获取了连接字符串，但没有传递给EFTaskListDataAccessLayer，这会导致数据访问层无法正确连接数据库，返回无效数据。修改代码：

private readonly TaskListManager _taskListManager;

public TaskListHub(IConfiguration configuration)
{
    var connectionString = configuration.GetConnectionString("DefaultConnection");
    _taskListManager = new TaskListManager(new EFTaskListDataAccessLayer(connectionString));
}

public async Task SendTaskList()
{
    var taskList = _taskListManager.itemGetList();
    await Clients.All.SendAsync("ReceivedTaskList", taskList);
}

要保证EFTaskListDataAccessLayer的构造函数能接收并使用这个连接字符串初始化DbContext。

4. 检查前端数据结构
   打开浏览器控制台，在GetTaskList函数开头添加console.log(taskList)，确认收到的是数组且每个元素包含预期字段。如果数据结构不符，需要调整后端返回的格式。

5. 修正表格DOM操作
   当前代码清空的是tbody，但添加行时直接追加到表格，应该把行添加到tbody中，同时处理字段为null的情况：

function GetTaskList(taskList) {
    var tbody = $('#getTaskList tbody').empty();

    var tablerow;
    $.each(taskList, function (index, value) {
        tablerow = $('<tr/>');
        tablerow.append(`<td>${value.CreateUser ?? ''}</td>`);
        tablerow.append(`<td>${value.TaskTitle ?? ''}</td>`);
        tablerow.append(`<td>${value.Priority ?? ''}</td>`);
        tablerow.append(`<td>${value.CreateDate ?? ''}</td>`);
        tablerow.append(`<td>${value.Status ?? ''}</td>`);
        tbody.append(tablerow);
    });
}

内容的提问来源于stack exchange，提问作者Gökmen Ada