时间戳

首页 > 解决方案 > Blazor 服务器：手动刷新重新呈现的 UI

c# - Blazor 服务器：手动刷新重新呈现的 UI

问题描述

在计数器示例中，我添加了一个计时器来增加计数器：

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    protected override void OnInitialized()
    {
        var timer = new System.Timers.Timer();
        timer.Interval = TimeSpan.FromSeconds(1).TotalMilliseconds;
        timer.Elapsed += (s, e) =>
        {
            IncrementCount();
            StateHasChanged();
        };
        timer.Start();
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

此代码与 Blazor WebAssembly 一起使用，计数器递增并且 UI 显示新值。但是对于 Blazor Server，计数器会增加（在调试器中检查），但 UI 不会刷新。

如何使用 Blazor Server 手动刷新 UI？

标签： c#.netblazorblazor-server-side

解决方案

与在可用的单个 JavaScript UI 线程下执行的 Blazor WebAssembly App 不同，Blazor Server App 可能对同一个应用程序使用多个线程，其结果会导致同步上下文出现问题。

你需要的是同步上下文的调整。就代码而言，您应该执行以下操作：

InvokeAsync(() => StateHasChanged()); instead of merely calling `StateHasChanged();`

请注意，您经常会遇到此异常，具体取决于您的代码设计：

System.InvalidOperationException: '当前线程与渲染器的同步上下文无关。在触发渲染或修改渲染期间访问的任何状态时，使用 Invoke() 或 InvokeAsync() 将执行切换到渲染器的同步上下文。

希望这可以帮助。

推荐阅读