Blazor下拉框联动过滤与重置的实现方法及相关疑问

核心思路 #

Blazor完全支持双向绑定+触发逻辑，不用二选一。你可以通过@bind:after指令（.NET 6+支持）或者属性的setter方法，在绑定值变化时自动执行过滤和重置操作，比单独用@onchange更简洁。

逐个解决你的问题 #

1. 从服务加载初始列表
   把硬编码的列表替换成服务调用即可，直接在OnInitializedAsync里异步获取，示例：

   protected override async Task OnInitializedAsync()
   {
       StatesDb = await _stateService.GetAllStatesAsync();
       CompaniesDb = await _companyService.GetAllCompaniesAsync();
       CompaniesFiltered = CompaniesDb;
   }
   

   提前注入对应的服务（比如IStateService），确保服务层实现数据获取逻辑。

2. 重置州下拉框时同步重置公司下拉框
   在州选择变化的逻辑里，直接把SelectedCompanyId设为null（或空值），结合双向绑定，UI会自动回到初始选项。

3. 是否需要维护原始列表和过滤后列表
   必须要。原始列表CompaniesDb保留全量数据，过滤后的CompaniesFiltered用于渲染公司下拉框。这样每次过滤只需要从原始列表筛选，不用重复请求服务，性能更优。

4. 用bind-value会不会失去过滤能力
   不会。.NET 6及以上版本支持@bind:after指令，绑定值更新后自动触发指定方法；如果是旧版本，可以给SelectedStateId加setter逻辑，在值变化时自动调用过滤方法。两种方式都能兼顾绑定和逻辑触发。

修正后的完整代码 #

@page "/"

<PageTitle>Index</PageTitle>

<div class="mb-3">
    <label for="state" class="form-label">State</label>
    <!-- 使用双向绑定+@bind:after触发过滤与重置 -->
    <select id="state" class="form-select" 
            @bind="SelectedStateId" 
            @bind:after="HandleStateChanged">
        <option value="">Choose...</option>
        @foreach (var state in StatesDb)
        {
            <option value="@state.Id">@state.Name</option>          
        }
    </select>
</div>
<div class="mb-3">
    <label for="company" class="form-label">Company</label>
    <select id="company" class="form-select" 
            @bind="SelectedCompanyId">
        <option value="">Choose...</option>
        @foreach (var company in CompaniesFiltered)
        {
            <option value="@company.Id">@company.Name</option>          
        }
    </select>
</div>

@code {
    List<State> StatesDb { get; set; }
    List<Company> CompaniesDb { get; set; }
    List<Company> CompaniesFiltered { get; set; }

    int? SelectedStateId { get; set; }
    int? SelectedCompanyId { get; set; }

    protected override void OnInitialized()
    {
        StatesDb = new List<State>() {
            new State(){ Id = 1, Name = "Delaware", Abbreviation = "DE"},
            new State(){ Id = 2, Name = "Pennsylvania", Abbreviation = "PA"},
            new State(){ Id = 3, Name = "New Jersey", Abbreviation = "NJ"},
        };

        CompaniesDb = new List<Company>() {
            new Company(){ Id = 1, Name = "Company 1", StateIds = new List<int>{ 1 } },
            new Company(){ Id = 2, Name = "Company 2", StateIds = new List<int>{ 2 } },
            new Company(){ Id = 3, Name = "Company 3", StateIds = new List<int>{ 1,3 } }
        };

        CompaniesFiltered = CompaniesDb;
    }

    void HandleStateChanged()
    {
        // 同步重置公司选中状态
        SelectedCompanyId = null;
        // 执行公司列表过滤
        FilterCompanies();
    }

    void FilterCompanies()
    {
        CompaniesFiltered = SelectedStateId == null 
            ? CompaniesDb 
            : CompaniesDb.Where(x => x.StateIds.Contains((int)SelectedStateId)).ToList();
    }

    // 实体类定义
    public class State
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Abbreviation { get; set; }
    }

    public class Company
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<int> StateIds { get; set; } = new List<int>();
    }
}

兼容旧版本的替代方案 #

如果你的项目是.NET 5及以下版本，没法用@bind:after，可以给SelectedStateId加setter逻辑，替代绑定后的触发：

private int? _selectedStateId;
public int? SelectedStateId
{
    get => _selectedStateId;
    set
    {
        _selectedStateId = value;
        SelectedCompanyId = null;
        FilterCompanies();
    }
}

之后下拉框直接用@bind="SelectedStateId"即可，不用额外加指令。

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