Blazor中Select绑定后选中项不显示但绑定有效问题求助

我之前在处理Blazor下拉框绑定字符串类型的日期值时，正好遇到过完全一样的问题！这种情况本质上是Blazor双向绑定对下拉框选项的严格字符串匹配要求导致的——虽然你的绑定值已经正确设置了，但因为它和下拉框里选项的value字符串不完全一致，Blazor找不到对应的选项，所以显示空白，但实际绑定功能是正常的。

问题根源分析 #

Blazor的bind指令在处理<select>元素时，会通过对比绑定值和每个<option>的value属性的完全字符串匹配来确定哪个选项应该被选中。如果你的Innput.Klokkeslett1和tidListe里的tid1字符串存在细微差异（比如一个带毫秒2024-05-20 14:30:00.000，一个不带2024-05-20 14:30:00；或者大小写、空格差异），就会出现“值绑定成功但显示空白”的情况。而去掉bind后，下拉框默认显示第一个匹配的选项，所以看起来正常。

解决方法 #

这里给你两种可行的方案，根据你的场景选择：

1. 统一字符串格式（推荐）

确保绑定的属性值和下拉框选项的value字符串完全一致：

• 在生成tidListe的时候，统一日期时间字符串的格式，比如去掉毫秒部分：

// 假设你从数据库获取的是DateTime类型，转字符串时指定格式
tidListe = yourDbData.Select(item => item.YourDateTimeField.ToString("yyyy-MM-dd HH:mm:ss")).ToList();

• 同时，给Innput.Klokkeslett1赋值时，也用完全相同的格式：

Innput.Klokkeslett1 = fetchedItem.YourDateTimeField.ToString("yyyy-MM-dd HH:mm:ss");

之后你的原有下拉框代码就能正常工作了，因为绑定值和选项值完全匹配：

<select bind="@Innput.Klokkeslett1">
    <option value="@(0)">Tid1</option>
    @foreach (var tid1 in tidListe)
    {
        <option value="@tid1">@tid1</option>
    }
</select>

2. 手动控制选中状态（绕过严格匹配）

如果因为某些原因无法统一格式，可以放弃bind，改用手动处理选中状态和值更新：

<select value="@Innput.Klokkeslett1" @onchange="(ChangeEventArgs e) => Innput.Klokkeslett1 = e.Value?.ToString()">
    <option value="0">Tid1</option>
    @foreach (var tid1 in tidListe)
    {
        <option value="@tid1" selected="@(tid1 == Innput.Klokkeslett1)">@tid1</option>
    }
</select>

这里通过selected属性强制指定匹配的选项，同时用@onchange手动更新绑定值，这样即使有细微的字符串差异（当然最好还是尽量统一），也能保证选中项正常显示。

额外排查点 #

如果上面的方法没用，可以检查：

• Innput.Klokkeslett1是否为null或者空字符串？不过你说去掉bind显示正常，这个概率不大。
• 下拉框的option有没有重复的value？重复值也可能导致Blazor无法正确识别选中项。

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