.NET 5 带参数的路由

Question

我有两个简单的页面，想将一些参数从一个页面传递到另一个页面。当前代码出错：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Unable to set property 'ManufacturerID' on object of type 'PortalUI.Pages.CategoriesPage'. The error was: Specified cast is not valid. System.InvalidOperationException: Unable to set property 'ManufacturerID' on object of type 'PortalUI.Pages.CategoriesPage'. The error was: Specified cast is not valid. ---> System.InvalidCastException: Specified cast is not valid.

页面如下（按执行先后顺序）

@page "/machines/manufacturers"
@inject HttpClient Http
@inject NavigationManager NavManager

<h1>Manufacturers</h1>

<p>Display all manufacturers in the database</p>

@if (manufacturers == null)
{
    <p><em>Loading...</em></p>
}
else
{
    @foreach (var i in manufacturers)
    {
        <a @onclick="((args) => Navigate(i.ManufacturerID))">
            <ManufacturersBox Name="@i.Name"
                              ImgURL="@i.ImgURL" />
        </a>
    }
}

@code {
    private Manufacturers[] manufacturers;

    protected override async Task OnInitializedAsync()
    {
        manufacturers = await Http.GetFromJsonAsync<Manufacturers[]>("https://localhost:44335/api/Manufacturers");
    }

    private void Navigate(int ManufacturerID)
    {
        NavManager.NavigateTo($"/machines/manufacturers/{ManufacturerID}/categories");
    }
}

以及我要传递给的页面

@page "/machines/manufacturers/{ManufacturerID}/categories/"

@inject HttpClient Http
@inject NavigationManager NavManager

<h3>CategoriesPage</h3>

<p>This page belongs to @ManufacturerID</p>

@code {
    [Parameter]
    public int ManufacturerID { get; set; }

    private Categories[] categories;

    protected override async Task OnInitializedAsync()
    {
        categories = await Http.GetFromJsonAsync<Categories[]>("https://localhost:44335/api/ManufacturerCategories/" + ManufacturerID);
    }
}

我尝试在 link 中使用 href 而不是使用 NavigationManager（我更喜欢它，因为它允许用户在单击之前查看屏幕底部的 URL）但是都给出了相同的答案。

现在考虑到我没有收到默认的 404 Page not Found 错误 .NET 我假设发生了什么事，我只是在某个地方搞砸了。

附加信息：
我的 UI 是一个 Blazor WebAssembly 应用
我的业务逻辑是您可以在 OnInitializedAsync()

中看到的 API

Answer 1

您需要设置@page如下：

@page "/machines/manufacturers/{ManufacturerID:int}/categories/"

路由器从 url 中提取参数作为字符串并将其传递给 RouteView 组件，该组件尝试将字符串作为 ManufacturerID 参数传递给组件。

以上更改告诉路由器将值捕获为 int。

参见 - Ms Docs - Route Constraints

.NET 5 带参数的路由

.NET 5 Routing with Parameters

c#

asp.net-core

blazor

asp.net-mvc-routing

asp.net-core-5.0