MudAutocomplete 使用复杂的对象来设置编辑表单属性的文本和值

Question

我正在使用 MudAutocomplete 实现自动完成功能。如果我只是想将单个搜索值绑定到编辑表单中的模型值中，它效果非常好。但我不知道如何填充两个值。自动完成功能会搜索机构列表，并将机构名称放入表单的机构名称属性中，但我还需要填充隐藏的 AgencyIdentifier 字段。这是我的编辑表单的简化示例，仅显示自动完成功能（实际上表单上还有更多输入字段，这仅用于演示目的）

<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="@ApplicationUser.AgencyName" Required="true"
                                                        SearchFunc="@AgenciesAsync" Immediate="true"  ResetValueOnEmptyText="true"
                                                        AdornmentIcon="@MudBlazor.Icons.Material.Filled.Search" AdornmentColor="MudBlazor.Color.Primary"
                                                        For="@(() => ApplicationUser.AgencyName)" />

                                    
                                         
                                </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>

这是提交有效表单后激活的代码

private async Task OnValidSubmit(EditContext context)
{
    if (context.Validate())
    {
        var agencyDTO = Mapper.Map<UserEditViewModel, ApplicationUser>(ApplicationUser);
        //update & save code goes here
        await InvokeAsync(() => MudDialog.Close(DialogResult.Ok(context)));
    }

}

这是机构查找的搜索功能

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

我正在努力实现一个搜索函数，该函数返回一个包含 AgencyName 和 AgencyIdentifier 的对象

我尝试创建一个简单的视图模型并从搜索功能中返回它，如下所示

public class AgencyLookupViewModel
{
    public Guid AgencyIdentifier { get; set; }
    public string AgencyName { get; set; } = string.Empty;
}

然后我修改了搜索查找

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;
    }

}

我只是不知道如何让它与 MudAutocomplete 一起使用，以便我可以填充表单 AgencyName 和隐藏的 AgencyIdentifier 表单。有人可以帮忙吗？

Answer 1

如果您

SearchFunc

正在使用一个对象，则

MudAutoComplete

组件需要知道该对象是什么。您可以通过指定

T

的

MudAutoComplete

属性来完成此操作。这是一个示例。

这表明

MudAutoComplete

绑定到了

Element

对象。

ToStringFunc

用于显示您想要的内容。在你的情况下，这就是名字。然而，绑定值实际上是一个

Element

。这意味着一旦用户做出选择，您就可以通过绑定

Element

访问完整的

value

，此时您可以获得

AgencyIdentifier

（在示例中，检索元素

Number

）。