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

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 表达式转换为类型“对象”，因为它不是委托(delegate)类型

onclick="(e) => ShowEditPersonDialog(e, personId)" - 编译、运行和渲染，但按钮没有响应

onclick="e => ShowEditPersonDialog(e, personId)" - 编译、运行和渲染，但按钮没有响应

onclick="@((e) => ShowEditPersonDialog(e, personId))" - 不编译 - 无法将 lambda 表达式转换为类型“对象”，因为它不是委托(delegate)类型

onclick="@(e => ShowEditPersonDialog(e, personId))" - 不编译 - 无法将 lambda 表达式转换为类型“对象”，因为它不是委托(delegate)类型

onclick="@(e => ShowEditPersonDialog(e))" - 不编译 - 无法将 lambda 表达式转换为类型“对象”，因为它不是委托(delegate)类型

我怎么写这个东西？？我只是想要一个按钮将给定行的相关 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 标记更易于阅读:)