Navigation error in Blazor when submit a form

Question

This error occurs when I submit a form and execute the method:

I used dependency injection at the top:

@inject NavigationManager NavigationManager

By the way, if I prefixed the method name with async, the error would not occur.

This is a Blazor web app running on .NET 8.0.

I checked this github issue#233, but I don't think it's the same as my problem.

Answer 1

I'm following the exact same tutorial and have come across the same exact error. After some testing and debugging, I've finally managed to find a solution!

First, make sure that you have set rendermode to InteractiveServer. You can do this on top of your page, like this:

@rendermode InteractiveServer

Next, I know you're using an EditForm, so I'd like you to change OnSubmit to OnValidSubmit:

<EditForm Model="Game" FormName="EditGame" OnValidSubmit="HandleSubmit">

Now we create a method to handle the submit. This should be an async Task, like this:

private async Task HandleSubmit()
{
    GamesClient.AddGame(Game); // Adds game
    NavigationManager.NavigateTo("/"); // Navigates to the homepage
    await Task.CompletedTask; // Indicates that task has completed
}

Without the last line, the code would run twice on my end. Making use of OnValidSubmit allows you to make use of custom validation, intercepting the default behaviour of a submit. With testing, I had noticed that using a regular button with a navigation would work fine but buttons with type submit would throw an error.

Additionally, when making use of @rendermode InteractiveServer, when you type anything in a field, it would mark it green if the field has valid data, before you even press the button. The opposite is also true. I thought this was a cool built-in feature.

For context, the tutorial on YouTube is called Blazor Full Course For Beginners, created by Julio Casal.