.NET 5带参数的路由

Question

我有两个简单的页面，希望将一些参数从一个页面传递到下一个页面。当前代码出现错误：

Microsoft.AspNetCore.Components.WebAssembly.Frendering.WebAssemblyRenderer[100]呈现组件时出现未处理的异常：无法对"PortalUI.Pages.CategoriesPage"类型的对象设置属性"ManufacturerID"。错误为：指定的强制转换无效。System.InvalidOperationException：无法对"PortalUI.Pages.CategoriesPage"类型的对象设置属性"ManufacturerID"。错误为：指定的强制转换无效。--->System.InvalidCastException：指定的强制转换无效。

页面如下(按执行顺序(

@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);
}
}

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

现在考虑到我没有得到.NET默认的404页面未找到错误，我认为发生了什么事情，我只是在某个地方搞砸了。

附加信息：
我的UI是Blazor WebAssembly应用程序
My Business Logic是您可以在OnInitializedAsync((上看到的API

Answer 1

您需要按如下方式设置@page：

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

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

上面的改变告诉路由器将该值捕获为int.

参见-Ms文档-路线限制