MudAutocomplete со сложным объектом для установки текста и значения свойств формы редактирования

Я реализую функцию автозаполнения, используя 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. Кто-нибудь может помочь?

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
178
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если ваш SearchFunc использует объект, компонент MudAutoComplete должен знать, что это за объект. Вы делаете это, указывая свойство T объекта MudAutoComplete. Вот пример.

<MudAutocomplete T = "Element" 
                 @bind-Value = "value" 
                 SearchFunc = "@Search" 
                 ToStringFunc = "@(e=> e==null?null : $"{e.Name} ({e.Sign})")"/>

Это показывает, что MudAutoComplete привязан к объекту Element. ToStringFunc используется для отображения того, что вы хотите. В вашем случае это будет Name (в примере используются имя и знак). Значение привязки — это переменная Element, которая устанавливается в соответствии с выбором пользователя. Это означает, что как только пользователь сделает выбор, вы получите доступ ко всему выбранному Element через привязку value. Это означает, что теперь вы можете получить AgencyIdentifier или любое другое общедоступное свойство, доступное для объекта (в примере извлекается элемент Number).

удалось заставить это работать, но как мне выполнить проверку в этом сценарии? Мне нужны и идентификатор, и имя.

misuk 24.06.2024 16:11

Другие вопросы по теме