单选按钮不会将值保存到类 Blazor 组件

Question

我用 inputSelects、Inputexts 和 InputCheckboxes 制作了一个表单，单选按钮是唯一给我带来问题的组件，我尝试将类型更改为 int、bool 和 string，但它没有改变任何内容。 我也尝试在其他组件上使用@onchange和@oninput，也许某个地方有错误。我正在使用 .NET 8.0 和 blazor bootstrap 1.10.5

我尝试了两种类型的代码，这是第一种方法： 使用第一种方法，我尝试使用js函数 document.querySelector("[name='alternanzaAziendale']:checked").value 获取值，它显示了该值，而不是在提交值后使用 blazor Student.AlternanzaAziendale 为空：

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

第二种方法：

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

这是学生班级代码

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

    public string TempoEsteroFamiglia { get; set; }
}

Answer 1

这是一个基于您的代码的 MRE，它按预期工作。我看不出你的问题出在哪里，但它可能在你没有显示的代码中。

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