如何在 Razor 页面上动态添加 onclick？

Question

我正在遍历一个大型对象列表，所有这些对象都将打开同一个模式窗口，该窗口将加载动态信息。为了完成这项工作，我创建了一个名为 MenuCounter 的计数器，我知道它的增量很好。

也就是说，我正在尝试在我需要使用的图标周围加上一个超链接，并且该方法的注入一直指向 MenuCounter 的最后一个值。

我第一次尝试这个：

<a href="#" onclick="@(() => SetupChangeName(MenuCounter))" class="menuButton">...</a>

当我遇到问题时，我尝试将代码缩减为以下代码，但随后页面以某种方式激活了超链接，并且模式窗口出现并且不会消失。

<a href="#" onclick="SetupChangeName(MenuCounter)" class="menuButton">...</a>

有人可以帮帮我吗？

谢谢！

Answer 1

您应该将 lambda 表达式应用于 Blazor @onclick 指令，而不是使用 onclick Html 属性，在这种情况下，它应该调用 JS 函数，这不是您的意思。

请注意，我引入了一个新指令来防止锚元素的默认操作：@onclick:preventDefault

测试这段代码：

@page "/"


<a href="#" @onclick:preventDefault @onclick="@(() => SetupChangeName(MenuCounter))" >Click me...</a>

 <div>Counter is @output</div>
@code
{
    private int MenuCounter = 10;
    private int output;

    private void SetupChangeName (int counter)
    {
        output = counter;
    }
}

注意：如果使用 for 循环来呈现锚元素列表，则必须在循环中定义一个局部变量，并将其作为 lambda 表达式的输入，如下所示：

@for(int MenuCounter = 0; MenuCounter < 10; MenuCounter++)
{
   int local= MenuCounter; 
   <a href="#" @onclick:preventDefault @onclick="@(() => 
       SetupChangeName(local))" >Click me...</a> 
}

否则，所有 lambda 表达式都将具有相同的 MenuCounter 值，这是最后一次迭代增加的值。请参阅 For loop not returning expected value - C# - Blazor 解释问题。

Answer 2

我不是onclick属性的粉丝，但是如果你设置了这个方法，我相信你只需要像这样在同一行中清理C#和JS：

<a href="#" onclick="SetupChangeName('@MenuCounter')" class="menuButton">...</a>

添加引号将确保 JS 至少存在一个空字符串，然后您可以对其进行处理。

替代方法

由于混合这样的语言非常令人沮丧，我发现使用数据标签更容易，例如

<a href="#" data-menu-counter="@MenuCounter" class="menuButton">...</a>

然后在你的 JS 文件中：

var links = document.querySelectorAll('[data-menu-counter]');
links.forEach(x => x.addEventListener('click', /* your function code here */);