在Blazor中使用下拉选框筛选数据列表

现有情况说明 #

我有一个名为SchoolsTable的表，现有视图会显示所有已录入的记录。模型定义如下：

public partial class SchoolsTable
{
    public int Id{ get; set; }
    public int Name{ get; set; }
    public int State{ get; set; }
}

我想要在视图中添加一个下拉选框，选择某个州后，视图仅显示对应州的记录。

当前我的Razor组件代码：

<table style="width:50%; margin-left:710px; border:1px solid black" border="1" class="table-bordered">
      <tr bgcolor="#ffffff" style="border:1px solid black">
           <th style="border:1px solid black">Schools</th>
          @foreach (var item in school)
          {         
        <th style="border:1px solid black">@item.Name</th>
        <th style="border:1px solid black">@item.State</th>
          }
      </tr>
    </table>

@code{
    private List<SchoolTable> schools=new List <SchoolTable>();
    private SchoolTable school= new SchoolTable();
    protected override async Task OnInitializedAsync()
    {
        GetSchoolTable();

    }
    private List<SchoolTable> GetSchoolTable()
    {
        schools= SchoolService.GetSchoolTable();
        return schools;
    }
}

直接遍历schools生成的下拉选框会出现重复州选项：

<label for="State">Choose a State:</label>
<select name="State">
    @foreach (var item in schools)
    {
        <option value="@item.State">@item.State</option>
    }
</select>

我另外创建了包含2条记录的StatesTable表，模型如下：

public partial class StatesTable
{
    public int Id{ get; set; }
    public int Description{ get; set; }
}

通过遍历StatesTable数据生成的下拉选框能得到无重复的州选项：

<label for="State">Choose a State:</label>
<select name="State">
    @foreach (var item in branch)
    {
        <option value="@item.Id">@item.Description</option>
    }
</select>

需要实现通过这个无重复州的下拉选框筛选SchoolsTable数据的功能。

实现步骤 #

1. 完善组件数据与变量定义 #

在@code块中补充必要的数据存储变量，包括州数据列表、选中的州ID、筛选后的学校列表：

@code{
    private List<SchoolsTable> schools = new List<SchoolsTable>();
    private List<StatesTable> states = new List<StatesTable>();
    private int? selectedStateId;
    private List<SchoolsTable> filteredSchools = new List<SchoolsTable>();

    protected override async Task OnInitializedAsync()
    {
        // 获取全量学校和州数据
        schools = SchoolService.GetSchoolTable();
        states = StateService.GetStatesTable(); // 替换为你实际获取州数据的方法
        // 初始状态显示所有学校
        filteredSchools = schools;
    }
}

2. 改造下拉选框添加绑定与触发事件 #

修改下拉选框，绑定选中值并添加值变化时的筛选触发逻辑，同时增加"全部州"的默认选项：

<label for="State">选择州:</label>
<select id="State" @bind="selectedStateId" @onchange="FilterSchoolsByState">
    <option value="">全部州</option>
    @foreach (var state in states)
    {
        <option value="@state.Id">@state.Description</option>
    }
</select>

3. 实现筛选逻辑方法 #

在@code中添加根据选中州ID筛选学校的方法：

private void FilterSchoolsByState()
{
    if (selectedStateId.HasValue)
    {
        // 匹配选中州ID的学校数据
        filteredSchools = schools.Where(s => s.State == selectedStateId.Value).ToList();
    }
    else
    {
        // 未选择时恢复显示所有数据
        filteredSchools = schools;
    }
}

4. 修正表格渲染逻辑 #

将表格遍历的数据源改为筛选后的filteredSchools，同时修正原表格遍历单个对象的错误：

<table style="width:50%; margin-left:710px; border:1px solid black" border="1" class="table-bordered">
    <tr bgcolor="#ffffff" style="border:1px solid black">
        <th style="border:1px solid black">ID</th>
        <th style="border:1px solid black">学校名称</th>
        <th style="border:1px solid black">所属州</th>
    </tr>
    @foreach (var item in filteredSchools)
    {         
        <tr>
            <td style="border:1px solid black">@item.Id</td>
            <td style="border:1px solid black">@item.Name</td>
            <td style="border:1px solid black">@item.State</td>
        </tr>
    }
</table>

5. 额外优化建议 #

原模型中SchoolsTable的Name、State以及StatesTable的Description定义为int类型不符合业务逻辑，建议修改为string类型：

public partial class SchoolsTable
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int StateId { get; set; } // 对应StatesTable的Id字段
}

public partial class StatesTable
{
    public int Id { get; set; }
    public string Description { get; set; } // 州名称
}

对应筛选逻辑也需调整为s.StateId == selectedStateId.Value。

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