.NET Blazor中InputSelect的ValueChanged事件无响应问题

我在Blazor组件开发中遇到问题：使用InputSelect组件时，切换下拉选项后绑定的OnProjectChange方法未触发。我已为组件配置Value、ValueChanged及ValueExpression属性，该组件基于级联下拉列表教程实现，且通过Html.RenderComponentAsync以ServerPrerendered模式在cshtml视图中渲染。

相关代码 #

InputSelect组件代码 #

<InputSelect id="Projects" class="form-control"
             ValueExpression="@(() => MenuViewModel.ProjectId)"
             Value="@MenuViewModel.ProjectId"
             ValueChanged="@((string value) => OnProjectChange(value))">

    @foreach (var project in MenuViewModel.ListOfProjects)
    {
        <option value="@project.Value">@project.Text</option>
    }
</InputSelect>

OnProjectChange方法代码 #

public void OnProjectChange(string value)
{
    if (value != null)
    {
        MenuViewModel.ProjectId = value;
        MenuViewModel.ScriptId = "";
    }

    MenuViewModel.ListOfScripts = DropdownService.ListOfScripts(Convert.ToInt32(MenuViewModel.ProjectId));
    this.StateHasChanged();
}

组件渲染代码 #

@(await Html.RenderComponentAsync<MyApp.Views.Shared.Components.DropdownMenu>(RenderMode.ServerPrerendered))

排查与解决方向 #

1. 确保Value类型完全匹配 #

检查MenuViewModel.ProjectId的类型与ValueChanged的参数类型是否一致。如果ProjectId是数值类型（如int），但你用了string作为参数，会导致绑定逻辑失效。调整类型匹配：

// 若ProjectId为int类型，修改ValueChanged参数类型
ValueChanged="@((int? value) => OnProjectChange(value))"

// 对应修改方法
public void OnProjectChange(int? value)
{
    if (value.HasValue)
    {
        MenuViewModel.ProjectId = value.Value.ToString(); // 或直接赋值int类型，依ViewModel定义调整
        MenuViewModel.ScriptId = "";
        MenuViewModel.ListOfScripts = DropdownService.ListOfScripts(value.Value);
    }
    this.StateHasChanged();
}

2. 避免手动编写option破坏绑定逻辑 #

InputSelect组件可自动处理option生成，手动编写可能干扰组件的内置绑定机制。推荐使用@bind-Value简化绑定：

<InputSelect id="Projects" class="form-control"
             @bind-Value="@MenuViewModel.ProjectId"
             ValueChanged="@OnProjectChange">
    @foreach (var project in MenuViewModel.ListOfProjects)
    {
        <option value="@project.Value">@project.Text</option>
    }
</InputSelect>

3. 处理预渲染模式下的初始化问题 #

ServerPrerendered模式下，组件会先在服务器预渲染再建立SignalR连接。确保MenuViewModel.ListOfProjects在预渲染和交互阶段都有有效数据，可在组件OnInitializedAsync方法中初始化数据：

protected override async Task OnInitializedAsync()
{
    MenuViewModel.ListOfProjects = await DropdownService.GetProjectsAsync();
}

4. 修正异步操作与StateHasChanged调用 #

如果DropdownService.ListOfScripts是异步方法，需改为异步调用并正确触发状态更新：

public async Task OnProjectChange(string value)
{
    if (value != null)
    {
        MenuViewModel.ProjectId = value;
        MenuViewModel.ScriptId = "";
        MenuViewModel.ListOfScripts = await DropdownService.ListOfScripts(Convert.ToInt32(value));
    }
    await InvokeAsync(StateHasChanged);
}

同时更新ValueChanged委托以匹配异步方法：

ValueChanged="@((string value) => OnProjectChange(value))"

5. 确保InputSelect在EditForm上下文内 #

InputSelect需要在EditForm组件中才能正常工作，将组件包裹在EditForm中：

<EditForm Model="@MenuViewModel">
    <InputSelect id="Projects" class="form-control"
                 ValueExpression="@(() => MenuViewModel.ProjectId)"
                 Value="@MenuViewModel.ProjectId"
                 ValueChanged="@((string value) => OnProjectChange(value))">
        @foreach (var project in MenuViewModel.ListOfProjects)
        {
            <option value="@project.Value">@project.Text</option>
        }
    </InputSelect>
</EditForm>

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