Two way databinding to singleton service Blazor Serverside

Question

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.

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:

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

Service:

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

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?

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.

D. Taylor D. Taylor · Accepted Answer · 2020-01-01T00:56:01

Sorry you didn't get a better answer earlier Ashkan (I just read your question now). What you were attempting is actually something Blazor does very well and you are correct it is the perfect architecture for problems like this. Using SignalR directly, like the above answer suggested, would be correct for a Blazor WASM solution, but that doesn't address your question, which was about using Server-side Blazor. I will provide the solution below.

The important point is to understand that a blazor component does not "poll" for changes in its bound properties. Instead, a component will automatically re-render itself (to an internal tree) if say a button is clicked on that component. A diff will then be performed against the previous render, and server side blazor will only send an update to the client (browser) if there is a change.

In your case, you have a component that uses an injected singleton for its model. You then open the component in two tabs and, as expected (given Blazor's architecture), only the component in the tab where you clicked the button is re-rendering. This is because nothing is instructing the other instance of the component to re-render (and Blazor is not "polling" for changes in the property value).

What you need to do is instruct all instances of the component to re-render; and you do this by calling StateHasChanged on each component.

So the solution is to wire up each component in OnInitialized() to an event you can invoke by calling Refresh() after you modify a property value; then un-wiring it in Dispose().

You need to add this to the top of your component to correctly clean up:

@implements IDisposable

Then add this code:

    static event Action OnChange;

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

You can move my OnChange event into your singleton rather than having it as a static.

If you call "Refresh()" you will now notice all components are instantly redrawn on any open tabs. I hope that helps.

Two way databinding to singleton service Blazor Serverside

2 Answers