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

【问题标题】：How to add onclick with parameter to button in Blazor?如何在 Blazor 中将带有参数的 onclick 添加到按钮？
【发布时间】：2020-12-20 18:12:47
【问题描述】：

我在 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 方法。

【问题讨论】：

@onclick="() => ShowEditPersonDialog(personId)"
@Eliseo 导致问题中显示的异常

标签： c# razor blazor razor-pages blazor-server-side

【解决方案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 标记更易于阅读:)

【讨论】：

我认为"@(()=>...." 中的@ 是不必要的
不@Eliseo 它不是。考虑一下：@() - 这是一个空表达式。因此，如果 @() => 是 @()，Blazor 将无法解析。因此第二组 ()
参考：docs.microsoft.com/en-us/aspnet/core/blazor/components/…
这修复了它！谢谢，我不知道 @type="button" 是问题所在，我只是按照其他人的做法。整个解决方案将在某个时候被清理，我只是专注于让它首先工作。
@Quango，我只检查了@onclick="() => ShowEditPersonDialog(personId)" 或@onclick="(() => ShowEditPersonDialog(personId))"，它们都对我有用——在一个非常简单的应用程序 WSAM 中——