Blazor:从变更事件的多个输入中获取值

Question

有没有办法从同一事件中的多个选择中获取值？我希望有两个选择作为过滤器，并允许其中一个过滤返回的作业。我不知道如何让代码检查另一个select的值。

<select name="JobLocation" id="JobLocation" @onchange="SelectJobLocation">
<option selected hidden>Select a Location</option>
@foreach (var location in JobLocation.OrderBy(x => x.Name))
{
<option value=@location.Id>@location.Name</option>
}
</select>
<br />
<select name="JobType" id="JobType" @onchange="SelectJobType">
<option selected hidden>Select a Job Family</option>
@foreach (var jtype in JobType.OrderBy(x => x.Name))
{
<option value=@jtype.Id>@jtype.Name</option>
}
</select>    
<table id="JobsTable">
<!-- Jobs go here.... -->
</table>
@code {
async void SelectJobLocation(ChangeEventArgs e)
{
if(!string.IsNullOrWhiteSpace(e.Value.ToString()))
{
var JobType =  //Pull Value from JobType Select Here
Locations = await GetJobLocations(e.Value.ToString(),JobType);
StateHasChanged();
}
}
}

Answer 1

您可以使用blazor数据绑定将select中当前选定的值保存到变量中。

要做到这一点，只需在选择中添加@bind属性，如下所示：

<select name="JobLocation" id="JobLocation" @onchange="SelectJobLocation">
<option selected hidden>Select a Location</option>
@foreach (var location in JobLocation.OrderBy(x => x.Name))
{
<option value=@location.Id>@location.Name</option>
}
</select>
<br />
// add @bind here
<select name="JobType" id="JobType" @bind="JobType">
<option selected hidden>Select a Job Family</option>
@foreach (var jtype in JobType.OrderBy(x => x.Name))
{
<option value=@jtype.Id>@jtype.Name</option>
}
</select>    
<table id="JobsTable">
<!-- Jobs go here.... -->
</table>
@code {
// the variable used for the data binding
private string JobType { get; set; }
async void SelectJobLocation(ChangeEventArgs e)
{
if(!string.IsNullOrWhiteSpace(e.Value.ToString()))
{
// JobType will contain currently selected value
Locations = await GetJobLocations(e.Value.ToString(),JobType);
StateHasChanged();
}
}
}

有关blazor中数据绑定的更多信息：https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-6.0

Answer 2

我没有试图在单个select onChange事件中检索select值，而是在所有下拉菜单的选定值发生变化时记录它们：

@code {
private string SelectedJobLocation;
private string SelectedJobType;
async void SelectLocation(ChangeEventArgs e)
{
SelectLocation= "";
if(!string.IsNullOrWhiteSpace(e.Value.ToString()))
{
SelectLocation= e.Value.ToString();
JobLocations = await LocationData.GetLocations(e.Value.ToString());
GetJobs();
}
StateHasChanged();
}