如何在单击按钮时将 ID 参数从一个组件传递到另一个组件？

Question

我是新手，我正在尽我所能地表述这个。有这么多新概念要掌握！有什么不明白的请告诉我

我正在制作一个待办事项应用程序作为练习。在页面加载时，我从数据库中获取待办事项并在 foreach 循环中迭代它们，每个待办事项都分配有一个 X 按钮用于删除。这很简单，但是为了修改待办事项文本，我想要一个更新按钮来调出 Blazorise 的模式弹出窗口，以使用它的输入字段。

我的问题是，对于每个按钮，我不知道如何将每个待办事项的 ID 传递到此模式中。对于删除按钮，我可以使用 foreach 循环的“todoItem.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 组件中获取每个项目的 ID 并将其添加到 Modal 组件中的每个按钮？

Answer 1

您的解决方案存在多个问题。首先，您要为每个待办事项 (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
}

还有剃须刀

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

PS。我没有测试过这段代码，但你应该有一个整体的想法:)

如何在单击按钮时将 ID 参数从一个组件传递到另一个组件？

How to pass an ID parameter to Blazorise modal on button click, from one component to another?

c#

blazor

blazorise