如何将带有参数的 onclick 添加到 Blazor 中的按钮？

Question

我在 Blazor 服务器端应用程序中有以下代码：

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Email</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var applicationUser in ApplicationUsers)
            {
                string userId = applicationUser.Id;
                Guid? personId = applicationUser.PersonId;

                <tr>
                    <td>@applicationUser.Email</td>
                    <td>@applicationUser.PersonName</td>
                    @if (personId != null)
                    {
                        <td>
                            <button class="btn btn-block btn-primary" @onclick="() => ShowEditPersonDialog(personId)" style="color: rgb(255, 255, 255); background-color: rgb(49, 56, 215);" @type="button">Edit Person</button>
                        </td>
                    }
                </tr>
            }
        </tbody>
    </table>
</div>

然而这个：

@onclick="() => ShowEditPersonDialog(personId)"

...不起作用。由于它在组件上方加载，直到第一行的第一个按钮（有 4 个用户 - 应加载 4 行），然后按钮无法正确呈现并引发未处理的异常：

我试过了：

• @onclick="() => ShowEditPersonDialog(personId)" - 上面显示的异常
• @onclick="(e) => ShowEditPersonDialog(e, personId)" - 上面显示的异常
• @onclick="e => ShowEditPersonDialog(e, personId)" - 上面显示的异常
• @onclick="@(e => ShowEditPersonDialog(e, personId))" - 上面显示的异常
• @onclick="(e) => ShowEditPersonDialog(e)" - 上面显示的异常
• @onclick="e => ShowEditPersonDialog(e)" - 上面显示的异常
• @onclick="@(e => ShowEditPersonDialog(e))" - 上面显示的异常
• @onclick="() => ShowEditPersonDialog()" - 上面显示的异常
• @onclick=@"() => ShowEditPersonDialog(personId)" - 不编译，语法错误
• @onclick="@(() => ShowEditPersonDialog(personId))" - 上面显示的异常
• onclick="() => ShowEditPersonDialog(personId)" - 编译、运行和渲染，但按钮没有响应
• onclick="@(() => ShowEditPersonDialog(personId))" - 不编译 - 无法将 lambda 表达式转换为类型“对象”，因为它不是委托类型
• onclick="(e) => ShowEditPersonDialog(e, personId)"- 编译、运行和渲染，但按钮没有响应
• onclick="e => ShowEditPersonDialog(e, personId)" - 编译、运行和渲染，但按钮没有响应
• onclick="@((e) => ShowEditPersonDialog(e, personId))" - 不编译 - 无法将 lambda 表达式转换为类型“对象”，因为它不是委托类型
• onclick="@(e => ShowEditPersonDialog(e, personId))" - 不编译 - 无法将 lambda 表达式转换为类型“对象”，因为它不是委托类型
• onclick="@(e => ShowEditPersonDialog(e))" - 不编译 - 无法将 lambda 表达式转换为类型“对象”，因为它不是委托类型

我他妈的怎么写这个东西？？我只是想要一个按钮将给定行的相关 personId 传递给 ShowEditPersonDialog 方法。

Answer 1

更改按钮，这一点-删除@从type="button"和使用@onclick="@(() => ShowEditPersonDialog(personId))"

<button class="btn btn-block btn-primary" 
    @onclick="@(() => ShowEditPersonDialog(personId))" 
    style="color: rgb(255, 255, 255); background-color: rgb(49, 56, 215);" 
    type="button">Edit Person</button>

将内联按钮 css 样式移动到 css 文件中的一个类也很好，这样 HTML 标记更易于阅读:)