如何在Blazored模态对话框与页面间传递ID参数

你的Edit组件原本通过路由参数接收Id，但在Blazored模态框中使用该组件时，无需依赖路由，直接通过组件参数传递即可，具体操作如下：

1. 调整Edit组件，支持参数接收 #

保留原有的@page "/edit/{Id}"以兼容路由访问，同时添加[Parameter]属性的字段来接收模态框传递的Id：

@page "/edit/{Id}"

@code {
    // 根据你的实际Id类型调整，比如string
    [Parameter]
    public int Id { get; set; }

    protected override void OnInitialized()
    {
        // 在这里用Id加载对应的数据，路由和模态框传递的Id都能生效
    }
}

2. 修改表格中的Edit按钮，传递Id到模态框 #

首先确保页面已注入Blazored.Modal的IModalService：

@inject IModalService modal

然后替换原有的<a>标签为触发模态框的按钮，通过ModalParameters传递Id：

方式一：通过单独方法处理（可读性更好） #

<td>
    <button class="nav-link" @onclick="@(() => OpenEditModal(item.id))">
        <span class="oi oi-pencil" aria-hidden="true">Edit</span>
    </button>
</td>

在页面的@code区块添加打开模态框的方法：

private void OpenEditModal(int itemId)
{
    var modalParams = new ModalParameters();
    modalParams.Add("Id", itemId);

    modal.Show<Edit>("Edit", modalParams);
}

方式二：直接在点击事件中传递（更简洁） #

<td>
    <button class="nav-link" @onclick="@(() => modal.Show<Edit>("Edit", new ModalParameters { { "Id", item.id } }))">
        <span class="oi oi-pencil" aria-hidden="true">Edit</span>
    </button>
</td>

注意 #

如果你的Id是字符串类型，只需把代码中的int替换为string即可。这样修改后，Edit组件既能通过路由正常访问，也能在Blazored模态框中接收Id并加载对应数据。

内容的提问来源于stack exchange，提问作者Joe