Blazor MudAutoComplete选中项显示异常：需显示描述并绑定ID

问题原因 #

当MudAutocomplete绑定复杂对象（如AssessmentType）时，选中状态默认调用对象的ToString()方法，而.NET类默认的ToString()返回完整命名空间+类名，所以你看到的是“SarisApplication.Data.AssessmentType”。你添加的ItemTemplate仅控制下拉搜索结果的显示，选中后的输入框显示需要额外配置。

两种可行方案 #

方案1：重写AssessmentType模型的ToString()方法

直接在模型类中重写ToString()，让它返回你需要显示的AssessmentDescription字段。这种方式全局生效，任何地方调用该对象的ToString()都会显示描述。

public class AssessmentType
{
    public long AssessmentTypeId { get; set; }
    public string AssessmentDescription { get; set; }

    // 重写ToString方法，返回描述文本
    public override string ToString()
    {
        return AssessmentDescription ?? string.Empty;
    }
}

方案2：在MudAutocomplete组件中配置显示逻辑

如果不想修改模型类，可以通过组件的ToStringFunc或ValueTemplate指定选中后的显示内容：

方式A：使用ToStringFunc

直接指定一个函数，返回选中对象的描述字段：

<MudAutocomplete T="AssessmentType" Label="Search Assessment Type"
                 ResetValueOnEmptyText="true"
                 Placeholder="Type to search assessment"
                 AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary"
                 @bind-Value="SelectedAssessmentType" SearchFunc="SearchAssessmentType"
                 ShowProgressIndicator="true"
                 <!-- 新增ToStringFunc，指定选中时显示的文本 -->
                 ToStringFunc="@(item => item?.AssessmentDescription ?? string.Empty)">
    <ItemTemplate Context="assessment">
        <MudText>
            @assessment.AssessmentDescription
        </MudText>
    </ItemTemplate>
</MudAutocomplete>

方式B：使用ValueTemplate

通过模板自定义选中后的显示内容，灵活性更高（比如可以添加图标或其他样式）：

<MudAutocomplete T="AssessmentType" Label="Search Assessment Type"
                 ResetValueOnEmptyText="true"
                 Placeholder="Type to search assessment"
                 AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary"
                 @bind-Value="SelectedAssessmentType" SearchFunc="SearchAssessmentType"
                 ShowProgressIndicator="true">
    <ItemTemplate Context="assessment">
        <MudText>
            @assessment.AssessmentDescription
        </MudText>
    </ItemTemplate>
    <!-- 新增ValueTemplate，自定义选中后的显示 -->
    <ValueTemplate Context="selectedItem">
        @if (selectedItem != null)
        {
            <MudText>@selectedItem.AssessmentDescription</MudText>
        }
    </ValueTemplate>
</MudAutocomplete>

效果验证 #

以上方案都能实现：

• 搜索下拉列表显示AssessmentDescription
• 选中后输入框同样显示AssessmentDescription
• 保持绑定完整的AssessmentType对象，后端依然可以通过SelectedAssessmentType.AssessmentTypeId获取ID

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