events not firing in select - blazor

uservnDj 0
Viewed 34
@page "/dd"

<select class="form-control" @bind="@selectedString"  style="width:150px">
         @foreach (string template in templates)
         {
                 <option  @onclick="(()=>dosomething())" value=@template>@template</option>
         }
</select>

<h5>Selected Country is: @selectedString</h5>
<h5>Selected Country is: @selectedStringDup</h5>

@code {
    List<string> templates = new List<string>() { "America", "China", "India", "Russia", "England" };
    string selectedString = "America";
     string selectedStringDup = "";

    void OnSelect (ChangeEventArgs e)
    {
        selectedString = e.Value.ToString();
        Console.WriteLine("The selected country is : " + selectedString);
    }

    void dosomething()
    {
        selectedStringDup = "Russia" + DateTime.Now.ToString();
       
    }

void OnSelect (MouseEventArgs e)
{
        
        Console.WriteLine("The selected country is : " + selectedString);
}
    }

which is my onclick event inside the option tag not working. Its not firing at all. neither is onchange or onselectedchange. How can we fire an event after the value in the combo box is selected?

blazor
2 Answers

@bind="@selectedString" syntax handles the EventCallback automatically and assigns the selected value to selectedString field.

Instead, you can use manual event binding:

<select value="@selectedString" @onchange="HandleChange">

and handle the EventCallback manually:

void HandleChange(ChangeEventArgs e)
{
     // using ?. to check for null
     selectedString = e?.Value?.ToString();
}

So for your scenario (and similarly to your other question) your code should look like this:

@page "/dd"

<select class="form-control" value="@selectedString" @onchange="OnSelect" style="width:150px">
    @foreach (string template in templates)
    {
        <option value=@template>@template</option>
    }
</select>

<h5>Selected Country is: @selectedString</h5>
<h5>Selected Country is: @selectedStringDup</h5>

@code {
    List<string> templates = new List<string>() { "America", "China", "India", "Russia", "England" };
    string selectedString = "America";
    string selectedStringDup = "";

    void OnSelect(ChangeEventArgs e)
    {
        selectedString = e?.Value?.ToString();
        Console.WriteLine("The selected country is : " + selectedString);
    }
}
Dimitris Maragkos0

You can still use InputSelect but you need to provide also Value and ValueChanged and/or ValueExpression:

//Code behinde
private List<string> templates { get; set; } = new List<string>() { "America", "China", "India", "Russia", "England" };
private string selectedString { get; set; } = "America";
private Task OnValueChanged(string value)
{
  selectedString = value;
  Console.WriteLine("The selected country is : " + selectedString);
  return Task.CompletedTask;
}

//Razor page
 <EditForm Model=selectedString>
    <InputSelect ValueExpression="@(()=> selectedString)" 
          Value="@selectedString" 
          ValueChanged="@((string value) => OnValueChanged(value ))">
          <option value="">select...</option>
            @foreach (var country in templates)
            {
            <option value="@country">@country</option>
            }
    
        </InputSelect>
</EditForm>

see fiddle

Nb7770
Related