SignalR无法实时加载数据库数据 求问题排查方案

你遇到的核心问题是表单提交导致页面刷新，中断SignalR连接，同时JavaScript代码存在渲染逻辑错误，导致即使SignalR触发事件也无法更新页面。以下是具体问题点和修复方案：

主要问题点 #

1. 表单默认提交刷新页面：普通<form>的POST提交会触发页面刷新，之前建立的SignalR连接会被断开，自然接收不到后续的LoadData推送。
2. HTML渲染逻辑错误：JavaScript中拼接HTML时未将内容存入变量，且$("#postBody").html()未传入渲染后的内容，导致数据加载后无法显示。
3. SignalR连接无错误处理：connection.start()未处理连接失败的情况，无法排查连接问题。
4. 控制器POST方法返回视图：提交后返回视图会强制刷新页面，违背无刷新的需求。

修复步骤 #

1. 修改视图：阻止表单默认提交 #

将表单改为AJAX提交，避免页面刷新：

@model List<Posts>

<!--user post tweet start-->
<div class="contain" align="center" style="padding: 10px; padding-top: 5px; padding-bottom: 0px; border: 1px solid #CDCDCD;  box-shadow: 5px 1px 10px #888888;">
    <div class="input-group mb-3" style="margin-top:10px;">
        <form id="postForm">
            <input name="textPost" class="form-control"  placeholder="Say something....." value="" />
            <span validation-for="textPost" class="text-danger"></span>
            <input type="button" value="Post" class="btn" id="button-addon2" style="background-color: #1976d2; color: white;"/>
        </form>
    </div>
</div>
<!--user post tweet end-->

<div id="postBody"></div>

2. 修复JavaScript代码：修复渲染逻辑+SignalR连接处理 #

$(() => {
    // 初始化加载帖子
    LoadPost();

    // 建立SignalR连接并处理错误
    const connection = new signalR.HubConnectionBuilder()
        .withUrl("/SignalHub")
        .build();

    connection.start()
        .catch(err => console.error("SignalR连接失败:", err));

    // 接收LoadData事件，刷新帖子
    connection.on("LoadData", () => {
        LoadPost();
    });

    // 表单提交逻辑
    $("#button-addon2").click(() => {
        const textPost = $("input[name='textPost']").val().trim();
        if (!textPost) return;

        $.ajax({
            url: '/Post/ViewPost',
            method: 'POST',
            data: { textPost: textPost },
            success: () => {
                // 清空输入框
                $("input[name='textPost']").val("");
            },
            error: (err) => {
                console.error("提交失败:", err);
            }
        });
    });

    // 加载并渲染帖子
    function LoadPost() {
        $.ajax({
            url: '/Post/GetViewPost',
            method: 'GET',
            success: (result) => {
                let postHtml = "";
                $.each(result, (k, v) => {
                    postHtml += `
                    <div class="contain" style="padding: 30px; padding-top: 10px; padding-bottom: 50px; margin-top: 10px; border: 1px solid #CDCDCD; box-shadow: 5px 1px 10px #888888; ">
                        <img src="/mad.jpg" alt="Girl in a jacket" width="55" height="55" style="margin-left: -15px; margin-right: 10px; border-radius: 50%; float: left;"/>
                        <div class=" comment" style="text-indent: 0px; text-indent: 0px;">
                            <h8 style="text-align: left; "><strong>bank</strong> @@bank</h8>
                            <br />
                            <p1 style=" overflow:hidden;"> <small>${v.textPost} </small></p1>
                        </div>
                        <div class="icons" style="margin-bottom: -40px; padding-top: 20px; text-align: center;">
                            <i class="bi bi-chat-right-text" style="margin-right: 150px;"></i>
                            <i class="fa-solid fa-retweet" style="margin-right: 150px"></i>
                            <i class="fa-solid fa-heart" style="margin-right: 50px;"></i>
                        </div>
                    </div>
                    `;
                });
                $("#postBody").html(postHtml);
            },
            error: (error) => {
                console.log("加载帖子失败:", error);
            }
        });
    }
})

3. 修改控制器POST方法：返回JSON而非视图 #

[HttpPost]
public async Task<IActionResult> ViewPost(Posts pm)
{
    if (!string.IsNullOrEmpty(pm.textPost))
    {
        _pdb.Posts.Add(pm);
        await _pdb.SaveChangesAsync();
        await _signal.Clients.All.SendAsync("LoadData");
    }
    // 返回空结果或成功状态，不需要返回视图
    return Ok();
}

其他检查点 #

• 确保SignalR客户端脚本已正确引入：在共享布局中添加<script src="/lib/microsoft/signalr/dist/browser/signalr.js"></script>（根据你的项目路径调整）。
• 浏览器控制台查看是否有SignalR连接错误，可通过connection.onclose(err => console.log("连接关闭:", err))监听连接断开事件。

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