MudBlazor中如何实现下拉框级联？@onchange不触发如何解决

MudSelect 是MudBlazor封装的自定义组件，原生Blazor的@onchange事件仅对原生DOM元素生效，直接在MudSelect上绑定@onchange完全不会触发组件的值变更逻辑。MudSelect的值变更通知走组件自身暴露的ValueChanged EventCallback，以下是两种可直接落地的级联下拉实现方案。

这是最接近原生select开发体验的写法，不需要手动维护值更新逻辑，绑定值自动同步后直接触发级联刷新方法即可，以省市级联场景为例：

<MudSelect T="int?" Label="选择省份" @bind-Value="SelectedProvinceId" @bind-Value:after="OnProvinceChanged">
    @foreach (var province in ProvinceList)
    {
        <MudSelectItem T="int?" Value="province.Id">@province.Name</MudSelectItem>
    }
</MudSelect>

<MudSelect T="int?" Label="选择城市" @bind-Value="SelectedCityId" Disabled="SelectedProvinceId == null">
    @foreach (var city in FilteredCityList)
    {
        <MudSelectItem T="int?" Value="city.Id">@city.Name</MudSelectItem>
    }
</MudSelect>

@code {
    private int? SelectedProvinceId;
    private int? SelectedCityId;
    private List<Province> ProvinceList = []; // 全量省份初始化数据
    private List<City> FilteredCityList = []; // 选中省份对应的城市列表
    private List<City> AllCityList = []; // 全量城市初始化数据

    private void OnProvinceChanged()
    {
        // 清空上一次选中的城市值
        SelectedCityId = null;
        // 过滤当前省份下的城市
        FilteredCityList = SelectedProvinceId.HasValue 
            ? AllCityList.Where(c => c.ProvinceId == SelectedProvinceId.Value).ToList()
            : [];
    }
}

如果需要异步加载级联数据，直接把OnProvinceChanged改成async Task返回，内部加await调用接口即可。

如果使用低于6.0的MudBlazor版本，或者需要在值更新前做校验、拦截操作，可以不使用@bind-Value简写，手动分别绑定Value和ValueChanged参数：

<MudSelect T="int?" Label="选择省份" Value="SelectedProvinceId" ValueChanged="OnProvinceValueChanged">
    @foreach (var province in ProvinceList)
    {
        <MudSelectItem T="int?" Value="province.Id">@province.Name</MudSelectItem>
    }
</MudSelect>
<!-- 城市下拉代码和方案1一致 -->

@code {
    private int? SelectedProvinceId;
    private int? SelectedCityId;
    // 数据初始化字段和方案1一致

    private async Task OnProvinceValueChanged(int? newProvinceId)
    {
        // 注意：必须手动给绑定字段赋值，否则UI不会更新选中状态
        SelectedProvinceId = newProvinceId;
        SelectedCityId = null;
        
        if (newProvinceId.HasValue)
        {
            // 示例：异步拉取当前省份下的城市数据
            FilteredCityList = await CityService.GetCitiesByProvince(newProvinceId.Value);
        }
        else
        {
            FilteredCityList.Clear();
        }
    }
}

• 不要给MudSelect绑定原生@onchange：该事件绑定在组件最外层容器DOM上，MudSelect内部选中值的操作不会冒泡触发这个事件，写了也不会执行。
• 泛型类型必须严格匹配：MudSelect声明的T类型、绑定的Value字段类型、MudSelectItem声明的T类型三者必须完全一致，类型不匹配时ValueChanged会被组件内部的类型校验拦截，不会执行回调。
• 手动实现ValueChanged时必须手动赋值：如果不用@bind-Value的简写形式，一定要在ValueChanged回调内把新选中的值赋值给绑定的字段，否则下拉框选值后不会显示选中状态。
• 不要同时绑定@bind-Value和ValueChanged：两者同时写会导致绑定逻辑冲突，回调触发异常。

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