Blazor中如何为下拉列表设置默认选中项？

在使用Telerik Grid并启用内联编辑时，编辑模式下的下拉列表无法自动选中ViewModel中对应的选项，检查渲染后的HTML发现selected属性为空。原列代码如下：

<GridColumn Field=@nameof(JobAssignmentListViewModel.Trade) Title="Trade" FieldType="@typeof(string)">
    <EditorTemplate>
        <select id="tradeList" class="form-select" value="@(context as JobAssignmentListViewModel).TradeId" @onchange="@(e => UpdateTradeAsync((JobAssignmentListViewModel)context, e))">
            @foreach (var trade in trades)
            {
                var isSelected = trade.Id == (context as JobAssignmentListViewModel)?.TradeId;
                <option value="@trade.Id" selected="@isSelected">@trade.Name</option>
            }
        </select>
    </EditorTemplate>
</GridColumn>

解决方案 #

问题核心是Blazor的表单元素绑定逻辑冲突：当给<select>设置value属性时，Blazor会自动接管选中状态的管理，此时手动设置<option>的selected属性会被覆盖，导致失效。

修改后的代码如下：

<GridColumn Field=@nameof(JobAssignmentListViewModel.Trade) Title="Trade" FieldType="@typeof(string)">
    <EditorTemplate>
        @{
            var model = context as JobAssignmentListViewModel;
        }
        <select id="tradeList" class="form-select" 
                @bind="model.TradeId" 
                @onchange="@(e => UpdateTradeAsync(model, e))">
            @foreach (var trade in trades)
            {
                <option value="@trade.Id">@trade.Name</option>
            }
        </select>
    </EditorTemplate>
</GridColumn>

关键说明 #

• 使用@bind双向绑定替代手动设置value和selected，Blazor会自动根据model.TradeId的值匹配对应<option>并设置选中状态
• 提前将context转换为ViewModel实例，避免重复类型转换，提升代码可读性
• 如果不需要双向绑定，仅保留value绑定并确保其响应式即可，但必须移除<option>的selected属性，Blazor会优先根据<select>的value控制选中项

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