Blazor中InputSelect组件首选项提交时始终为null的问题

问题原因 #

问题核心是双向绑定的初始值不匹配：你的Distance是int?类型，初始化时默认值为null，但<option>的第一个选项值为5。浏览器会自动选中第一个<option>，但Blazor的绑定系统并没有将这个DOM层面的选中状态同步到Distance属性中，导致直接提交时Distance仍为null；而手动切换选项再切回时，触发了绑定更新逻辑，值才会正常同步。

解决方案 #

方案1：初始化绑定属性的默认值

在模型构造函数中，给Distance设置与第一个选项匹配的默认值，让绑定从一开始就保持同步：

public YourModel()
{
    DistanceList = new Dictionary<int, string>()
    {
        { 5, "5 Miles" },
        { 10, "10 Miles" },
        { 25, "25 Miles" }
    };
    // 设置默认选中值，与第一个选项匹配
    Distance = 5;
}

方案2：添加空占位选项（适用于需要用户主动选择的场景）

如果不希望默认选中任何选项，而是强制用户主动选择，可以添加一个空值选项：

<InputSelect @bind-Value="model.Distance">
    <option value="">请选择距离范围</option>
    @foreach (var distance in model.DistanceList)
    {
        <option value=@distance.Key>@distance.Value</option>
    }
</InputSelect>

这种情况下，用户未选择时Distance会保持null，提交前可以通过表单验证提示用户选择。

额外说明

你的<option>值与绑定属性的类型（int?）是兼容的，Blazor会自动处理字符串到可空整数的转换，无需额外修改这部分代码。

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