ASP.NET Core 8.0 MVC集成Blazor按钮点击无响应问题求助

1. 修正Blazor Server服务配置（ASP.NET 8关键变更） #

ASP.NET 8中Blazor Server的服务注册方式已更新，需替换旧的AddServerSideBlazor为新的组件服务配置，否则会导致交互式渲染模式缺失、连接异常。在Program.cs中修改如下：

var builder = WebApplication.CreateBuilder(args);

// 添加MVC服务
builder.Services.AddControllersWithViews();
// 注册Blazor Server交互式组件服务
builder.Services.AddServerComponents();
// 注册SignalR（Blazor Server依赖）
builder.Services.AddSignalR();

var app = builder.Build();

// 静态文件中间件
app.UseStaticFiles();
// 路由中间件
app.UseRouting();

// 映射Blazor Hub（必须添加，否则WebSocket连接失败）
app.MapBlazorHub();
// 映射Razor组件端点
app.MapRazorComponents<App>();

// MVC路由配置
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

2. 更新组件渲染模式 #

ASP.NET 8废弃了旧的ServerPrerendered渲染模式，改用新的交互式渲染模式。在Chat.cshtml中修改组件渲染代码：

@(await Html.RenderComponentAsync<MWeb.Components.Chat>(RenderMode.InteractiveServer))

或使用标签式写法：

<component type="typeof(MWeb.Components.Chat)" render-mode="InteractiveServer" />

3. 修复Blazor WebSocket连接断开问题 #

控制台报错的核心原因是服务端未正确配置Blazor Hub，需确保app.MapBlazorHub();已添加到中间件管道中，且顺序在UseRouting之后、MapControllerRoute之前。

同时确认布局文件中blazor.server.js引用正确：

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

4. 验证组件状态更新UI #

确保组件内的状态变更能被可视化验证，在Chat.razor中添加headingValue的渲染代码：

<h3>@headingValue</h3>
<button @onclick="UpdateHeading">
Update heading
</button>

若后续遇到复杂场景状态不更新，可在UpdateHeading方法末尾手动调用StateHasChanged()触发UI刷新。

5. 排除BrowserLink干扰 #

控制台中出现的SecurityError来自BrowserLink，可能干扰Blazor的WebSocket连接。可通过以下方式禁用：

• 在Visual Studio工具栏点击Browser Link按钮关闭功能；
• 在Program.cs中禁用：

  builder.Services.AddControllersWithViews()
      .AddRazorRuntimeCompilation(options =>
      {
          options.DisableBrowserLink = true;
      });
  

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