Jip Posts - Answer Overflow

Jip

Explore posts from servers

•Created by Jip on 9/9/2024 in #help

Question about reactivity in Blazor

Hi, I'm working on a Blazor project. I have some experience with C# in general and professionally I work with Angular. Specifically Angular recently tackled a big issue with reactivity with Signals. Before that I often used RxJS, and in .Net a similar implementation of RxJS is System.Reactive. In Blazor I do not fully understand how the reactivity works out of the box, without using any additional libraries. The goal of the project is to be able to parse replays of the game Supreme Commander: Forged Alliance and to show various information about the replay on different pages. Just like in Angular, one can use a service to deal with data that needs to exist across pages. To set that up, in program.cs I have the following snippet to make sure the replay service is a singleton:

builder.Services.AddSingleton<ReplayService>();

builder.Services.AddSingleton<ReplayService>();

The replay service itself is quite simple, just a C# class that uses a library to load in the replay from a binary blob:

namespace FAForever.Replay.Viewer.Services
{
    public class ReplayService
    {
        
        public Replay? Replay { get; set; }

        public void LoadReplay(MemoryStream stream)
        {
            this.Replay = ReplayLoader.LoadFAFReplayFromMemory(stream);
        }
    }
}

namespace FAForever.Replay.Viewer.Services
{
    public class ReplayService
    {
        
        public Replay? Replay { get; set; }

        public void LoadReplay(MemoryStream stream)
        {
            this.Replay = ReplayLoader.LoadFAFReplayFromMemory(stream);
        }
    }
}

Now, in a Blazor page I can do the following and that appears to work just fine:

@page "/"
@inject ReplayService replayService;

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

@if (replayService.Replay != null)
{
    <p role="status">Current count: @replayService.Replay.Events.Count</p>
}
else
{
    <p role="status">No replay loaded</p>
}

<p>@UserInputCount</p>


<InputFile OnChange="HandleFileSelected" /><br />

@code {

    private int UserInputCount = 0;

    public async Task HandleFileSelected(InputFileChangeEventArgs args)
    {
        if (args.File.Name.ToLower().EndsWith(".fafreplay"))

        {
            IBrowserFile file = args.File;
            MemoryStream stream = new MemoryStream();
            await file.OpenReadStream(4 * 512000).CopyToAsync(stream).ConfigureAwait(false);
            stream.Position = 0;
            replayService.LoadReplay(stream);
            if (replayService.Replay != null){
                UserInputCount = replayService.Replay.Events.Count;
            } else  {
                UserInputCount = -1;
            }
        }
    }
}

@page "/"
@inject ReplayService replayService;

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

@if (replayService.Replay != null)
{
    <p role="status">Current count: @replayService.Replay.Events.Count</p>
}
else
{
    <p role="status">No replay loaded</p>
}

<p>@UserInputCount</p>


<InputFile OnChange="HandleFileSelected" /><br />

@code {

    private int UserInputCount = 0;

    public async Task HandleFileSelected(InputFileChangeEventArgs args)
    {
        if (args.File.Name.ToLower().EndsWith(".fafreplay"))

        {
            IBrowserFile file = args.File;
            MemoryStream stream = new MemoryStream();
            await file.OpenReadStream(4 * 512000).CopyToAsync(stream).ConfigureAwait(false);
            stream.Position = 0;
            replayService.LoadReplay(stream);
            if (replayService.Replay != null){
                UserInputCount = replayService.Replay.Events.Count;
            } else  {
                UserInputCount = -1;
            }
        }
    }
}

However, in the navigational menu I want to hide some items until there is a replay in the service. It won't make a lot of sense to show the build orders tab when there is no replay. So I wrote it as such:

@inject ReplayService replayService;

(...)

<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
    <nav class="flex-column">

        (...)

        @if (replayService.Replay != null)
        {
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="chat">
                    <span class="bi bi-activity" aria-hidden="true"></span> Build orders
                </NavLink>
            </div>
        }
    </nav>
</div>

@inject ReplayService replayService;

(...)

<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
    <nav class="flex-column">

        (...)

        @if (replayService.Replay != null)
        {
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="chat">
                    <span class="bi bi-activity" aria-hidden="true"></span> Build orders
                </NavLink>
            </div>
        }
    </nav>
</div>

Now back to reactivity - I noticed that the page updates immediately once the replay is loaded. All good there. But the navigational menu is only updated after interacting with it in some fashion, such as by clicking on it. That's of course not what I want - once a replay is available, it should update automatically. Secretly I was hoping that Blazor was as reactive as the Angular Signals, without the boilerplate of an RxJS-like library. But the current behavior is not sufficient. Where can I read up about reactivity in Blazor, and in general, why is the navigational menu not updating in my example? And should I still use a reactive library? Or am I just making a rookie mistake? 😄

20 replies

Gaming

Programming