Blazor onchange event with select dropdown

问题

So i have been stuck trying to get a simple onchange to fire when a select dropdown value changes. Like so:

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

with the method being called:

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

The result I get it no matter how i try to reorient it is this error in the browser.

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

Is there something obvious and key that I am missing? Because I have a button onclick event that works just fine in the same page.

回答1:

Your answer should be in the cshtml:

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

Then your @functions should look like:

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

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

You could also just use a bind...

<select bind="@selectedString">

but onchange=@DoStuff allows you to perform logic on selection.

回答2:

For starters you are not using the correct bind syntax:

onchange="@dostuff"

notice the @

回答3:

As an alternative to setting an onchange event, you could just bind the dropdown to a property and handle changes in the property set. This way you get the value being selected all in the same process.

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

回答4:

Above answer didn't work for me, got compilation error.

below is my working code.

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

来源：https://stackoverflow.com/questions/49947790/blazor-onchange-event-with-select-dropdown

标签

asp.net-core

blazor