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

Posted 2023-03-27

【中文标题】如何在 Blazor 中将带有参数的 onclick 添加到按钮？

【英文标题】：How to add onclick with parameter to button in Blazor?

【发布时间】：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 导致问题中显示的异常

【参考方案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 中——