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>
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();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.