CODEWITHSUNDEEP
c#asp.net-coreblazorasp.net-mvc-routingasp.net-core-5.0
DieGrysWolf
DieGrysWolf

Reputation: 47

.NET 5 Routing with Parameters

I have two simple pages and would like to pass some parameters from one to the next. I get an error with the current code:

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.

The pages are as follows (in order of execution)

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

And the page I want to pass to

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

I've tried using an href in the link instead of using NavigationManager (which I would prefer as it allows users to view the URL at the bottom of their screen before clicking) but both give the same answer.

Now considering that I am not getting the default 404 Page not Found error of .NET I assume something is happening, I am just messing up somewhere.

Additional info:
My UI is a Blazor WebAssembly App
My Business Logic is the API you can see at OnInitializedAsync()

Upvotes: 2

Views: 1666

Answers (1)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30310

You need to set @page as follows:

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

The Router pulls the parameter from the url as a string and passes it to the RouteView component which tries to pass a string to the component as the ManufacturerID parameter.

The above change tells the Router to capture the value as an int.

See - Ms Docs - Route Constraints

Upvotes: 4

Related Questions