使用 Blazor 中的 select 框过滤数据列表

Question

I have a table called SchoolsTable and there is a view that will show all the records that have been entered. Here is the my model:

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

What I want to do is have a dropdown in that view that will let me select a State and the data shown on the view will only be those that have the corresponding state.

The razor component:

<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;
    }
}

the select gets all the states as duplicates:

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

additionally, I have created a state table which has 2 records in them:

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

using this select, gets the states as singles and no duplicate states

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

Answer 1

You need to do a couple of things.

First you need to bind the selected value of your <select> element to a field. For that you need to use the @bind attribute:

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

@code {
    private int? selectedState;
}

Also add an option with empty value in your select so that by default no state is selected:

<option value="">Choose a state</option>

Now you can create a property that returns the filtered schools based on the selected state:

private List<SchoolTable> FilteredSchools => selectedState.HasValue ?
    schools.Where(s => s.State == selectedState.Value).ToList() :
    schools;

Use this property to generate the <table> element content:

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

<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 FilteredSchools)
        {         
            <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 int? selectedState;

    private List<SchoolTable> FilteredSchools => selectedState.HasValue ?
        schools.Where(s => s.State == selectedState.Value).ToList() :
        schools;

    protected override void OnInitialized()
    {
        schools = SchoolService.GetSchoolTable();
    }
}