Blazor WASM - 异常呈现组件。错误是：指定的转换无效

Question

我有两个带有 WASM 和 .NET Core Minimal APIs 的剃刀页面，我在尝试在它们之间导航并传递从 API 获得的参数时遇到意外错误打电话给第一个。他们如下：

第一个

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

第二个：

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

当试图点击第二个屏幕中的按钮时，我得到以下信息（请注意 ContactId 是一个整数）：

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

完整输出：

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).

如有任何帮助，我们将不胜感激。

感谢您的宝贵时间。

尝试使用 UriHelper，将 contactId 转换为字符串。没有任何效果。

Answer 1

将路线 (@page) 的 contactId 指定为 int。

EditList.razor

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

---

参考资料

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