Blazor中如何在onclick函数中传递字符串字面量？

数据老陈

2026-8-5

Blazor中给@onclick事件传递参数的正确写法

你遇到的问题是HTML属性的引号冲突导致的，直接在@onclick属性里写带双引号的参数会破坏HTML的引号结构，以下是两种可行的解决方法：

方法一：Lambda表达式+引号嵌套

通过Lambda表达式包裹调用逻辑，同时调整引号的使用避免冲突：

<!-- HTML属性用单引号，内部参数用双引号 -->
<MudPaper Class="d-flex flex-row pt-6 pb-4" Style="height:100px;" @onclick='() => View("someurl")'>
               
</MudPaper>

<!-- 或者HTML属性用双引号，内部参数用单引号 -->
<MudPaper Class="d-flex flex-row pt-6 pb-4" Style="height:100px;" @onclick="() => View('someurl')">
               
</MudPaper>

@code {
    [Inject]
    private NavigationManager NavManager { get; set; }

    private async Task View(string url)
    {
        NavManager.NavigateTo("/" + url);
    }
}

方法二：拆分事件处理（适合复杂场景）

如果需要更清晰的代码结构，可以拆分事件触发和参数传递逻辑：

<MudPaper Class="d-flex flex-row pt-6 pb-4" Style="height:100px;" @onclick="HandleViewClick">
               
</MudPaper>

@code {
    [Inject]
    private NavigationManager NavManager { get; set; }

    private async Task HandleViewClick()
    {
        await View("someurl");
    }

    private async Task View(string url)
    {
        NavManager.NavigateTo("/" + url);
    }
}