Выбор ввода в Blazor 8

Я изучаю Blazor 8 и столкнулся с проблемой: У меня есть список лиц. Объект Person имеет идентификатор, имя и возраст. Я хотел бы использовать две раскрывающиеся кнопки для отображения или управления друг другом. После выбора имени в раскрывающемся списке возраста должен отображаться возраст имени выбранного человека и наоборот. Я не хочу использовать JSRuntime.

Спасибо за вашу помощь

с помощью следующего кода я могу получить возраст после выбора имени и наоборот. Но я не могу установить их в раскрывающемся списке:

@inject PersonContext DB

<div class = "mb-3">
    <label for = "pAge" class = "form-label">Age:</label>
    <InputSelect @bind-Value = "selectedAge">                          
        <option value = "">select an age...</option>
        @foreach (var pers in DB.Persons)
        {
            <option value = "@pers.Name">
                @pers.Age
            </option>
        }
    </InputSelect>
</div>  
<div class = "mb-3">
    <label for = "pName" class = "form-label">name:</label> 
    <InputSelect @bind-Value = "selectedName">
        <option value = "">select a name...</option>
        @foreach (var pers in DB.Persons)
        {
            <option value = "@pers.Age">
                @pers.Name
            </option>
        }
    </InputSelect>
</div>  

@code {
    public string? selectedName { get; set; } = string.Empty;
    public string? selectedAge { get; set; } = string.Empty;
}

Чего вы достигли на данный момент?

— 19.06.2024 11:09

Используйте событие @bind-Value:after, чтобы изменить выбранное значение в другом раскрывающемся списке, установив selected = "true" P.S. : Как вы обеспечиваете соотношение Возраст : Человек 1:1? несколько человек могут иметь один и тот же возраст.

— 19.06.2024 15:40

Спасибо за ваш ответ. Я протестирую и сообщу вам. Что касается отношений, это просто для обучения, меня не волновала логика.

— 19.06.2024 15:46

asp.net-core blazor

19.06.2024 10:55

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Я думаю, смешивать @bind-Value = "selectedAge" с option value = "@pers.Name" — не лучшая идея. Вы можете попробовать следующий образец:

@page "/"

<div class = "mb-3">
    <label for = "pAge" class = "form-label">Age:</label>
    <InputSelect @bind-Value = "selectedAge" @bind-Value:after = "AgeChanged">                          
        <option value = "">select an age...</option>
        @foreach (var pers in Persons)
        {
            <option value = "@pers.Age">
                @pers.Age
            </option>
        }
    </InputSelect>
</div>  
<div class = "mb-3">
    <label for = "pName" class = "form-label">name:</label> 
    <InputSelect @bind-Value = "selectedName" @bind-Value:after = "NameChanged">
        <option value = "">select a name...</option>
        @foreach (var pers in Persons)
        {
            <option value = "@pers.Name">
                @pers.Name
            </option>
        }
    </InputSelect>
</div>  

@code {
    private void AgeChanged()
    {
        var choosedPerson = Persons.FirstOrDefault(p => p.Age==selectedAge);
        selectedName = choosedPerson.Name;
    }
    private void NameChanged()
    {
        var choosedPerson = Persons.FirstOrDefault(p => p.Name == selectedName);
        selectedAge = choosedPerson.Age;
    }

    public string? selectedName { get; set; } = string.Empty;
    public string? selectedAge { get; set; } = string.Empty;

    List<Person> Persons = new List<Person>
    {
        new Person{Name = "Tom",Age = "11"},
        new Person{Name = "Alex",Age = "12"},
        new Person{Name = "Kite",Age = "13"},
        new Person{Name = "Josh",Age = "14"},
    };

    public class Person
    {
        public string Name{ get; set; }
        public string Age { get; set; }
    }
}

Спасибо. Он работает, но требует некоторой доработки.

— 20.06.2024 07:55

20.06.2024 04:25