Blazor 控件：正确显示选中选项的教程-html教程-PHP中文网

Blazor 控件：正确显示选中选项的教程

心靈之曲

发布： 2025-11-20 12:10:19

原创

850人浏览过

Blazor <select> 控件：正确显示选中选项的教程控件：正确显示选中选项的教程 " />

本文旨在解决 blazor 应用中 `

理解 Blazor

在 Blazor 中，控件的显示区域会变为空白，而不是显示刚刚选定的值。这通常是由于对 HTML 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;
   // ... 其他代码
}

登录后复制

在这种情况下，@foreach 循环中的所有

显示空白： 如果多个选项被标记为 selected，浏览器可能无法确定哪个是“真正的”选中项，从而导致显示异常或空白。
锁定在最后一个选项： 有时，浏览器会选择渲染循环中最后一个带有 selected 属性的选项，即使用户实际选择了其他选项，下拉框也会“锁定”在该选项上。

解决方案：正确使用条件 selected 属性

要解决此问题，关键在于仅将用户当前选定的选项标记为 selected。Blazor 允许我们通过条件表达式动态地设置 HTML 属性。正确的做法是使用 @selected="selectedGrade == item.Id"，其中 selectedGrade 是 @bind 绑定的 C# 属性，而 item.Id 是当前选项的值。

当 selectedGrade == item.Id 表达式的计算结果为 true 时，Blazor 会渲染 selected 属性；当结果为 false 时，该属性则不会被渲染。这样，只有与 selectedGrade 值匹配的选项才会被标记为选中，从而确保下拉列表正确显示当前选择。

腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

205

查看详情

示例代码

以下是修正后的 Blazor 组件代码：

<label for="Grade">选择一个等级:</label>
<select Name="Grade" id="Grade" @bind="selectedGrade">
    <option value="">---无等级---</option>
    @foreach (var item in grade)
    {
        <option value="@item.Id" selected="@(selectedGrade == item.Id)">@item.GradeDescription</option>
    }
</select>

@code {
    private int? selectedGrade; // 用于绑定选定等级的属性
    private List<GradeTable> grade = new List<GradeTable>(); // 假设这是你的等级数据源

    protected override void OnInitialized()
    {
        // 模拟加载等级数据
        grade.Add(new GradeTable { Id = 1, GradeDescription = "初级" });
        grade.Add(new GradeTable { Id = 2, GradeDescription = "中级" });
        grade.Add(new GradeTable { Id = 3, GradeDescription = "高级" });

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

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

登录后复制

代码解释:

@bind="selectedGrade": 这建立了 select 元素与 selectedGrade C# 属性之间的双向绑定。当用户选择一个选项时，selectedGrade 的值会被更新；反之，当 selectedGrade 的值通过代码改变时，select 元素的显示也会相应更新。
selected="@(selectedGrade == item.Id)": 这是解决方案的核心。
- @( ... ) 是 Blazor 的语法，用于在 HTML 属性中执行 C# 表达式。
- selectedGrade == item.Id：这个条件表达式会检查当前循环到的 item.Id 是否与 selectedGrade 的值相等。
- 如果表达式结果为 true，则该
- 如果表达式结果为 false，则该
private int? selectedGrade;: 使用 int? (可空整数) 类型非常重要。它允许 selectedGrade 在没有选择任何选项时（例如，当选择了 "---无等级---" 选项时）保持为 null，这与

注意事项与最佳实践

初始值设定： 如果你希望
“无选项”处理： 这样的选项对于用户体验非常重要。当 selectedGrade 为 null 或未设置时，这个选项应该被默认选中。由于其 value 是空字符串，与 int? 类型的 selectedGrade 绑定时，当 selectedGrade 为 null 时，它会自动匹配。
数据类型匹配： 确保 @bind 绑定的属性 (selectedGrade) 的数据类型与
性能考虑： 对于大型数据集，@foreach 循环是标准的做法。Blazor 会高效地处理组件的渲染和更新。