.NET 8 Server Side Blazor组件@onclick事件不触发问题咨询

.NET 8 Blazor Web App的Auto模式下，Server端页面默认采用静态渲染（Static Rendering）。静态渲染的组件不会建立SignalR连接，也不支持@onclick这类交互式事件绑定，因此非EditForm内的按钮点击事件无法触发。而EditForm组件会自动启用交互模式，所以其内部的按钮能正常响应事件。

1. 给页面显式指定Server交互模式 #

在页面顶部添加@rendermode InteractiveServer指令，将整个页面切换为Server交互式渲染模式，所有组件即可响应交互事件：

@rendermode InteractiveServer
@message

<button class="btn btn-primary mt-2 btn-block" @onclick="SendMessage">Send Message</button>

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

    private async Task SendMessage()
    {
        message = "Hello";
    }
}

2. 为单个按钮区域启用交互模式 #

若只想让按钮所在区域保持交互式，其他部分保留静态渲染，可用<InteractiveServerRenderMode>组件包裹按钮：

@message

<InteractiveServerRenderMode>
    <button class="btn btn-primary mt-2 btn-block" @onclick="SendMessage">Send Message</button>
</InteractiveServerRenderMode>

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

    private async Task SendMessage()
    {
        message = "Hello";
    }
}

3. 全局配置默认交互模式（可选） #

如果希望所有Server端页面默认启用交互式渲染，可在Program.cs中修改全局配置：

var builder = WebApplication.CreateBuilder(args);

// 添加Server交互式组件支持
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

// ... 其他中间件配置 ...

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode(); // 设置全局默认Server交互模式

app.Run();

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