当TOption为类对象时，如何让FluentAutocomplete绑定CountryId

问题背景 #

模型定义 #

Country.cs

public class Country
{
    public long Id { get; set; }
    public string Code { get; set; }
    public string Name { get; set; }
}

Airport.cs

public class Airport : BaseModel
{
    public long Id { get; set; }
    public string IATA { get; set; }
    public string ICAO { get; set; }
    public string Name { get; set; }
    public long CountryId { get; set; }
}

当前实现代码 #

在机场创建/编辑表单中使用FluentAutocomplete选择国家：

<FluentAutocomplete TOption="Country"
                    Items="countries"
                    AutoComplete="ComboboxAutocomplete.List"
                    Label="Country"
                    Placeholder="Select country"
                    OptionText="@(c => c.Name)"
                    OptionValue="@(c => c.Id.ToString())"
                    @bind-value="SelectedCountry"
                    Required Style="width: 80%" />

对应的绑定变量：

private string? SelectedCountry
{
    get => Content.CountryId.ToString();
    set {
        if (long.TryParse(value, out var Id))
        {
            Content.CountryId = Id;
        }
    }
}

问题描述 #

当前SelectedCountry的setter接收到的是选中国家的Name值，而非预期的Id字符串，导致无法正确设置Content.CountryId。

解决方案 #

方案1：绑定选中的完整Country对象（推荐） #

直接绑定选中的Country实例，跳过字符串解析步骤，逻辑更直观且不易出错：

1. 定义绑定的Country变量：

private Country? SelectedCountryOption { get; set; }

2. 修改FluentAutocomplete的绑定参数：

<FluentAutocomplete TOption="Country"
                    Items="countries"
                    AutoComplete="ComboboxAutocomplete.List"
                    Label="Country"
                    Placeholder="Select country"
                    OptionText="@(c => c.Name)"
                    OptionValue="@(c => c.Id.ToString())"
                    @bind-SelectedOption="SelectedCountryOption"
                    Required Style="width: 80%" />

3. 为变量添加自定义getter和setter，关联到Content.CountryId：

private Country? SelectedCountryOption
{
    get => countries.FirstOrDefault(c => c.Id == Content.CountryId);
    set 
    {
        if (value != null)
        {
            Content.CountryId = value.Id;
        }
    }
}

方案2：修复@bind-value的绑定逻辑 #

如果坚持使用@bind-value，可以通过以下步骤确保组件正确识别OptionValue：

• 升级Fluent UI Blazor到最新版本，旧版本可能存在绑定逻辑bug
• 显式指定ValueExpression参数，帮助组件正确映射值：

<FluentAutocomplete TOption="Country"
                    Items="countries"
                    AutoComplete="ComboboxAutocomplete.List"
                    Label="Country"
                    Placeholder="Select country"
                    OptionText="@(c => c.Name)"
                    OptionValue="@(c => c.Id.ToString())"
                    @bind-value="SelectedCountry"
                    ValueExpression="@(() => SelectedCountry)"
                    Required Style="width: 80%" />

保持原SelectedCountry的getter和setter不变，确保能正确解析Id字符串。

说明 #

Fluent UI Blazor的FluentAutocomplete中，OptionValue用于指定选项对应的值字符串，@bind-value理论上应绑定该值。但直接绑定SelectedOption更符合组件设计意图，能避免字符串转换的潜在问题。

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