fix: ToastService in Blazor web app with per page render mode

[Benuhx]

🐛 Bug Report

I'm new to Blazor and created a new .NET 9 Blazor web app with per page render mode and want to use the ToastService.
According to the documentation <FluentToastProvider/> should be added to MainLayout.razor with interactivity enabled.

But as the MainLayout.razor file is shared between Server-side rendered page and client-side rendered pages i don't know what rendermode to set for the <FluentToastProvider/>

Options are:

• InteractiveServer -> ToastService does not show Toast on pages with @rendermode new InteractiveWebAssemblyRenderMode(false)
• InteractiveWebAssembly -> The other way around, ToastService does not show Toast on pages with @rendermode new InteractiveServerRenderMode(false)
• InteractiveAuto ->When i open a server rendered page first, it works there but not on client side pages. When i open client rendered first, it works there but not on server rendered pages
• Adding FluentToastProvider twice with InteractiveServer and InteractiveWebAssembly make InteractiveWebAssembly require a server connection (i get the Blazor server reconnect overlay on network drop)

I also tried to dynamically set rendermode based on .NET9 RendererInfo.Name or AssignedRenderMode but no Luck.

The only workaround i found to include the FluentToastProvider separately on each page which leads to other problems as it might get added twice (in components), fake scrollbars and all toast are removed an page navigation (so RemoveToastsOnNavigation has no effect) . And of course its easy to forget to include.

I've the same problem with the other providers which require interactivity

So whats the correct approach here?

💻 Repro or Code Sample

My MainLayout.razor:

@inherits LayoutComponentBase

<FluentLayout>
    <FluentHeader>
        <FluentStack Orientation="Orientation.Horizontal" Style="align-items: center; justify-content: center;">
            <FluentEmoji Value="@(new Microsoft.FluentUI.AspNetCore.Components.Emojis.TravelPlaces.Color.Default.Factory())"/>
            <div style="margin-left: auto">
                
            </div>
        </FluentStack>
    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu/>
        <FluentBodyContent Class="body-content">
            <div class="content">
                @Body
            </div>
        </FluentBodyContent>
    </FluentStack>
    <Footer>

    </Footer>
</FluentLayout>

@* Here i tried the options from above *@
<FluentToastProvider RemoveToastsOnNavigation="false" @rendermode="InteractiveAuto" />
<FluentDialogProvider @rendermode="InteractiveAuto"/>
<FluentTooltipProvider @rendermode="InteractiveAuto" />
<FluentMessageBarProvider @rendermode="InteractiveAuto" />
<FluentMenuProvider @rendermode="InteractiveAuto" />

<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>

@code {
}

The either use
@rendermode RenderAt.Server
or
@rendermode RenderAt.Client

with this RenderAt class:

public static class RenderAt
{
    public static readonly IComponentRenderMode Server = new InteractiveServerRenderMode(false);
    public static readonly IComponentRenderMode Client = new InteractiveWebAssemblyRenderMode(false);
}

🤔 Expected Behavior

Providers should work with per-page rendering

😯 Current Behavior

No way to include Provider into MainLayout.razor with per-page rendering

💁 Possible Solution

---

🔦 Context

---

🌍 Your Environment

• OS & Device: Windows 11
• Browser Microsoft Edge + Google Chrome
• .NET and Fluent UI Blazor library Version: .NET 9.0.200 with FluentUI 4.11.5

[vnbaaij]

Hi,

Moved it here because it is not an issue with the library but a usage question. I would even go as far as saying it is more a general Blazor question.

It is not enough to just add interactivity to the FluentToastProvider. The page you are displaying needs to have interactivity as well. So you need to add @rendermode to the pages you want toast on as well (that is why it is called 'per page')

So, in MainLayout.razor:

<FluentToastProvider RemoveToastsOnNavigation="false" @rendermode="InteractiveAuto" />

In Home.razor (in the server project, when using the Web App template))

@page "/"
@inject IToastService ToastService
@rendermode InteractiveServer
@* You cant use InteractiveAuto here as the Home component is not in the Client project so it can't be found then *@

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new Fluent Blazor app.



<p>Click on this button to open a Toast. The toast is created by just specifying an intent and a message.</p>

<FluentButton @onclick="@ShowToast" Appearance="Appearance.Accent">Open</FluentButton>

@code
{
    int counter = 1;
    void ShowToast()
    {
        Random rnd = new();

        var intent = Enum.GetValues<ToastIntent>()[rnd.Next(10)];
        var message = $"Simple Toast #{counter++}";
        ToastService.ShowToast(intent, message);
    }
}

gives you:

In Counter.razor

@page "/counter"
@rendermode InteractiveAuto
@inject IToastService ToastService

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<div role="status" style="padding-bottom: 1em;">
    Current count: <FluentBadge Appearance="Appearance.Neutral">@currentCount</FluentBadge>
</div>

<FluentButton Appearance="Appearance.Accent" @onclick="IncrementCount">Click me</FluentButton>

<p>Click on this button to open a Toast. The toast is created by just specifying an intent and a message.</p>

<FluentButton @onclick="@ShowToast" Appearance="Appearance.Accent">Open</FluentButton>

@code {
    private int currentCount = 0;
    int counter = 1;

    private void IncrementCount()
    {
        currentCount++;
    }

    void ShowToast()
    {
        Random rnd = new();

        var intent = Enum.GetValues<ToastIntent>()[rnd.Next(10)];
        var message = $"Simple Toast #{counter++}";
        ToastService.ShowToast(intent, message);
    }
}

Gives you:

(I clicked the button twice)

As a general rule of thumb: you can't go from one rendermode to another during the process of rendering a page