页面加载时如何预设选中Fluent UI Blazor FluentAutocomplete选项

问题描述 #

我使用Fluent UI Blazor的FluentAutocomplete组件，基础功能正常，但遇到两个问题：

• 页面加载时想自动选中德国，用了OptionSelected="@(x => x.Name == "Germany")"但未生效
• 开发人员编辑表单时，如何根据已有人员信息预设选中对应的国家

问题1：页面加载自动选中指定选项 #

OptionSelected参数主要用于单选模式下动态标记选项是否被选中，但初始化选中的核心是直接给双向绑定的SelectedItems赋值，无需依赖OptionSelected。

修改后的代码示例：

<FluentAutocomplete TOption="Country"
                    AutoComplete="off"
                    Autofocus="true"
                    Label="Select a country"
                    Placeholder="Select country"
                    OnOptionsSearch="@OnSearchAsync"
                    OptionText="@(x => x.Name)"
                    @bind-SelectedOptions="@SelectedItems"/>

@code {
  List<Country> allCountries = new List<Country>();
  IEnumerable<Country> SelectedItems = Array.Empty<Country>();

  protected override void OnInitialized()
  {
    InitCountries();
    // 初始化时直接从选项列表中筛选目标项赋值
    SelectedItems = allCountries.Where(x => x.Name == "Germany");
  }
  void InitCountries()
  {
    allCountries.Add(new Country { Name = "Germany" });
    allCountries.Add(new Country { Name = "France" });
    allCountries.Add(new Country { Name = "United Arab Emirates" });
  }
  private async Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
  {
    e.Items = allCountries.Where(x => x.Name.StartsWith(e.Text));
  }

  class Country
  {
    public string? Name { get; set; } = string.Empty;
  }
}

问题2：编辑模式下预设选中人员的国家 #

编辑场景中，只需从后端获取人员的国家信息，再从选项列表中匹配对应的Country对象，赋值给双向绑定的选中项集合即可。

结合表单的示例代码：

<EditForm Model="@CurrentPerson" OnValidSubmit="@HandleSubmit">
  <!-- 其他表单字段 -->
  <InputText @bind-Value="CurrentPerson.Name" Label="姓名" />
  <InputText @bind-Value="CurrentPerson.Phone" Label="电话" />
  <InputText @bind-Value="CurrentPerson.Email" Label="邮箱" />

  <!-- 国家选择组件 -->
  <FluentAutocomplete TOption="Country"
                      AutoComplete="off"
                      Label="选择国家"
                      Placeholder="请选择国家"
                      OnOptionsSearch="@OnSearchAsync"
                      OptionText="@(x => x.Name)"
                      @bind-SelectedOptions="@SelectedCountry"/>

  <FluentButton Type="ButtonType.Submit">保存</FluentButton>
</EditForm>

@code {
  Person CurrentPerson = new Person();
  List<Country> allCountries = new List<Country>();
  IEnumerable<Country> SelectedCountry = Array.Empty<Country>();

  protected override async Task OnInitializedAsync()
  {
    InitCountries();
    // 模拟从后端获取待编辑的人员信息
    CurrentPerson = await GetPersonFromApi(1);
    // 根据人员的国家名称匹配选项，设置选中状态
    SelectedCountry = allCountries.Where(x => x.Name == CurrentPerson.CountryName);
  }

  void InitCountries()
  {
    allCountries.Add(new Country { Name = "Germany" });
    allCountries.Add(new Country { Name = "France" });
    allCountries.Add(new Country { Name = "United Arab Emirates" });
  }

  private async Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
  {
    e.Items = allCountries.Where(x => x.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase));
  }

  // 模拟API获取人员数据
  private async Task<Person> GetPersonFromApi(int id)
  {
    return new Person 
    { 
      Id = id, 
      Name = "张三", 
      Phone = "13800138000", 
      Email = "zhangsan@example.com",
      CountryName = "France" // 人员已选国家
    };
  }

  private async Task HandleSubmit()
  {
    // 提交时同步选中的国家信息到人员模型
    CurrentPerson.CountryName = SelectedCountry.FirstOrDefault()?.Name;
    // 调用API保存逻辑
    // await SavePersonToApi(CurrentPerson);
  }

  class Country
  {
    public string? Name { get; set; } = string.Empty;
  }

  class Person
  {
    public int Id { get; set; }
    public string? Name { get; set; }
    public string? Phone { get; set; }
    public string? Email { get; set; }
    public string? CountryName { get; set; }
  }
}

关键注意点 #

• 实际项目中建议用国家唯一ID（而非名称）进行匹配，避免名称重复或拼写不一致的问题
• 确保SelectedCountry的集合类型与组件绑定的类型一致（这里是IEnumerable<Country>）

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