如何用MudAutocomplete绑定复杂对象填充表单多字段？

要实现同时填充AgencyName和AgencyIdentifier，你需要让MudAutocomplete绑定完整的AgencyLookupViewModel对象，而不是单独的字符串字段。以下是具体步骤和修改后的代码：

1. 定义临时绑定变量 #

在组件代码中添加一个用于绑定自动完成选中项的变量：

private AgencyLookupViewModel? SelectedAgency { get; set; }

2. 修改MudAutocomplete配置 #

更新组件的绑定方式，指定显示文本的规则，并添加选中项变更事件同步表单字段：

<EditForm Model="@ApplicationUser" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />
    <MudDialog Style="width:550px;height:650px;">
        <DialogContent>
            <MudGrid>
                <MudItem xs="12">
                    <MudCard>
                        <MudCardContent>
                            <MudStack Row="true">
                                <MudStack Row="true">
                                    <MudAutocomplete Label="Agency" 
                                                     @bind-Value="@SelectedAgency" 
                                                     Required="true"
                                                     SearchFunc="@AgenciesAsync" 
                                                     Immediate="true"  
                                                     ResetValueOnEmptyText="true"
                                                     AdornmentIcon="@MudBlazor.Icons.Material.Filled.Search" 
                                                     AdornmentColor="MudBlazor.Color.Primary"
                                                     TextExpression="@(() => SelectedAgency?.AgencyName)"
                                                     TextGetter="@(item => item?.AgencyName ?? string.Empty)"
                                                     SelectedItemChanged="@OnAgencySelected"
                                                     For="@(() => ApplicationUser.AgencyName)" />

                                    <!-- 隐藏字段存储AgencyIdentifier，确保表单提交时能传递值 -->
                                    <MudHidden>
                                        <InputText @bind-Value="@ApplicationUser.AgencyIdentifier" />
                                    </MudHidden>
                                </MudStack>
                            </MudStack>
                        </MudCardContent>
                        <MudCardActions>
                            <div Class="pr-2">
                                <MudButton Variant="Variant.Filled" StartIcon="@MudBlazor.Icons.Material.Filled.Cancel" Color="MudBlazor.Color.Error" Size="MudBlazor.Size.Small" OnClick="Cancel" ButtonType="MudBlazor.ButtonType.Button">Cancel</MudButton>
                            </div>
                            <div Class="pr-2">
                                <MudButton Variant="Variant.Filled" StartIcon="@MudBlazor.Icons.Material.Filled.Save" Color="MudBlazor.Color.Success" Size="MudBlazor.Size.Small" ButtonType="MudBlazor.ButtonType.Submit">Save</MudButton>
                            </div>
                        </MudCardActions>
                    </MudCard>
                </MudItem>
            </MudGrid>
        </DialogContent>
    </MudDialog>
</EditForm>

3. 实现选中项同步逻辑 #

添加OnAgencySelected方法，在用户选择机构时同步更新ApplicationUser的两个字段：

private void OnAgencySelected(AgencyLookupViewModel? selectedItem)
{
    if (selectedItem != null)
    {
        ApplicationUser.AgencyName = selectedItem.AgencyName;
        ApplicationUser.AgencyIdentifier = selectedItem.AgencyIdentifier;
    }
    else
    {
        // 清空选择时重置字段
        ApplicationUser.AgencyName = string.Empty;
        ApplicationUser.AgencyIdentifier = Guid.Empty;
    }
}

4. 确认搜索函数正确性 #

你已经修改好的AgenciesAsync函数无需额外调整，确保它返回IEnumerable<AgencyLookupViewModel>即可：

private async Task<IEnumerable<AgencyLookupViewModel?>> AgenciesAsync(string value)
{
    var empty = Enumerable.Empty<AgencyLookupViewModel>();
    if (!String.IsNullOrEmpty(value) && value.Length > 0)
    {
        var agencies = await AgencyService.AgencyAutocompleteLookupAsync(value.Trim());
        var result = Mapper.Map<IEnumerable<AgencyDto>, IEnumerable<AgencyLookupViewModel>>(agencies);
        return result;
    }
    else
    {
        return empty;
    }
}

关键说明 #

• TextExpression和TextGetter用于指定自动完成组件显示的文本内容（即机构名称）
• SelectedItemChanged事件是核心逻辑入口，通过它可以在用户选择项时同步更新模型的多个字段
• 隐藏的InputText确保AgencyIdentifier能被EditForm正确捕获并提交

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