Blazor如何将参数传递给onclick函数？

Question

我想创建一个按钮onclick函数，接受一些输入。

<button onclick="@test(123, 456)">Check</button>

@functions
{
    public void test(int a, int b)
    {
        Console.WriteLine(a + b);
    }
}

但不知为何它会抛出错误：

参数 "1"：无法将 void 转换为 string

稍后我想用 for 循环创建这些按钮，例如：

@for (int i = 0; i < 10; i++)
{
    <button onclick="@test(i, 5 * i)">Check</button>
}

我该如何实现这个目标呢？

- Axelly

---

看起来你的函数需要有一个返回类型，请尝试将void更改为string。 - DalTron

@DalTron 我把void改成了string并添加了“return a” - 现在单击按钮会在控制台上显示“ReferenceError：a未定义”，刷新页面后会显示“579”，这是123 + 456，但为什么？ - Axelly

它能与lambda一起使用吗？@for (int i = 0; i < 10; i++) { 检查 } - bcwhims

@bcwhims 很好！请将其写成答案！ - Axelly

相关：@onclick=“(() => SomeMethod(parameter))” - dani herrera

Answer 1

试着使用lambda表达式。你将onclick绑定到函数执行的结果而不是函数本身。

@for (int i = 0; i < 10; i++)
{
    var buttonNumber = i;
    <button @onclick="@(e => test(buttonNumber, 5 * buttonNumber))">Check</button>
}

- bcwhims

---

谢谢，我也发现这个 Blazor 文档对此很有帮助。https://learn.microsoft.com/en-us/aspnet/core/blazor/event-handling?view=aspnetcore-3.1 - Jason Honingford

我已经尝试过这个，但一直出现错误“无法将 lambda 表达式转换为类型 'object'，因为它不是委托类型”。 - ataraxia

当发生这种情况时，您需要使用EventCallback.Factory显式创建EventCallback。文档在此处：https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.eventcallbackfactory?view=aspnetcore-3.1 - Nechemia Hoffmann

请将英文翻译成中文。只返回翻译后的文本：不需要引号，这不是 JavaScript！ - undefined

Answer 2

我试过这个，有效的。

@onclick="(() => FunctionName(argument))"

喜欢

@onclick="(() => GetDetail(item.UserId))"

灵感来源于https://github.com/aspnet/AspNetCore/issues/15956。

- sami ullah

---

@onclick="() => FunctionName(argument)" 也可以使用，不需要额外加括号。 - Gilad Pomer

Answer 3

onclick属性中的“at sign”表示这是一个 C# 函数：

@onclick = "@(() => test(i, 5*i))"

- MrCalico

---

尽管代码没问题，但解释毫无意义。代码中没有&符号。 - Knelis

我说的是"At"而不是"Amper" ;) - MrCalico

Answer 4

这里是包含以下内容的完整语法：

1. 异步方法。
2. 传递MouseEventArgs参数。
3. 自定义参数。

<button @onclick="@(async (args) => await ButtonEvent(args, 5))">My Button</button>

@code {
   async Task ButtonEvent(MouseEventArgs args, int CustomParameter)
   {
            
   }
}

- Alt-WN

---

正确但效率较低。您可以从lambda中删除async和await。这使其稍微变小和更快。 - H H

但是，当您的ButtonEvent需要异步处理（例如，它调用异步方法）时，这是最简单的解决方案（无需创建Task对象）。 - Alt-WN

没有这两个关键字，它做的事情完全相同（异步）。搜索“省略async await”。 - H H

Answer 5

以下的输入和按钮类型对我都有效。

<td>
    <input type="button" class="btn btn-primary" value="Delete"
    @onclick="(() => this.DeleteTodoItem(todoItem.Id))"  />
</td>
<td>
    <button class="btn btn-primary" 
    @onclick="(() => this.DeleteTodoItem(todoItem.Id))">Delete</button>
</td>

- VivekDev

Answer 6

<input type="button" @onclick="@(() => functionname(paramvalue))" class="....." value="DoSomething" />

- Abbas Hadavandi