Blazor中@onclick事件无法触发问题求助（.NET 8预览版）

云原生阿岚

2026-7-9

问题排查与解决方案

1. 移除非法嵌套的@code块

你的初始代码里在<small>标签内部嵌套了一个@code块，这是Blazor不允许的写法——@code块只能放在Razor文件的最外层（HTML内容之后），不能嵌入到任何HTML元素中。这个错误会导致Blazor组件的编译逻辑异常，即使项目能编译通过，事件绑定也会失效。

把这段代码完全删除：

@code{
    //@onclick is a Blazor event
}

2. 启用组件的交互式渲染模式（.NET 8 Blazor Web App 关键）

.NET 8的Blazor Web App模板默认采用静态渲染，静态组件不支持任何交互事件（包括@onclick）。要让事件生效，你需要将组件标记为交互式组件：

方式一：在组件内指定渲染模式

在Razor文件顶部添加@rendermode指令：

@rendermode InteractiveServer
// 或者根据你的需求用 InteractiveWebAssembly / InteractiveAuto

方式二：在引用组件时指定渲染模式

如果是在父组件（比如Home.razor）中引用这个组件，添加rendermode参数：

<YourComponentName @rendermode="InteractiveServer" />

3. 修正DOM结构（可选但推荐）

你的循环中，card-footer是独立于card的，这不符合Bootstrap的Card组件结构，可能导致样式异常，建议将card-footer放到card内部：

@foreach (var jobAd in ProductService.GetJobAds())
{
    <div class="card">
        <div class="card-body">
            <a href="@jobAd.Url" target="_blank">finn.no link</a>
        </div>
        <div class="card-body">
            <h5 class="card-title">@jobAd.Title</h5>
        </div>
        <!-- 将card-footer移到card内部 -->
        <div class="card-footer">
            <small class="text-muted">
                <button @onclick="@(e=>SelectAd(jobAd.Id))"
                    data-toggle="modal" data-target="#jobAdModal" class="btn btn-primary">More info</button>
            </small>
        </div>
    </div>
}