为什么我在提交 Blazor Server 表单时收到 404 错误？答案

【问题标题】：Why am I getting a 404 error when I submit my Blazor Server form?为什么我在提交 Blazor Server 表单时收到 404 错误？
【发布时间】：2021-07-13 21:45:21
【问题描述】：

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

我新建了一个页面Search.razor，放到/Pages目录下。

我新建了一个页面SearchResults.razor，放到/Pages目录下。

我的 Search.razor 看起来像这样：

@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 {

}

我的 SearchResults.razor 看起来像这样：

@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>

我启动应用程序，单击右侧菜单中的“搜索”链接，在搜索字段中输入名称“joe smith”，单击“提交”按钮，然后从 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

【问题讨论】：

标签： blazor blazor-server-side asp.net-core-5.0

【解决方案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; }


}

【讨论】：