Blazor WASM - Exception rendering component. The error was: Specified cast is not valid

Question

I have two razor pages with WASM and .NET Core Minimal APIs, and I'm getting an unexpected error while trying to navigate between them passing a parameter I get from an API call in the first one. They are as follows:

First One

@page "/"
@using Client.Components
@using Microsoft.AspNetCore.Components

@inject NavigationManager NavigationManager


<PageTitle>Simple Application</PageTitle>

<h1>Simple Application</h1>



<div class="table-responsive">
    <table class="table table-bordered border-dark table-striped">
        <thead>
            <tr>
                <th scope="col">ContactId (PK)</th>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Email</th>
                <th scope="col">Phone Number</th>
            </tr>
        </thead>
        <tbody>

            @if (_contacts != null)
            {
                @foreach (var contact in _contacts)
                {
                    <tr>
                        <th scope="row">@contact.ContactId</th>
                        <td>@contact.FirstName</td>
                        <td>@contact.LastName</td>
                        <td>@contact.Email</td>
                        <td>@contact.PhoneNumber</td>
                        <td>
                            <button @onclick="() => NavigateToEdit(contact.ContactId)" class=" btn btn-success w-100">
                                History
                            </button>
                        </td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>


@code {

#pragma warning disable CS8618
    [Inject]
    protected HttpClient HttpClient { get; set; }
#pragma warning disable CS8618

    private List<Contact>? _contacts = null;

    protected override async Task OnInitializedAsync()
    {
        _contacts = await HttpClient.GetFromJsonAsync<List<Contact>?>(Endpoints.ContactsAll);
    }

    private void NavigateToEdit(int ContactId)
    {
        NavigationManager.NavigateTo($"EditList/{ContactId}");
    }
}

Second One:

@page "/EditList/{contactId}"
@using Client.Components
@using Common.Models

@inject NavigationManager NavigationManager

<PageTitle>Edits of the Contact</PageTitle>


<h1>Edits of the Contact</h1>

<button @onclick="() => NavigateToIndex()" class="btn btn-success btn-lg w-100 mb-3">
    Back to Index
</button>


<div class="table-responsive">
    <table class="table table-bordered border-dark table-striped">
        <thead>
            <tr>
                <th scope="col">EditId (PK)</th>
                <th scope="col">ContactId</th>
                <th scope="col">UpdateTime</th>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Email</th>
                <th scope="col">Phone Number</th>
            </tr>
        </thead>
        <tbody>

            @if (_edits != null)
            {
                @foreach (var edit in _edits)
                {
                    <tr>

                        <th scope="row">@edit.EditId</th>
                        <td>@edit.ContactId</td>
                        <td>@edit.UpdateTime</td>
                        <td>@edit.FirstName</td>
                        <td>@edit.LastName</td>
                        <td>@edit.Email</td>
                        <td>@edit.PhoneNumber</td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>


@code {

    #pragma warning disable CS8618
    [Inject]
    protected HttpClient HttpClient { get; set; }
    #pragma warning disable CS8618

    [Parameter]
    public int ContactId { get; set; }

    private List<Edit>? _edits = null;

    protected override async Task OnInitializedAsync()
    {
        _edits = await HttpClient.GetFromJsonAsync<List<Edit>?>(Endpoints.EditsById(ContactId));
    }

    private void NavigateToIndex()
    {
        NavigationManager.NavigateTo($"Index");
    }
}

When trying to click the button in the second screen, I get the following (please note that ContactId is an int):

Unhandled exception rendering component: Unable to set property 'ContactId' on object of type 'Client.Pages.EditList'. The error was: Specified cast is not valid.

Full output:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Unable to set property 'ContactId' on object of type 'Client.Pages.EditList'. The error was: Specified cast is not valid.
System.InvalidOperationException: Unable to set property 'ContactId' on object of type 'Client.Pages.EditList'. The error was: Specified cast is not valid.
 ---> System.InvalidCastException: Specified cast is not valid.
   at Microsoft.AspNetCore.Components.Reflection.PropertySetter.CallPropertySetter[EditList,Int32](Action`2 setter, Object target, Object value)
   at Microsoft.AspNetCore.Components.Reflection.PropertySetter.SetValue(Object target, Object value)
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object target, PropertySetter writer, String parameterName, Object value)
   --- End of inner exception stack trace ---
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object target, PropertySetter writer, String parameterName, Object value)
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target)
   at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target)
   at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)
The program '[22776] dotnet.exe' has exited with code 4294967295 (0xffffffff).
The thread 0x0 has exited with code 0 (0x0).
The program 'localhost:7206' has exited with code 4294967295 (0xffffffff).
The program '' has exited with code 4294967295 (0xffffffff).
The program '' has exited with code 4294967295 (0xffffffff).

Any help would be much appreciated.

Thank you for your time.

Tried using UriHelper, converting contactId to String. Nothing worked.

Answer 1

Specify the contactId as int for the route (@page).

EditList.razor

@page "/EditList/{contactId:int}"

---

References

ASP.NET Core Blazor routing and navigation (Route Constraints section)