.netblazorradio-buttonblazor-webassemblyweb-development-server

Radio buttons don't save the value to the class Blazor component


i made a form with inputSelects,Inputexts and InputCheckboxes the radio buttons is the only component giving me problems, i tried changing the type to int,bool and string but it dosen't change anything. also i tried using @onchange and @oninput on other components either, maybe there's a bug somewhere. i'm using .NET 8.0, and blazor bootstrap 1.10.5

i tried with two types code, this is the first method: with the first method i tried getting the value with a js function document.querySelector("[name='alternanzaAziendale']:checked").value and it showed the value, instead with blazor after submitting the value student.AlternanzaAziendale is empty:

<EditForm Model="@student" OnValidSubmit="@Submit" FormName="Students" id="studentsForm">
<InputRadioGroup @bind-Value="student.AlternanzaAziendale" name="alternanzaAziendale">
    <div class="form-check form-check-inline">
<InputRadio Value="1"  class="form-check-input" name="alternanzaAziendale" id="alternanzaAziendale1"/>
</div>
<div class="form-check form-check-inline">
 <InputRadio Value="0"  class="form-check-input" name="alternanzaAziendale"         id="alternanzaAziendale2" />
</div>
</InputRadioGroup>
</EditForm>

second method:

<EditForm Model="@student" OnValidSubmit="@Submit" FormName="Students" id="studentsForm">
<div class="right-side">
            <div class="form-check form-check-inline">
                <input @onchange="@(()=> student.EsteroFamiglia = "1")" class="form-check-input" type="radio" name="TempoEsteroFamiglia" id="TempoEsteroFamigliaY" >
            </div>
            <div class="form-check form-check-inline">
                <input @onchange="@(()=> student.EsteroFamiglia = "0")" class="form-check-input" type="radio" name="TempoEsteroFamiglia" id="TempoEsteroFamigliaN" >
            </div>
        </div>
</EditForm>

this is the student class code

public class Student
{
[Required(ErrorMessage = "Seleziona se hai fatto alternanza in azienda")]
    public string AlternanzaAziendale { get; set; }

    public string TempoEsteroFamiglia { get; set; }
}




Solution

  • Here's a MRE based on your code that works as it's supposed to. I can't see where your problem is, but it's probably in code your aren't showing.

    @page "/"
    
    <PageTitle>Home</PageTitle>
    
    <h1>Hello, world!</h1>
    
    <EditForm EditContext="_editContext">
        <InputRadioGroup @bind-Value="_model.Selected">
            <div class="form-check form-check-inline">
                <InputRadio Value="1" class="form-check-input"/>
                <label class="form-check-label">
                    One
                </label>
    
            </div>
            <div class="form-check form-check-inline">
                <InputRadio Value="2" class="form-check-input" />
                <label class="form-check-label">
                    Two
                </label>
            </div>
        </InputRadioGroup>
    </EditForm>
    
    <div class="bg-dark text-white m-2 p-2">
        <pre>
            Selected: @_model.Selected
        </pre>
    </div>
    
    @code {
        private Model _model = new();
        private EditContext? _editContext;
    
        protected override Task OnInitializedAsync()
        {
            // Get the model from the data pipeline
            _model = new();
            _editContext = new EditContext(_model);
            return Task.CompletedTask;
        }
    
        public class Model
        {
            public int Selected { get; set; }
        }
    }