Структурные ссылки на элементы в циклах в Blazor

Представьте, что у меня есть поле ввода и кнопка, и когда я нажимаю кнопку, я хочу, чтобы появилось наложение. Легкий. (этот код предназначен для иллюстрации ситуации и может не компилироваться)

<MudOverlay Visible = "isThinking" DarkBackground = "true">
    <MudProgressCircular Indeterminate = "true" />
</MudOverlay>
<MudTextField></MudTextField>
<MudButton OnClick = "SaveItem">Start</MudButton>

(внутри функции «SaveItem» я установлю для «isThinking» значение «true»)

Теперь представьте то же самое внутри цикла элементов.

@foreach (var item in items)
{
    <MudOverlay Visible = "isThinking" DarkBackground = "true">
        <MudProgressCircular Indeterminate = "true" />
    </MudOverlay>
    <MudTextField @bind-Value = "item.Text"></MudTextField>
    <MudButton OnClick = "@(async () => await SaveItem(item))">Start</MudButton>
}

Мой вопрос: как мне определить правильный «MudOverlay» при нажатии кнопки? Я не могу просто использовать isThinking, потому что это активирует MudOverlay для каждого элемента.

Моя лучшая идея на данный момент - поставить Dictionary<string, bool> isThinkingList там, где я храню isThinking статус для каждого цикла, а затем я использую Visible = "@(isThinkingList[item.Id])"

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

OnClick = "@(SaveItem(item))" не получится. Сделайте это немного более реальным.
H H 06.02.2023 09:45

Хорошо, я изменил это на @(async () => await SaveItem(item)) - я думаю, что это должно работать.

Niels Brinch 06.02.2023 10:08

Верно. Но здесь вы можете «опустить» async/await: @(() => SaveItem(item)) делает то же самое. |EvenCallback адаптируется.

H H 06.02.2023 16:08
Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare
Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare
Как развернуть сайты с помощью Blazor, Angular и React с репозиторием на GitHub на Cloudflare.
0
3
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Самый простой способ - это иметь item.IsThinking.

Когда item является ViewModel, проблем нет. В противном случае сделайте (это) ViewModel.

Я понимаю. Спасибо. Я использую «предмет» как вещь, которую я отправляю на сервер. Можно ли отправить ViewModel на сервер, чтобы сохранить его? Или мне следует скопировать значения в другой элемент непосредственно перед вызовом бэкэнда?

Niels Brinch 06.02.2023 09:55

IsThinking кажется очень связанным с пользовательским интерфейсом, бессмысленным для бэкэнда и API. Так что да, сделайте отдельный слой ViewModel. Сопоставление с/от DTO с помощью, например, AutoMapper.

H H 06.02.2023 14:14

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