绑定枚举的InputSelect如何触发额外任务？

方案1：使用@bind-Value:after（推荐，Blazor 6及以上版本） #

这是最简便的实现方式，既保留双向绑定的自动更新，又能在值变更后执行自定义逻辑：

<InputSelect @bind-Value="City" @bind-Value:after="HandleCityChanged">
    @foreach(var city in Enum.GetValues(typeof(Cities)))
    {
        <option value="@city">@city</option>
    }
</InputSelect>
<br />
@City

@code {
    private enum Cities { Berlin, Madrid, Paris, Vienna }
    private Cities City;

    private void HandleCityChanged()
    {
        // 在此编写需要执行的任务，比如数据加载、状态同步等
        Console.WriteLine($"已选择新城市：{City}");
    }
}

方案2：手动绑定Value与ValueChanged #

如果使用低版本Blazor或需要更精细化控制，可以拆分双向绑定语法糖，注意要确保类型匹配并指定ValueExpression：

<InputSelect Value="City" ValueChanged="(Cities selectedCity) => HandleCitySelection(selectedCity)" ValueExpression="() => City">
    @foreach(var city in Enum.GetValues(typeof(Cities)))
    {
        <option value="@city">@city</option>
    }
</InputSelect>
<br />
@City

@code {
    private enum Cities { Berlin, Madrid, Paris, Vienna }
    private Cities City;

    private void HandleCitySelection(Cities selectedCity)
    {
        // 先更新绑定变量
        City = selectedCity;
        // 执行自定义任务
        Console.WriteLine($"已选择新城市：{City}");
        // 其他逻辑如调用API、更新组件状态等
    }
}

常见错误原因说明 #

你之前使用ValueChanged出错，通常是以下两个原因：

• 缺少ValueExpression参数：InputSelect需要该参数识别绑定上下文和支持表单验证，手动绑定时必须指定
• 类型不匹配：ValueChanged的委托参数类型必须与枚举Cities完全一致，避免字符串与枚举类型的转换错误

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