Blazor WebAssembly 8.0按钮OnClick事件无法触发问题求助

核心问题定位 #

你的代码存在两个关键错误，导致InteractiveServer渲染模式未正确生效，进而按钮点击事件无法触发：

1. Program.cs中重复注册Razor组件路由 #

你在Program.cs中先后两次调用了app.MapRazorComponents<App>()：

app.MapRazorComponents<App>().AddInteractiveServerRenderMode();
// ... 中间代码
app.MapRazorComponents<App>();

第二次调用会覆盖第一次的配置，导致AddInteractiveServerRenderMode()的设置失效，Test页面的InteractiveServer模式无法正常工作。

2. index.html中脚本引用错误且顺序不当 #

• Blazor WebAssembly项目应引用blazor.webassembly.js而非blazor.server.js（blazor.server.js仅用于Blazor Server项目）
• 自定义JS文件spp.js需要在Blazor核心脚本之后加载，确保JS函数在Blazor初始化前已注册到window对象

修复步骤 #

步骤1：修正Program.cs代码 #

删除重复的路由注册，合并服务配置：

using BlazorApp1.Components;

var builder = WebApplication.CreateBuilder(args);

// 合并服务注册，避免重复调用AddRazorComponents
builder.Services.AddRazorComponents()
                .AddInteractiveServerComponents();

var app = builder.Build();

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

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();

// 仅保留一次路由配置，确保InteractiveServer渲染模式生效
app.MapRazorComponents<App>()
   .AddInteractiveServerRenderMode();

app.Run();

步骤2：修正index.html脚本引用 #

替换错误的Blazor脚本，调整自定义JS加载顺序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <!-- The component rendered in InteractiveServer mode will be mounted here -->
    </app>
    <!-- Blazor WebAssembly核心脚本 -->
    <script src="_framework/blazor.webassembly.js"></script>
    <!-- 自定义JS文件放在Blazor脚本之后，确保window.showCustomAlert已注册 -->
    <script src="js/spp.js"></script>
</body>
</html>

步骤3：添加错误捕获排查（可选） #

可以在Test.razor中添加异常捕获，方便排查JS互操作问题：

@page "/test"
@rendermode InteractiveServer
@inject IJSRuntime JsRuntime
<h3>Test JavaScript Interop</h3>
<button type="button" @onclick="TestJsInterop">Click Me</button>
@if (errorMessage != null)
{
    <p style="color:red">@errorMessage</p>
}

@code {
    private string? errorMessage;

    private async Task TestJsInterop()
    {
        errorMessage = null;
        try
        {
            await JsRuntime.InvokeVoidAsync("showCustomAlert", "Hello from custom JS interop!");
        }
        catch (Exception ex)
        {
            errorMessage = $"Error: {ex.Message}";
        }
    }
}

额外说明 #

Counter页面正常工作的原因是它使用了默认的静态渲染或已正确配置的渲染模式，而Test页面的InteractiveServer模式因Program.cs的配置错误未生效，导致点击事件无法触发。

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