How to add an on change event to an inputRadio?

Question

Does anybody know how to add an on change event to an inputRadio?

I know you can do the following

<input type="radio" @onchange="ChangeFunction"/>

and this will hit the ChangeFunction() however if I do the following

<InputRadioGroup @bind-Value="@i.LeaveRequest.DayTime">
    <label>Full Day</label>
    <InputRadio Value="@FullDay" class="checkbox-P" @onchange="ChangeFunction"/>
</InputRadioGroup>

it never hits the function.

I've also tried adding @onchange="ChangeFunction" to the InputRadioGroup line however neither seem to hit the function.

Anyone got any idea how to do this?

You can attach `onchange` to the InputRadioGroup if you don't use `bind`! — Nb777, Oct 11 '21 at 10:08
@user13256346 Could you provide an example? This is located in an editForm so I need to have the selected value in the model submitted — JamesS, Oct 11 '21 at 10:41

score 6 · Accepted Answer · answered Oct 11 '21 at 10:56

You can create normal radio buttons:

@foreach (var item in new string[] {"AspNetCore","AspNet","SomeJsThingWhatever"})
 {
  <div>
      <input type="radio" name="technology" id="@item" value="@item" 
         @onchange="RadioSelection" 
         checked=@(RadioValue.Equals(item,StringComparison.OrdinalIgnoreCase)) 
         />
      <label for="@item">@item</label>
   </div>
 }
<div>
   <label>Selected Value is @RadioValue</label>
</div>
 @functions
 {
   string RadioValue = "aspnetcore";
    void RadioSelection(ChangeEventArgs args)
    {
      RadioValue = args.Value.ToString();
    }
  }

Source

Nb777 · Answer 2 · 2021-10-11T13:44:17.200

3

Blazor page

<EditForm Model="Items">
<InputRadioGroup ValueChanged="@((e) => OnRadiochange(e))" TValue="string" ValueExpression="() => SelectedValue">
    @foreach (var item in Items)
    {
        bool Checked= false;
        if (SelectedValue.Equals(item, StringComparison.OrdinalIgnoreCase))
        {
            Checked = true;
        }
    <div class="form-check">
        <InputRadio Value="@item" class="form-check-input" checked=@Checked />
        @item <br />
    </div>
    }
</InputRadioGroup>

Code behind

public string SelectedValue { get; set; } = "AspNetCore";
public List<string> Items { get; set; } = new List<string> { "AspNetCore", "AspNet", "SomeJsThingWhatever" };

    private void OnRadiochange(object sender)
    {
        SelectedValue = (string)sender;
        StateHasChanged();
    }

edited Oct 11 '21 at 13:44

answered Oct 11 '21 at 12:38

Nb777

1,658
8
27

1

Yep. This has worked. I have done a mix of both. The radio such as ` { SelectionChanged(EventArgs, i); }" />` and then setting the value that I submit in the form in the onchange function – JamesS Oct 11 '21 at 13:19
@JamesS, I fixed the second solution and works right now correct, please check it! – Nb777 Oct 11 '21 at 13:45
I tried your solution, however, I had the situation where, after I'd trigger the OnRadiochange handler, that the option group would not have the value selected anymore! All option buttons would be blank! And the SelectedValue would be good. I fixed it by adding also the `Value="SelectedValue"` in combination with `ValueExpression="() => SelectedValue"` and that did the trick. Additional explanations why here: https://stackoverflow.com/questions/60658450/when-to-use-valuechanged-and-valueexpression-in-blazor – Mario Mucalo Jul 05 '22 at 12:35

How to add an on change event to an inputRadio?

2 Answers2