Blazor下拉框选中后值仍为null导致表单无法提交问题

问题根源 #

你的SelectedGradeId和SelectedOrgUnitId是非可空int类型，但下拉框默认选项的value=""是空字符串，Blazor无法将空字符串转换为int，导致绑定过程出错——选中选项后值无法正确更新，进而触发[Required]验证失败，最终表单无法提交。

解决方案 #

方案一：改用可空int类型（推荐） #

修改InputModel中的字段为可空int，这样空字符串可转换为null，符合下拉选择的空状态语义，同时[Required]验证会强制用户选择有效选项：

private sealed class InputModel
{
    [Required(ErrorMessage = "请选择年级")]
    [Display(Name = "Grade")]
    public int? SelectedGradeId { get; set; }

    [Required(ErrorMessage = "请选择组织/单位")]
    [Display(Name = "Organization/Unit")]
    public int? SelectedOrgUnitId { get; set; }

    public List<Grade> Grades { get; set; } = new List<Grade>();
    public List<OrgUnit> OrgUnits { get; set; } = new List<OrgUnit>();
}

无需修改前端下拉框代码，选中有效选项后，值会自动绑定为对应的int值。

方案二：保留非可空int，调整默认选项值 #

如果坚持使用非可空int，将默认选项的value设为int的默认值0（需确保数据库中无ID为0的Grade/OrgUnit）：

<!-- 原生select组件 -->
<div class="form-floating mb-3">
    <select class="form-control" @bind="Input.SelectedGradeId">
        <option value="0">Select Grade</option>
        @if (Input?.Grades != null)
        {
            @foreach (var grade in Input.Grades)
            {
                <option value="@grade.Id">
                    @grade.Id - @grade.Level
                </option>
            }
        }
    </select>
    <label for="grade" class="form-label">Grade</label>
    <ValidationMessage For="() => Input.SelectedGradeId" class="text-danger" />
    <p>selected grade = @Input.SelectedGradeId</p>
</div>

<!-- InputSelect组件 -->
<div class="form-floating mb-3">
    <InputSelect class="form-control" @bind-Value="Input.SelectedOrgUnitId">
        <option value="0">Select Org Unit</option>
        @if (Input?.OrgUnits != null)
        {
            @foreach (var orgUnit in Input.OrgUnits)
            {
                <option value="@orgUnit.Id">
                    @orgUnit.Id - @orgUnit.UnitName
                </option>
            }
        }
    </InputSelect>
    <label for="org-unit" class="form-label">Org Unit</label>
    <ValidationMessage For="() => Input.SelectedOrgUnitId" class="text-danger" />
    <p>selected org.unit = @Input.SelectedOrgUnitId</p>
</div>

同时更新验证逻辑，判断是否选择了默认的0值：

private async Task OnValidSubmitAsync()
{
    Console.WriteLine($"Selected Grade ID: {Input.SelectedGradeId}");
    Console.WriteLine($"Selected Org Unit ID: {Input.SelectedOrgUnitId}");

    // Validation against the database
    var selectedGrade = await DbContext.Grades.FindAsync(Input.SelectedGradeId);
    var selectedOrgUnit = await DbContext.OrgUnit.FindAsync(Input.SelectedOrgUnitId);

    if (Input.SelectedGradeId == 0 || selectedGrade == null)
    {
        Console.WriteLine("Invalid Grade selected.");
        RedirectManager.RedirectToCurrentPageWithStatus("Error: Invalid Grade selected.", HttpContext);
        return;
    }

    if (Input.SelectedOrgUnitId == 0 || selectedOrgUnit == null)
    {
        Console.WriteLine("Invalid Org Unit selected.");
        RedirectManager.RedirectToCurrentPageWithStatus("Error: Invalid Org Unit selected.", HttpContext);
        return;
    }

    // 后续更新逻辑不变
}

额外检查项 #

• 确认grade.Id和orgUnit.Id为int类型，输出的字符串是有效数字（无格式错误）。
• 确保所有表单组件包裹在EditForm内部，Blazor表单绑定依赖EditForm提供的上下文。
• 如果曾使用@onchange手动处理，需确保将获取到的字符串值转换为int后再赋值给字段。

内容的提问来源于stack exchange，提问作者eza