blazor-server-side - 两种方式数据绑定(bind)到单例服务 Blazor 服务器端

Question

我一直在使用 Webassembly 在客户端上玩 Blazor。但是我想我现在会尝试服务器端版本，并且我有一个简单的想法我想尝试一下。

所以我的理解是 Blazor 服务器端使用 SignalR 来“推出”更改，以便客户端重新呈现其页面的一部分。

我想尝试的是像这样将数据绑定(bind)到单例服务上的属性:

@page "/counter"
@inject DataService dataService

<h1>Counter</h1>

<p>Current count: @currentCount ok</p>
<p> @dataService.MyProperty  </p>
<p>
    @dataService.Id
</p>

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


@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
        dataService.MyProperty += "--o--|";
    }


}

启动.cs:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSingleton<WeatherForecastService>();
        services.AddSingleton<DataService>();
    }

服务:

namespace bl1.Services
{
public class DataService
{
    public DataService()
    {
        this.Id = System.Guid.NewGuid().ToString();
    }
    public string Id {get;set;}
    public string MyProperty { get; set; }  
}
}

所以我的问题是这个。为什么，如果我在两个选项卡中打开此页面，我不会立即看到属性 的值正在更新吗？我的房产 当我在另一个选项卡的一个选项卡中更改属性值时使用 SignalR？是否有一个不应该工作的原因，或者我只是做错了？

我认为在服务器端使用 Blazor 的好处是您可以轻松地使用 SignalR 可用这一事实，并在服务器上的值发生变化时获得实时更新。

我确实从另一个选项卡中的单例服务获得了最新值，但只有在我单击那里的按钮之后。

Answer 1

抱歉，您之前没有得到更好的答案 Ashkan (我现在刚刚阅读了您的问题)。您所尝试的实际上是 Blazor 做得非常好的事情，您是对的，它是解决此类问题的完美架构。像上面建议的答案一样，直接使用 SignalR 对于 Blazor WASM 解决方案是正确的，但这并不能解决您的问题，即关于使用服务器端 Blazor。我将在下面提供解决方案。

重要的一点是要了解 blazor 组件不会“轮询”其绑定(bind)属性的更改。相反，如果单击该组件上的按钮，组件将自动重新呈现自己(到内部树)。然后将对先前的渲染执行差异，如果有更改，服务器端 blazor 只会向客户端(浏览器)发送更新。

在您的情况下，您有一个组件使用注入(inject)的单例作为其模型。然后，您在两个选项卡中打开组件，并且如预期的那样(给定 Blazor 的体系结构)，只有您单击按钮的选项卡中的组件会重新呈现。这是因为没有任何东西指示组件的另一个实例重新呈现(并且 Blazor 不会“轮询”属性值的更改)。

您需要做的是指示组件的所有实例重新渲染；你可以通过在每个组件上调用 StateHasChanged 来做到这一点。

因此，解决方案是将 OnInitialized() 中的每个组件连接到一个事件，您可以在修改属性值后调用 Refresh() 来调用该事件；然后在 Dispose() 中取消接线。

您需要将其添加到组件的顶部以正确清理:

@implements IDisposable

然后添加此代码:

    static event Action OnChange;

    void Refresh() => InvokeAsync(StateHasChanged);
    override protected void OnInitialized() => OnChange += Refresh;
    void IDisposable.Dispose() => OnChange -= Refresh;

您可以将我的 OnChange 事件移动到您的单例中，而不是将其作为静态事件。

如果您调用“Refresh()”，您现在会注意到所有组件在任何打开的选项卡上都会立即重绘。我希望这会有所帮助。