为什么我在提交Blazor服务器表单时会出现404错误

Question

我在Visual Studio 2019中使用.NET Core 5.x创建了一个新的Blazor Server项目。

我创建了一个新页面Search.razor，并将其放在/Pages目录中。

我创建了一个新页面SearchResults.razor，并将其放在/Pages目录中。

我的搜索剃刀看起来像这样：

@page "/search"
<h3>Search</h3>
<form method="GET" action="SearchResults.razor">
<input type="text" id="name" name="name" />
... future form elements here
<button type="submit"> Submit </button>
</form>
@code {
}

我的搜索结果。剃刀看起来像这样：

@page "/searchresults"
<h3>SearchResults</h3>
@code {
}

我修改了/Shared/NavMenu.razor页面，使其看起来像这样：

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
...
<li class="nav-item px-3">
<NavLink class="nav-link" href="search">
<span class="oi oi-list-rich" aria-hidden="true"></span> Search
</NavLink>
</li>
</ul>
</div>

我启动应用程序，点击"；搜索"；链接，输入名称"；乔·史密斯；在搜索字段中，单击"提交"按钮，然后从Chrome接收：

This localhost page can’t be found
No webpage was found for the web address:
https://localhost:44314/SearchResults.razor?name=joe+smith
HTTP ERROR 404

地址栏包含以下内容：

https://localhost:44314/SearchResults.razor?name=joe+smith

Answer 1

"SearchResults.razor"不是有效地址。

它如何工作的快速草图：

@page "/search"
<EditForm Model="this" OnValidSubmit="DoSearch">
<InputText @bind-Value="search" />
<button type="submit">Submit</button>
</EditForm>
@code {
private string search;
void DoSearch()
{
var arg = System.Web.HttpUtility.UrlEncode(search);
Navigator.NavigateTo($"searchresults/{arg}");
}
}

接收端，UrlDecode免费提供：

@page "/searchresults/{text?}"
<h3>SearchResults</h3>
<p>Looking for @Text</p>    
@code {
[Parameter] public string Text { get; set; }

}