双向数据绑定到单例服务Blazor服务器端

Posted 2021-04-29

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

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

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

@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--|";
    }


}

Startup.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更新的属性MyProperty的值？有没有不应该起作用的原因，还是我只是在做错事情？

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

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

答案

See the documentation here

Blazor Server应用程序是基于ASP.NET Core SignalR构建的。每客户端通过一个或多个SignalR连接与服务器通信称为电路。电路是Blazor对SignalR的抽象可以容忍网络临时中断的连接。当一个Blazor客户端看到SignalR连接已断开，它尝试使用新的SignalR连接重新连接到服务器。

与浏览器连接的每个浏览器屏幕（浏览器标签或iframe）Blazor Server应用程序使用SignalR连接。这是另一个与典型的服务器呈现的应用相比具有重要的区别。在一个服务器渲染的应用程序，可在多个浏览器屏幕中打开同一应用程序通常不会转化为对服务器。在Blazor服务器应用中，每个浏览器屏幕都需要一个单独的电路和组件状态的单独实例由服务器管理。

Blazor考虑关闭浏览器标签或导航到外部URL正常终止。如果是正常终止，电路和相关资源将立即释放。一种客户端也可能会非正常断开连接，例如由于网络中断。 Blazor服务器存储断开的电路以用于可配置的时间间隔，以允许客户端重新连接。欲了解更多信息，请参阅重新连接到同一服务器部分。

因此，在您的情况下，不会向另一个选项卡中的客户端通知在另一个ConnectionContext中的另一个电路上所做的更改。

在客户端StateHasChanged()上调用should fix the problem。