与单例服务Blazor Serverside的两种方式数据绑定 [英] Two way databinding to singleton service Blazor Serverside

查看:248
本文介绍了与单例服务Blazor Serverside的两种方式数据绑定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在使用Webassembly在客户端上使用Blazor.但是我认为我现在应该尝试服务器端版本,并且我有一个简单的想法想尝试一下.

I have been playing with Blazor on the client using Webassembly quite a bit. But I thought I would try the serverside version now and I had a simple idea I wanted to try out.

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

So my understading was that Blazor serverside uses SignalR to "push" out changes so that the client re-renders a part of its page.

我想尝试的是将数据绑定到单例服务上的属性,如下所示:

what I wanted to try was to databind to a property on a singleton service like this:

@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:

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 的值?是否有一个不应该起作用的原因,或者我只是做错了吗?

So my question is this. Why, if I open up this page in two tabs, do I not immediately see the value being updated for the property MyProperty with SignalR when I am changing the value on the property in one tab in the other tab? Is there a reason that is not supposed to work or am I just simply doing it wrong?

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

I thought the upside of using Blazor on the serverside was that you could easily use the fact that SignalR is available and get live updates when values change on the server.

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

I do get the latest value from the singleton service in the other tab but only after I click the button there.

推荐答案

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

A Blazor Server app is built on top of ASP.NET Core SignalR. Each client communicates to the server over one or more SignalR connections called a circuit. A circuit is Blazor's abstraction over SignalR connections that can tolerate temporary network interruptions. When a Blazor client sees that the SignalR connection is disconnected, it attempts to reconnect to the server using a new SignalR connection.

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

Each browser screen (browser tab or iframe) that is connected to a Blazor Server app uses a SignalR connection. This is yet another important distinction compared to typical server-rendered apps. In a server-rendered app, opening the same app in multiple browser screens typically doesn't translate into additional resource demands on the server. In a Blazor Server app, each browser screen requires a separate circuit and separate instances of component state to be managed by the server.

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

Blazor considers closing a browser tab or navigating to an external URL a graceful termination. In the event of a graceful termination, the circuit and associated resources are immediately released. A client may also disconnect non-gracefully, for instance due to a network interruption. Blazor Server stores disconnected circuits for a configurable interval to allow the client to reconnect. For more information, see the Reconnection to the same server section.

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

So in your case the client in another tab is not notified of the changes made on another circuit within another ConnectionContext.

在客户端StateHasChanged() -server-app/58166770#58166770>应该解决该问题.

Invoking StateHasChanged() on the client should fix the problem.

对于您描述的问题,您最好使用普通的SignalR,而不是Blazor服务器端.

For the problem you describe you better use plain SignalR, not Blazor serverside.

这篇关于与单例服务Blazor Serverside的两种方式数据绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆