.NET Core 7.0 MVC集成Blazor页面遇404及功能失效问题求助

问题根源 #

你的项目核心问题在于：

• Program.cs缺少Blazor Server的核心服务与SignalR端点配置，导致blazor.server.js返回404
• Index.cshtml错误编写了Blazor组件代码，未通过正确方式引用组件
• 缺失Blazor Server通信必需的SignalR Hub路由

1. 修正Program.cs配置 #

需要添加Blazor Server专属服务注册与端点映射，替换原代码为：

var builder = WebApplication.CreateBuilder(args);

// 添加MVC服务
builder.Services.AddControllersWithViews();
// 注册Blazor Server核心服务（替代仅AddRazorPages）
builder.Services.AddServerSideBlazor();
// 若项目需要Razor页面可保留，否则可移除
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

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

app.UseRouting();

app.UseAuthorization();

// 必须添加：映射Blazor Server的SignalR通信Hub，解决404问题
app.MapBlazorHub();
app.MapRazorPages();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

关键说明：

• AddServerSideBlazor()：注册Blazor Server运行所需的所有依赖服务
• MapBlazorHub()：创建Blazor与前端通信的SignalR端点，没有此配置，_framework/blazor.server.js无法找到对应服务

2. 修正Index.cshtml内容 #

你当前的Index.cshtml错误地编写了Blazor组件逻辑，MVC视图需要通过<component>标签渲染Blazor组件，替换为：

@using Microsoft.AspNetCore.Mvc.ViewFeatures

<h1>MVC页面集成Blazor组件</h1>

<!-- 渲染Blazor组件，替换YourNamespace为组件实际命名空间 -->
<component type="typeof(YourNamespace.Component)" render-mode="ServerPrerendered" />

注意：将YourNamespace替换为Component.razor所在的命名空间（例如项目名为MvcBlazorSampleApp，组件在Components文件夹下，则命名空间为MvcBlazorSampleApp.Components）。ServerPrerendered模式会预渲染组件内容，提升首屏加载体验。

3. 组件命名空间优化（可选） #

为了更方便在MVC视图中引用组件，建议在Component.razor顶部添加命名空间声明：

@namespace MvcBlazorSampleApp.Components
@using Microsoft.AspNetCore.Components

<h3>Blazor Component in MVC</h3>
<button @onclick="Test" class="btn btn-dark">Click to get answer</button>
<br />
<div>@Data </div>

@code {
    [Parameter]
    public string Data { get; set; } = string.Empty;
    private void Test()
    {
        Console.WriteLine("click");
        Data = "Button Clicked";
    }
 }   

4. 确认布局文件配置 #

你的_layout.cshtml中已正确添加：

• <base href="~/" />（确保资源路径解析正确）
• <script src="_framework/blazor.server.js"></script>（加载Blazor客户端运行时）
  无需额外修改，保持现有配置即可。

完成以上修改后，重新运行项目，Blazor组件的点击事件将正常响应，blazor.server.js的404错误也会消失。

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