Question 87640 in ASP.NET Question posted in
The official documentation can be found here.

Unable to bind radio button using InputRadio and InputRadioGroup in Blazor WASM app – Asp.net

I am trying to bind the value of a radio button in .NET 5.0 Blazor WASM Hosted project. The code is simple but it is not working. The value of anyValue remains "false" after submitting the form.

Parent Component

<EditForm Model="model" OnValidSubmit="OnSubmitForm">
     <RadioButton Name="TestRadio" Text="Choose value" Value="@anyValue" />
</EditForm>

@code {
       string anyValue = "false";

       ......................

       private async Task OnSubmitForm()
       {
           model.TestRadio = Convert.ToBoolean(anyValue);
       }

       ......................
   }

RadioButton Component

<div class="form-group">
    <label>
        @Text
    </label>
    <div>
        <InputRadioGroup Name="@Name" @bind-Value="@Value" class="form-control col-sm-4">
            <InputRadio Name="@Name" Value="@trueVal" />Yes<br>
            <InputRadio Name="@Name" Value="@falseVal" />No<br>
        </InputRadioGroup>
    </div>
</div>

@code {
    string trueVal = "true";
    string falseVal = "false";

    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public string Name { get; set; }

    [Parameter]
    public string Value { get; set; }
}

What am I doing wrong and how to fix it? I do not like the code myself but Blazor just has a strange way of handling these…

Tags:

2

Answers


  1. 0

    This is the right way:

    @page "/"

<div>
    <h4> vehicle Selected - @vehicle.Name </h4>
    <EditForm Model="vehicle">
        <InputRadioGroup @bind-Value="vehicle.Name">
            @foreach (var option in rdOptions)
            {
                <InputRadio Value="option" /> @option <br />
            }
        </InputRadioGroup>
    </EditForm>
</div>
@code {


    public class Vehicle
    {
        public string Name { get; set; }
    }



    Vehicle vehicle = new Vehicle()
        {
            Name = "auto" // default value
        };
    List<string> rdOptions = new List<string> { "car", "bus", "auto" };




   }

    You can put the model on another layer

    Login or Signup to reply.
  2. 0

    Component:

    <div class="form-group">
    <label>
        @Text
    </label>
    <div>
        <div>
              <input type="radio"  name="@Name"  @onchange=@(()=>OnValueChange(trueVal)) checked="@(Value==@trueVal)">
              <label >@trueVal</label>
            </div>

            <div>
              <input type="radio" name="@Name"  @onchange=@(()=>OnValueChange(falseVal)) checked="@(Value==@falseVal)">
              <label>@falseVal</label>
            </div>
    </div>
</div>

@code {
    string trueVal = "true";
    string falseVal = "false";

    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public string Name { get; set; }

    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    private void OnValueChange(string val){
        Value=val;
        ValueChanged.InvokeAsync(val);
    }
}

    Use in parent razor page:

    <RadioButton Name="TestRadio" Text="Choose value" @bind-Value="model.TestRadio" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search