Blazor Server .NET 8 UI无法更新问题求助

你的代码逻辑本身没有错误，问题出在.NET 8 Blazor Server的默认渲染模式上：

.NET 8 Blazor Server默认启用静态服务器渲染(SSR)，这种模式下组件仅在初始请求时渲染一次，不会建立与客户端的SignalR实时连接。因此即使你在服务器端调用StateHasChanged()，也无法将更新推送到客户端UI。

解决方法：切换到交互式渲染模式 #

你可以通过以下两种方式让组件启用交互式服务器渲染，从而实现UI实时更新：

1. 组件级单独配置 #

直接在你的testing组件顶部添加@rendermode指令，指定使用交互式服务器渲染：

@using System.Timers
@page "/testing"
@rendermode InteractiveServer <!-- 添加这一行 -->

Counter value is: @currentCount at @DateTime.UtcNow.ToString("HH:mm:ss")

@code{
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        Console.WriteLine($"Count incremented: {currentCount}");
    }

    private Timer timer;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            timer = new Timer();
            timer.Interval = 1000;
            timer.Elapsed += OnTimerInterval;
            timer.AutoReset = true;
            timer.Enabled = true;
        }
        base.OnAfterRender(firstRender);
    }

    private void OnTimerInterval(object sender, ElapsedEventArgs e)
    {
        IncrementCount();
        InvokeAsync(() => StateHasChanged());
    }

    public void Dispose()
    {
        timer?.Dispose();
    }
}

2. 全局配置交互式渲染 #

如果希望整个应用都使用交互式服务器渲染，可以修改以下文件：

• 在Program.cs中注册交互式服务：

var builder = WebApplication.CreateBuilder(args);

// 添加交互式服务器组件支持
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

// 启用静态文件、路由等中间件（原有代码保持不变）

// 配置交互式组件端点
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

• 在App.razor中设置全局渲染模式：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 原有head内容保持不变 -->
</head>
<body>
    <Routes @rendermode="InteractiveServer" />
    <!-- 原有script引用保持不变 -->
</body>
</html>

验证说明 #

切换到交互式渲染模式后，组件会与客户端建立SignalR连接，此时调用InvokeAsync(() => StateHasChanged())就能正常触发UI更新，你会看到计数器和时间实时变化。

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