Blazor Select Box 值绑定：解决选中后显示空白或锁定问题

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Blazor Select Box 值绑定：解决选中后显示空白或锁定问题

2025-11-20

浏览次数：次

返回列表

Blazor Select Box 值绑定：解决选中后显示空白或锁定问题

本文旨在解决blazor应用中html `

在Blazor框架中，构建交互式用户界面，尤其是涉及表单输入时，

理解Blazor中的数据绑定与Select元素

Blazor通过@bind指令简化了UI元素与C#属性之间的数据绑定。对于

考虑以下一个常见的错误示例，其中尝试使用selected属性：

<label for="Grade">Choose a Grade:</label>
<select Name="Grade" id="Grade" @bind="selectedGrade">
    <option value="">---No Grade---</option>
    @foreach (var item in grade)
    {
        <option value="@item.Id" selected>@item.GradeDescription</option> // 错误的使用方式
    }
</select>

@code{
   private int? selectedGrade;
    private List<GradeTable> FilteredGrades => selectedGrade.HasValue ?
    grades.Where(s => s.Grade==selectedGrade.Value).ToList() :
    grades;
}

在这个示例中，问题出在selected属性的使用上。当selected属性没有条件地被添加到每个选项时，它会告诉浏览器所有选项都应该是“选中”状态。HTML规范规定，在一个

解决之道：条件绑定selected属性

要正确地在Blazor中显示选中的值，我们需要利用Blazor的条件属性渲染能力，将selected属性动态地绑定到一个布尔表达式。当且仅当该表达式为true时，selected属性才会被渲染到特定的

正确的实现方式如下：

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

<label for="Grade">Choose a Grade:</label>
<select Name="Grade" id="Grade" @bind="selectedGrade">
    <option value="">---No Grade---</option>
    @foreach (var item in grade)
    {
        <option value="@item.Id" selected="@(selectedGrade == item.Id)">@item.GradeDescription</option>
    }
</select>

@code {
    private int? selectedGrade; // 用于绑定选中的年级ID
    private List<GradeTable> grade = new List<GradeTable>(); // 假设这是从服务获取的年级列表

    protected override void OnInitialized()
    {
        // 模拟数据加载
        grade.Add(new GradeTable { Id = 1, GradeDescription = "Grade A" });
        grade.Add(new GradeTable { Id = 2, GradeDescription = "Grade B" });
        grade.Add(new GradeTable { Id = 3, GradeDescription = "Grade C" });

        // 可以设置一个初始选中的值，例如：
        // selectedGrade = 2; 
    }

    // 假设 GradeTable 是一个定义了 Id 和 GradeDescription 的类
    public class GradeTable
    {
        public int Id { get; set; }
        public string GradeDescription { get; set; }
    }
}

关键点解析

selected="@(selectedGrade == item.Id)": 这是解决方案的核心。
- @( ... ) 是Blazor中用于执行C#表达式的语法。
- selectedGrade == item.Id 是一个布尔表达式。它比较当前循环项的Id是否与组件状态中的selectedGrade变量的值相等。
- 如果表达式结果为true，Blazor会渲染selected属性（例如：
- 如果表达式结果为false，Blazor则不会渲染selected属性。
- 这种条件渲染确保了在任何给定时间，只有一个选项（如果selectedGrade有值且匹配某个item.Id）会被标记为selected，从而正确地反映在UI上。
@bind="selectedGrade": 尽管我们手动处理了selected属性，@bind指令仍然至关重要。它负责在用户进行选择时，将新选中的选项的value（即item.Id）更新到selectedGrade变量中。这实现了数据的双向流动：UI反映数据，数据更新UI。
默认选项与可空类型:
- ：这个选项提供了一个默认的“无选择”状态。其value为空字符串。
- private int? selectedGrade;：selectedGrade被声明为int?（可空整数）。这意味着它可以持有整数值，也可以持有null。当用户选择“---No Grade---”时，@bind会将selectedGrade设置为null，这与空字符串的value很好地兼容。如果selectedGrade被初始化为null，那么“---No Grade---”选项将会在页面加载时被选中。