Toast top action navigates to home page

[Brokemia]

I'm trying to create toasts with a top action that basically acts as an undo button for the thing that triggered the toasts. However, clicking the action seems to redirect me back to the home page or more specifically, back to https://localhost:7077/#

Here's a significantly slimmed down version of the code I have (that I used to test this issue), but you'll see there's nothing fancy here.

@page "/"
@inject IToastService service
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.
<FluentButton OnClick=test >Test</FluentButton>


@code {
    private void test() {
        Console.WriteLine("hi");
        service.ShowSuccess("test", 10_000_000, "Do thing", EventCallback.Factory.Create<ToastResult>(this, test));
    }
}

I also have <FluentToastProvider @rendermode="InteractiveServer" /> in my layout file.

How can I avoid this redirect?

[vnbaaij]

The last parameter is the callback function you want to be called when the action is clicked. See https://fluentui-blazor.net/Toast#toast with sync and async example for the general ShowToast method where a message is logged

[Brokemia]

Sure, I put my code at https://github.com/Brokemia/.NET-CrowdDoc

I put the test code in https://github.com/Brokemia/.NET-CrowdDoc/blob/main/Components/Pages/ToastTest.razor

If you run it, you'll see that clicking the action on the toast takes you to the home page, which is not what I want

[vnbaaij]

I'm getting errors when trying to run the cloned project. Something with auth/clientid.

[Brokemia]

Ah, sorry, you can put

{
  "Authentication:Google:ClientId": "test",
  "Authentication:Google:ClientSecret": "test"
}

in the secrets.json file (under Connected Services), and it should load fine

(also I accidentally put this as an answer, in case you got double emails)

[vnbaaij]

Ok, I got the solution running.

The issue is caused by interactivity not being fully available in the app on the toast page, even though you've specified a rendermode on the page itself. If you change line 31 in App.razor to <Routes @rendermode=InteractiveServer /> It starts working like it should.

So my conclusion would be toast/SSR do not play nice together. Just adding the rendermode to the provider is not enough

[oneolddev]

I believe it's related to the following known issues:

• Ability to add rendermode to blazor layouts #52709
• [Blazor] Support serializing render fragments from SSR #52768

[Brokemia]

Thanks for the help with this

[Brokemia]

A small addition, just for completeness, turning on InteractiveServer mode for my Routes component broke my login page, so I had to follow this Stack Overflow solution to fix it

[vnbaaij]

Just for the record, InteractiveServer breaking login page is not a library thing though. It is a general Blazor issue.