MVC项目中Razor组件OnClick事件无法触发的问题排查

问题描述 #

在.NET 6 MVC Web应用中集成Razor组件，组件渲染正常，但按钮绑定的@onclick事件始终无法触发，已尝试多种常规方案无效。

相关代码与配置 #

Razor组件代码 #

@using Models
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web

@{ foreach (var item in order.ObjectConfigs.ConfigList)
    {
        <button class="button" type="button" @onclick="() => SelectConfig(item.fileName)">@item.FileName</button>
    }
}

@{ if (objectConfiguration != null)
    {
        <ConfigureObject ObjectConfiguration="objectConfiguration"></ConfigureObject>
    }
}

@code {
    [Parameter]
    public OrderIntern order { get; set; }
    public ObjectConfiguration objectConfiguration;
    bool loadConfigView;

    void SelectConfig(string fileName)
    {
        objectConfiguration = order.ObjectConfigs.ConfigList.First(e => e.FileName == fileName);
    }
}

组件调用视图代码 #

@model OrderIntern
@{}
@(await Html.RenderComponentAsync<ObjectList>(RenderMode.ServerPrerendered, new { order = Model }))

<button class="button-left" type="button">Zurück</button>
<button class="button-right" type="button">Weiter</button>

已完成的配置 #

1. 已添加包含必要命名空间的_Imports.razor文件
2. Startup.cs中配置Blazor服务与端点：

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddServerSideBlazor();
    services.AddRazorPages();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        endpoints.MapBlazorHub();
    });
}

排查过程 #

新建测试项目，添加<script src="_framework/blazor.server.js"></script>后，首页视图中的组件可正常触发OnClick，但其他视图中组件的按钮点击仍无响应。

解决方案 #

1. 确保所有使用组件的视图引入Blazor脚本 #

不要仅在首页添加脚本，需在所有包含Razor组件的MVC视图或全局布局页_Layout.cshtml中添加：

<script src="_framework/blazor.server.js"></script>

全局布局页添加后，所有继承该布局的视图都会自动加载脚本，避免重复操作。

2. 修正事件绑定的大小写错误 #

组件中按钮绑定的item.fileName与SelectConfig方法中匹配的e.FileName大小写不一致，修正后：

<button class="button" type="button" @onclick="() => SelectConfig(item.FileName)">@item.FileName</button>

大小写不匹配会导致逻辑执行异常，虽不直接阻断事件触发，但会让点击后无预期效果。

3. 调整组件渲染模式（可选排查） #

当前使用RenderMode.ServerPrerendered，若存在连接问题，可临时切换为RenderMode.Server测试：

@(await Html.RenderComponentAsync<ObjectList>(RenderMode.Server, new { order = Model }))

Server模式跳过预渲染，直接建立SignalR连接，便于排查连接类问题。

4. 检查浏览器控制台错误 #

打开浏览器F12控制台，查看是否存在：

• blazor.server.js加载404：确认app.UseStaticFiles();在路由配置前（当前配置正确）
• SignalR连接失败：排查路由冲突或权限拦截问题

5. 确认参数传递有效性 #

确保视图传递的Model（OrderIntern实例）中ObjectConfigs.ConfigList不为空，否则按钮不会渲染，自然无点击事件。

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