.NET 9 Blazor Server按钮@onclick交互失效求助

问题概述 #

首次构建Blazor应用时，.NET 9 Blazor Server项目中按钮的@onclick事件始终无法触发。已尝试全局（App.razor中设置<Routes @rendermode="InteractiveServer" />）和页面级（@rendermode InteractiveServer）配置交互式渲染模式，且确认program.cs已添加AddInteractiveServerComponents()、_Imports.razor包含必要引用，但问题仍未解决。

核心原因：中间件顺序错误 #

Blazor端点映射的注册顺序直接影响请求处理流程，当前program.cs中MapRazorComponents<App>()的位置在本地化、自定义文化设置等中间件之前，导致Blazor请求未经过这些关键中间件处理，破坏了交互式渲染模式的SignalR连接初始化逻辑，最终导致事件无法触发。

修复步骤 #

1. 调整program.cs中间件顺序 #

将Blazor端点映射移至所有请求处理中间件之后，正确顺序如下：

using BoatPlannerAI.Web.Components;
using Microsoft.Azure.Cosmos;
using System.Globalization;
using Microsoft.Extensions.Options;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var cosmosConfig = builder.Configuration.GetSection("CosmosDb");
var account = cosmosConfig["Account"];
var key = cosmosConfig["Key"];

var databaseName = cosmosConfig["DatabaseName"];

if (string.IsNullOrWhiteSpace(databaseName))
    throw new InvalidOperationException("CosmosDb:DatabaseName configuration is missing or empty.");

builder.Services.AddSingleton(s => new CosmosClient(account, key));
builder.Services.AddSingleton(_ => databaseName);

// Add localization services
builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");

var supportedCultures = new[] { new CultureInfo("en"), new CultureInfo("nl") };
builder.Services.Configure<RequestLocalizationOptions>(options =>
{
    options.DefaultRequestCulture = new Microsoft.AspNetCore.Localization.RequestCulture("nl");
    options.SupportedCultures = supportedCultures;
    options.SupportedUICultures = supportedCultures;
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}

app.UseHttpsRedirection();

app.MapStaticAssets();
app.UseAntiforgery();

// Redirect root '/' to '/nl' on the server side
app.Use(async (context, next) =>
{
    if (context.Request.Path == "/")
    {
        context.Response.Redirect("/nl", permanent: false);
        return;
    }
    await next();
});

// Configure localization middleware
var locOptions = app.Services.GetRequiredService<IOptions<RequestLocalizationOptions>>();
app.UseRequestLocalization(locOptions.Value);

// Set culture based on first URL segment
app.Use(async (context, next) =>
{
    var path = context.Request.Path.Value;

    if (!string.IsNullOrEmpty(path))
    {
        var segments = path.Split('/', StringSplitOptions.RemoveEmptyEntries);

        if (segments.Length > 0)
        {
            var lang = segments[0];
            var supported = new[] { "en", "nl" };

            if (supported.Contains(lang))
            {
                var culture = new CultureInfo(lang);
                CultureInfo.CurrentCulture = culture;
                CultureInfo.CurrentUICulture = culture;
            }
        }
    }

    await next();
});

// 最后配置Blazor端点映射
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

2. 验证交互式渲染模式激活状态 #

打开浏览器开发者工具，检查网络请求：

• 访问测试页面时，应出现_blazor/negotiate协商请求
• 后续应建立WebSocket连接（Network标签的WS分类下）
  若缺少这些请求，说明渲染模式仍未正确激活，需重新检查中间件顺序。

3. 修复App.razor硬编码语言 #

将<html lang="en">改为动态语言设置，避免潜在兼容性问题：

<html lang="@CultureInfo.CurrentUICulture.Name">

4. 简化测试页面验证 #

暂时移除本地化依赖，测试基础功能：

@page "/{lang}/buttontest"
@rendermode InteractiveServer

@code {
    [Parameter] public string? lang { get; set; }

    private int buttonClickedCount = 0;

    private void ButtonClicked()
    {
        Console.WriteLine("Button clicked");
        buttonClickedCount++;
    }
}

Test the button <button @onclick="ButtonClicked">Click me</button>
<p>Button clicked: @buttonClickedCount</p>

访问/nl/buttontest，查看控制台是否输出Button clicked，页面计数是否更新。

其他排查点 #

• 检查浏览器控制台是否有JavaScript错误（如Blazor脚本加载失败）
• 确认页面源代码中存在__RequestVerificationToken隐藏字段（Antiforgery令牌正常生成）
• 排查是否有自定义中间件阻止Blazor的SignalR连接

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