如何在Razor页面中动态绑定onclick点击事件？

问题原因 #

1. 第一种写法属于典型的循环变量闭包捕获陷阱：所有lambda表达式都引用同一个MenuCounter变量实例，循环结束后该变量的值为最终计数，因此所有点击触发时取到的都是最终值。
2. 第二种写法去掉了lambda包裹，Razor在页面渲染阶段就会直接执行SetupChangeName(MenuCounter)，而非将其绑定为点击事件回调，因此会出现页面加载自动触发弹窗的问题。

解决方法 #

在循环内部每次迭代时，先将当前MenuCounter的值存储到局部临时变量中，再将该局部变量传入事件回调，同时添加阻止a标签默认跳转的配置即可：

@* 放在循环体内部 *@
@{
    var currentCounter = MenuCounter;
}
<a href="#" @onclick="() => SetupChangeName(currentCounter)" @onclick:preventDefault class="menuButton">...</a>

说明 #

每次循环迭代生成的局部变量currentCounter会被对应lambda单独捕获，不会被后续循环的赋值覆盖，因此每个点击事件都能拿到当前迭代对应的正确计数值。@onclick:preventDefault会阻止a标签点击后默认跳转到页首的行为，不会干扰模态框的关闭逻辑。

内容的提问来源于stack exchange，提问作者Ken Tola