Blazor按钮点击传参报错：Uncaught SyntaxError: 参数列表后缺少)

问题根源 #

1. 混用原生HTML事件与Blazor方法：你使用了原生onclick属性，它会被当作JavaScript代码执行，但LastLinkAccessed是C#方法，导致语法解析错误。
2. 循环变量闭包问题：直接在循环中使用i会导致所有按钮点击时，拿到的都是循环结束后的i值，无法正确获取对应位置的链接名称。

修正后的代码 #

HTML部分

<div>
    <ul>             
       @if (AddData.previousLinks.Count > 0)
       {
           @for (var i = 0; i < AddData.previousLinks.Count; i++)
           {
               // 捕获当前循环的变量，避免闭包共享问题
               var currentLink = AddData.previousLinks[i];
               <li class="dropdown-item">
                   <button class="file" id="file@i" @onclick="() => LastLinkAccessed(currentLink)">
                       @currentLink
                   </button>
               </li>
           }
      }             
    </ul>                                
 </div>

@code部分

@code{
    public string linkname1 { get; set; }

    private async Task LastLinkAccessed(string linkname)
    {
        linkname1 = linkname;          
        await JSRuntime.InvokeVoidAsync("console.log", "linkname1", linkname1);
        UriHelper.NavigateTo("/" + linkname1); // 移除多余的@符号
    }
}

关键修正点 #

• 替换原生onclick为Blazor专属的@onclick指令，通过lambda表达式绑定C#方法。
• 在循环内部捕获当前的链接值currentLink，避免闭包导致的变量共享问题。
• 按钮ID改为file@i，避免多个按钮使用相同ID的问题。
• 移除UriHelper.NavigateTo中多余的@符号，直接使用C#变量即可。

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