使用 Blazor 中的 select 框過濾數據列表

Question

我有一個名為SchoolsTable的表，並且有一個視圖將顯示所有已輸入的記錄。 這是我的 model：

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

我想要做的是在該視圖中有一個下拉菜單，讓我 select 和 State 和視圖上顯示的數據將只有那些具有相應 Z9ED39E2EA931586B6A985A6942EF573 的數據。

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

select 將所有狀態作為重復項：

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

另外，我創建了一個 state 表，其中有 2 條記錄：

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

使用此 select，將狀態設為單數且無重復狀態

<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

你需要做幾件事。

首先，您需要將<select>元素的選定值綁定到字段。 為此，您需要使用@bind屬性：

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

還要在select中添加一個具有空值的選項，以便默認情況下不選擇 state：

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

現在您可以創建一個屬性，該屬性根據選定的 state 返回過濾后的學校：

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

使用此屬性生成<table>元素內容：

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