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

Question

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

就是说，我正在尝试围绕我需要使用的图标包装一个超链接，并且该方法的注入始终指向 MenuCounter 的最后一个值。

我第一次尝试这个：

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

当我运行进入这个问题时，我尝试将代码缩减为以下内容，但随后页面以某种方式激活了超链接，模态 window 出现并且不会消失。

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

有人可以帮帮我吗？

谢谢！

Answer 1

我不喜欢 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 */);

Answer 2

您应该将 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 值，这是上次迭代增加的值。请参阅解释问题。

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

How Do I Dynamically Add onclick on a Razor page?

html

asp.net

razor

razor-pages

blazor

替代方法