如何在Blazor .NET7中通过参数设置下拉框默认选中项？

问题核心 #

你手动给<option>加selected属性无效，是因为Blazor的@bind会完全接管下拉框的选中状态，手动设置的selected会被绑定逻辑覆盖。正确的做法是通过绑定的SelectedValue来设置初始值。

修改步骤 #

1. 子组件代码后置（Dropdown.razor.cs）修改

添加参数变更时的处理逻辑，将InitialValue同步到绑定的SelectedValue，并更新选中项、通知父组件：

using Microsoft.AspNetCore.Components;

namespace ComboTest.Components;

public partial class Dropdown
{
    [Parameter]
    public EventCallback<Option> GetSelection { get; set; }

    [Parameter]
    public required List<Option> Options { get; set; }

    [Parameter]
    public string Id { get; set; } = "";

    [Parameter]
    public string CSSclass { get; set; } = "";

    [Parameter]
    public string InitialValue { get; set; } = "";


    private Option Selection { get; set; } = new Option();

    public string? SelectedValue { get; set; } = "";

    // 把async void改成async Task，避免Blazor中异步方法的潜在问题
    async Task SelectionChanged()
    {
        Selection = Options.Find(e => e.Value == SelectedValue) ?? new Option();
        await GetSelection.InvokeAsync(Selection);
    }

    // 组件参数变更时触发，处理初始值设置
    protected override async Task OnParametersSetAsync()
    {
        // 只有当InitialValue有效且未同步到SelectedValue时才执行
        if (!string.IsNullOrEmpty(InitialValue) && SelectedValue != InitialValue)
        {
            SelectedValue = InitialValue;
            // 找到对应的选项
            Selection = Options.FirstOrDefault(e => e.Value == InitialValue) ?? new Option();
            // 通知父组件初始选中值
            await GetSelection.InvokeAsync(Selection);
        }
    }

    public class Option
    {
        public Option(string? value = "", string? name = "", string? style = "" )
        {
            Value = value;
            Name = name;
            Style = style;
        }
        public string? Value { get; set; }
        public string? Name { get; set; }
        public string? Style { get; set; }
    }
}

2. 子组件标记（Dropdown.razor）修改

删除<option>上手动添加的selected属性，让Blazor通过@bind自动处理选中状态：

<select @bind="@SelectedValue" @bind:after="SelectionChanged" id="@Id" class="@CSSclass">
    @foreach (var opt in Options)
    {
        <option value="@opt.Value" class="@opt.Style">@opt.Name</option>
    }
</select>

3. 父组件（Index.razor）无需修改

你当前的父组件代码已经正确传递了InitialValue="3"，保持原样即可。

为什么这样有效 #

• Blazor的@bind会将<select>的选中值与SelectedValue双向同步，初始化时给SelectedValue赋值InitialValue，下拉框会自动选中对应选项。
• OnParametersSetAsync方法会在组件参数（包括InitialValue和Options）变更时触发，确保初始值在组件加载完成后正确同步。
• 手动调用GetSelection.InvokeAsync(Selection)，可以让父组件在初始化时就拿到默认选中的选项，而不是仅在用户手动选择后才更新。

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