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

Question

我是新手，我正在尽我所能地制定这个。有很多新概念可以掌握！如果我不清楚，请告诉我。

我正在制作一个 Todo 应用程序作为练习。在页面加载时，我从数据库中获取待办事项并在 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组件中的每个item中获取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。我没有测试过这段代码，但你应该有一个整体的想法:)