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

Posted 2023-03-27

【中文标题】Blazor 如何将参数传递给 onclick 函数？

【英文标题】：Blazor how to pass arguments to onclick function?

【发布时间】：2019-01-21 21:00:56

【问题描述】：

我想做按钮onclick 需要一些输入的功能。

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

@functions

    public void test(int a, int b)
    
        Console.WriteLine(a + b);
    

但由于某种原因，它会引发错误：

Argument "1": Cannot convert from void to string

稍后我想在 for 循环中创建这些按钮

@for (int i = 0; i < 10; i++)

    <button onclick="@test(i, 5 * i)">Check</button>

我怎样才能做到这一点？

【问题讨论】：

看起来你需要在你的函数上有一个返回类型，尝试将 void 更改为字符串

@DalTron 我将 void 更改为字符串并添加了“return a” - 现在 onClick 按钮显示在控制台 ReferenceError: a is not define 上，刷新页面后它显示 579 这是 123+456 但为什么？跨度>

它是否适用于 lambda？ @for (int i = 0; i test(i, 5 * i))">检查

@bcwhims 完美！请把它写成答案！

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

【参考方案1】：

用 lambda 试试。您将 onclick 绑定到函数的结果而不是函数本身。

@for (int i = 0; i < 10; i++)

    var buttonNumber = i;
    <button @onclick="@(e => test(buttonNumber, 5 * buttonNumber))">Check</button>

【讨论】：

谢谢，我还发现 Blazor 文档对此很有帮助。 docs.microsoft.com/en-us/aspnet/core/blazor/…

我已经尝试过了，但一直收到错误Cannot convert lambda expression to type 'object' because it is not a delegate type

发生这种情况时，您需要使用EventCallback.Factory 显式创建EventCallback。此处的文档：docs.microsoft.com/en-us/dotnet/api/…

【参考方案2】：

我试过这个并且成功了

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

喜欢

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

从https://github.com/aspnet/AspNetCore/issues/15956 得到想法。

【讨论】：

@onclick="() => FunctionName(argument)" 也可以，不需要额外的括号

【参考方案3】：

onclick 上的 Sign 指定它是 C# 函数：

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

【讨论】：

虽然代码没问题，但解释毫无意义。代码中没有与号 (&)。

我说的是“At”而不是“Amper”；）

【参考方案4】：

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

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