Блог

Я новичок и пытаюсь сформулировать это как можно лучше. Так много новых концепций, которые нужно освоить! Пожалуйста, скажите мне, если я неясен.

Я создаю Todo-приложение в качестве упражнения. При загрузке страницы я получаю элементы задач из базы данных и повторяю их в цикле foreach, каждому todo присваивается X-кнопка для удаления. Это было легко, но для изменения текста задачи мне нужна кнопка обновления, которая вызывает модальное всплывающее окно Blazorise, чтобы использовать его поле ввода.

Моя проблема в том, что я не понимаю, как передать идентификатор каждого элемента todo в этот модальный, для каждой кнопки, которая есть. Для кнопки удаления я мог бы использовать «TodoItem» цикла foreach.Переменная Id», но поскольку Blazorise модальный — это другой компонент, я не могу.

Вот как выглядит моя индексная страница:

 @page "/"
@using TodoApp.App.Components

<section class="todo-container">
    @if (TodoItems != null)
    {
        @foreach (var todoItem in TodoItems)
        {
            if (todoItem.IsDone == false)
            {
                <div class="todo-item">
                    <p>@todoItem.Text</p>
                    <UpdatePopup OnTodoItemUpdated="UpdateAndLoad"></UpdatePopup>
                    <Button class="remove-btn" Clicked="(() => RemoveTodoItem(todoItem.Id))">X</Button>
                </div>
            }
        }
    }
</section>

<Popup OnTodoItemAdded="UpdateAndLoad"></Popup>

  

Эта кнопка находится внутри самого модального: <Button Clicked="@ShowModal">...</Button> , и я бы хотел сделать то же самое, что и с кнопкой удаления, добавив что-то вроде () => UpdateTodoItem(todoItem.Id) .

Как получить идентификатор из каждого элемента в компоненте Index и добавить его к каждой кнопке в модальном компоненте?

С вашим решением связано несколько проблем. Во-первых, вы создаете модальный для каждого элемента todo ( UpdatePopup ), что очень неэффективно. Вместо этого вы должны создать только один модальный режим обновления и использовать его для всех элементов.

 @page "/"
@using TodoApp.App.Components

<section class="todo-container">
    @if (TodoItems != null)
    {
        @foreach (var todoItem in TodoItems)
        {
            if (todoItem.IsDone == false)
            {
                <div class="todo-item">
                    <p>@todoItem.Text</p>
                    <Button class="update-btn" Clicked="(() => updatePopupRef.Show(todoItem))">Edit</Button>
                    <Button class="remove-btn" Clicked="(() => RemoveTodoItem(todoItem.Id))">X</Button>
                </div>
            }
        }
    }
</section>

<UpdatePopup @ref="@updatePopupRef" OnTodoItemUpdated="UpdateAndLoad" />

<Popup OnTodoItemAdded="UpdateAndLoad" />
@code{
UpdatePopup updatePopupRef;
}
  

И тогда у UpdatePopup вас есть что-то вроде этого:

 void Show(TodoItem item)
{
    this.Item = item; // use this to bind item values to input fields

    modalRef.Show(); // you also need to have modalRef set with @ref attribute
}
  

и в razor

 <TextEdit @bind-Text="@Item.Name" />
  

PS. Я не тестировал этот код, но у вас должно быть общее представление 🙂