Blazor Server默认注册页自定义：交互式角色选择组件事件异常

问题原因 #

.NET 8中默认的注册页为静态渲染模式，组件渲染完成后无服务器端实例留存，无法接收来自InteractiveServer模式子组件的EventCallback调用——交互式组件运行在独立的渲染上下文，与静态父组件不属于同一组件实例环境，因此回调无法触发父组件方法。

解决方案：通过双向绑定+表单隐藏字段同步值 #

无需依赖EventCallback传递值，利用Blazor双向绑定机制将子组件选中的角色同步到父组件表单字段，具体步骤如下：

1. 改造交互式子组件，支持双向绑定 #

修改子组件，添加可绑定的SelectedRole参数，选择角色时更新该值并触发绑定回调：

@rendermode InteractiveServer

<div class="flex space-x-4">
    <div @onclick="@(() => SelectRole("Customer"))"
         class="@GetRoleClass("Customer") cursor-pointer p-4 rounded-lg shadow-md flex-1 flex flex-col items-center justify-center transition">
        <img src="https://via.placeholder.com/100" alt="Customer" class="mb-2" />
        <p class="font-bold">Customer</p>
        <p class="text-sm text-gray-600">Register as a customer to access our products and services.</p>
    </div>
    <div @onclick="@(() => SelectRole("Vendor"))"
         class="@GetRoleClass("Vendor") cursor-pointer p-4 rounded-lg shadow-md flex-1 flex flex-col items-center justify-center transition">
        <img src="https://via.placeholder.com/100" alt="Vendor" class="mb-2" />
        <p class="font-bold">Vendor</p>
        <p class="text-sm text-gray-600">Register as a vendor to sell your products and services.</p>
    </div>
</div>

@code {
    [Parameter]
    public string? SelectedRole { get; set; }

    [Parameter]
    public EventCallback<string?> SelectedRoleChanged { get; set; }

    private async Task SelectRole(string role)
    {
        SelectedRole = role;
        await SelectedRoleChanged.InvokeAsync(role);
        StateHasChanged();
    }

    private string GetRoleClass(string role) =>
        (SelectedRole == role) ? "border-2 border-blue-500 bg-blue-100" : "border border-gray-300";
}

注意：将async void改为async Task，避免Blazor中异步方法异常无法被捕获的问题。

2. 在静态注册页中绑定子组件与表单字段 #

在注册页中添加隐藏输入框绑定到Input.Role，同时将子组件的SelectedRole双向绑定到Input.Role：

<div class="pt-4 mb-4">
    <h3 class="text-lg font-semibold mb-2">Select your role</h3>
    <RegisterationRoleSelect @bind-SelectedRole="Input.Role"/>
    <!-- 隐藏输入框确保表单提交时携带Role值 -->
    <InputText @bind-Value="Input.Role" class="hidden" />
    <ValidationMessage For="() => Input.Role" class="text-sm text-red-600 mt-2" />
</div>

无需再编写SelectRole方法，双向绑定会自动同步Input.Role的值。

3. 验证效果 #

选择子组件中的角色卡片时，Input.Role会自动同步，表单提交时可正确携带选中的角色值。静态注册页无需改为交互式，隐藏输入框会在提交时将值传递到服务器端模型绑定中。

替代方案：将注册页改为交互式（可选） #

若业务允许，可将整个注册页改为InteractiveServer模式，原有EventCallback逻辑可正常工作，但会丢失静态渲染的初始加载优势：

@page "/register"
@rendermode InteractiveServer
@inject NavigationManager Navigation
@inject IdentityUserAccessor UserAccessor
@inject IdentityRedirectManager RedirectManager
@inject ILogger<Register> Logger

<!-- 原有注册页内容 -->

内容的提问来源于stack exchange，提问作者Afnan Bashir