提交表单时 Blazor 中出现导航错误

Question

当我提交表单并执行方法时出现此错误：

我在顶部使用了依赖注入：

@inject NavigationManager NavigationManager

顺便说一句，如果我在方法名称前面加上

async

前缀，就不会出现错误。

这是在 .NET 8.0 上运行的 Blazor Web 应用程序。

我检查了这个github issue#233，但我认为这与我的问题不一样。

Answer 1

我正在遵循完全相同的教程，并且遇到了同样的错误。经过一番测试和调试，我终于找到了解决方案！

首先，确保您已将

rendermode

设置为

InteractiveServer

。您可以在页面顶部执行此操作，如下所示：

@rendermode InteractiveServer

接下来，我知道您使用的是

EditForm

，所以我希望您将

OnSubmit

更改为

OnValidSubmit

:

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

现在我们创建一个方法来处理提交。这应该是一个异步任务，如下所示：

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

如果没有最后一行，代码将在我这边运行两次。 利用

OnValidSubmit

允许您使用自定义验证，拦截提交的默认行为。通过测试，我注意到使用带有导航的常规按钮可以正常工作，但是带有提交类型的按钮会抛出错误。

此外，使用

@rendermode InteractiveServer

时，当您在字段中输入任何内容时，如果该字段具有有效数据，那么在您按下按钮之前，它会将其标记为绿色。反之亦然。我认为这是一个很酷的内置功能。