Событие Blazor onchange с выпадающим списком select

Question

Так что я застрял, пытаясь заставить простое onchange срабатывать при изменении значения выпадающего списка. Вот так:

<select class="form-control d-flex" onchange="(dostuff())">
    @foreach (var template in templatestate.templates)
    {
        <option value=@template.Name>@template.Name</option>
    }
</select>

с вызываемым методом:

void dostuff()
{
   Console.WriteLine("first spot is firing");
    _template = templatestate.templates.FirstOrDefault(x => x.Name == 
    _template.Name);
    Console.WriteLine("second spot is firing");
}

В результате я получаю это независимо от того, как я пытаюсь переориентировать именно эту ошибку в браузере.

Uncaught Error: System.ArgumentException: There is no event handler with ID 0

Есть ли что-то очевидное и ключ, который мне не хватает? Потому что у меня есть событие onclick кнопки, которое прекрасно работает на той же странице.

Answer 1

Ваш ответ должен быть в cshtml:

<select onchange=@DoStuff>
    @foreach (var template in templates)
    {
        <option value=@template>@template</option>
    }
</select>

Тогда ваши @functions должны выглядеть так:

@functions {
    List<string> templates = new List<string>() { "Maui", "Hawaii", "Niihau", "Kauai", "Kahoolawe" };
    string selectedString = "Maui";

    void DoStuff(UIChangeEventArgs e)
    {
        selectedString = e.Value.ToString();
        Console.WriteLine("It is definitely: " + selectedString);
    }
}

Вы также можете просто использовать привязку...

<select bind="@selectedString"> 

но onchange=@DoStuff позволяет вам выполнять логику выбора.

Answer 2

В качестве альтернативы установке события onchange вы можете просто привязать раскрывающийся список к свойству и обрабатывать изменения в наборе свойств. Таким образом, вы получаете выбранное значение в одном процессе и без необходимости преобразовывать значение объекта. Кроме того, если вы уже используете @bind для выбора, вам также запрещено использовать onchange для него.

<select @bind="BoundID">
 ...
</select>

@code {
  private int? _boundID = null;
  private int? BoundID
  {
    get
    {
      return _boundID;
    }
    set
    {
      _boundID = value;
     //run your process here to handle dropdown changes
    }
  }
}

Answer 3

Выше ответ не сработал для меня, возникла ошибка компиляции.

ниже мой рабочий код.

@inject HttpClient httpClient

@if (States != null)
{

<select id="SearchStateId" name="stateId" @onchange="DoStuff" class="form-control1">
    <option>@InitialText</option>
    @foreach (var state in States)
    {
        <option value="@state.Name">@state.Name</option>
    }
</select>
}


@code {
[Parameter] public string InitialText { get; set; } = "Select State";
private KeyValue[] States;
private string selectedString { get; set; }
protected override async Task OnInitializedAsync()
{
    States = await httpClient.GetJsonAsync<KeyValue[]>("/sample-data/State.json");
}

private void DoStuff(ChangeEventArgs e)
{
    selectedString = e.Value.ToString();
    Console.WriteLine("It is definitely: " + selectedString);
}

public class KeyValue
{
    public int Id { get; set; }

    public string Name { get; set; }
}
}

Answer 4

Для начала вы не используете правильный синтаксис привязки:

onchange="@dostuff"

обратите внимание на @

Answer 5

Просто хотел добавить к другим ответам, что вы можете получить доступ к select значение, также используя лямбда-выражения:

      <select @onchange="@(e => ViewModel.TargetProperty = e.Value.ToString())">

Если вы предпочитаете поместить свой код прямо в элемент.

Answer 6

Вы также можете попробовать:

      <select @onchange="(e => DoStuff(e.Value.ToString()))">

Answer 7

      <div class="col-12 col-md-6 my-2">
<label class="font-weight-bold f-14">Clase de vehículo</label>

<InputSelect class="form-control form-select" id="vehicleClass" ValueChanged="@((string value) => References(value))"
              Value="@dtoSearchVehicleBy.VehicleClass" ValueExpression="@(() => dtoSearchVehicleBy.VehicleClass)">
    <option selected>Seleccionar</option>
    @foreach (var vehicle in vehicleByClass)
    {
        <option value="@vehicle.VehicleClass"> @vehicle.VehicleClass</option>
    }
</InputSelect>
<div class="text-danger">
    <ValidationMessage For="@(() => dtoSearchVehicleBy.VehicleClass)" />
</div>

              private void References(string value)
    {
        brand = dtoSearchVehicleBy.Brand;
        dtoSearchVehicleBy.VehicleClass = value;
        vehicleByBrandAndClass = vehicleByBrands.Where(x => x.Brand == brand && x.VehicleClass == value);
    }