Blazor Web App中使用InteractiveWebAssembly后Counter组件失效问题

必要的补充配置步骤 #

• 确认客户端项目依赖：如果你的项目是服务器+客户端分离的Blazor Web App结构，检查服务器项目的依赖项是否包含客户端项目（默认模板自带，手动修改后可能丢失）。
• 添加WebAssembly引导脚本：在App.razor或_Layout.cshtml（带Razor Pages的模板）中添加初始化脚本：

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

  自动渲染模式项目可能已包含，但手动切换模式时需确认存在。
• 检查Counter组件的渲染模式声明：确保Counter.razor顶部配置正确，无冲突：

  @page "/counter"
  @rendermode InteractiveWebAssembly
  
  <PageTitle>Counter</PageTitle>
  
  <h1>Counter</h1>
  
  <p role="status">Current count: @currentCount</p>
  
  <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
  
  @code {
      private int currentCount = 0;
  
      private void IncrementCount()
      {
          currentCount++;
      }
  }
  

• 验证静态文件配置：服务器端Program.cs中必须启用静态文件服务，确保WebAssembly资源可访问：

  app.UseStaticFiles();
  

  默认模板已包含，若移除过需重新添加。
• 清理重建解决方案：缓存可能导致资源更新异常，执行以下操作：
  • 右键项目选择「清理」
  • 删除bin和obj文件夹
  • 重新生成解决方案

调试注意事项 #

• 切换到浏览器调试：InteractiveWebAssembly模式代码运行在客户端浏览器，需用浏览器开发者工具（F12）调试。在Sources面板找到对应组件代码，设置断点即可调试IncrementCount方法。
• 查看浏览器控制台错误：打开开发者工具Console面板，排查加载或运行时异常，快速定位问题。

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