[英]Filter a list of data using a select box in Blazor
我有一个名为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>
你需要做几件事。
首先,您需要将<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();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.