.NET 8 Blazor Server Bootstrap模板渲染异常及JS问题求助

1. 修复标签重复与渲染异常问题 #

Blazor Server的_Host.cshtml文件已经包含完整的<html>、<head>、<body>结构，你的WebsiteLayout组件不需要再包裹<html>标签，否则会导致标签重复触发注释格式错误。

• 打开_Host.cshtml，确认已有如下基础结构：

  <html lang="en">
  <head>
      <!-- 模板CSS、元标签等资源引用 -->
  </head>
  <body>
      <component type="typeof(App)" render-mode="ServerPrerendered" />
      <!-- Blazor及模板JS引用 -->
  </body>
  </html>
  

• 修改WebsiteLayout.razor，移除外层<html>标签，只保留模板布局的容器结构（例如模板的wrapper、content-wrapper等核心容器）：

  <div class="wrapper">
      <!-- 模板的头部、侧边栏、内容区域等结构 -->
      @Body
  </div>
  

• 在App.razor中正确关联布局：

  <Router AppAssembly="@typeof(App).Assembly">
      <Found Context="routeData">
          <RouteView RouteData="@routeData" DefaultLayout="@typeof(WebsiteLayout)" />
      </Found>
      <NotFound>
          <LayoutView Layout="@typeof(WebsiteLayout)">
              <p>Sorry, there's nothing at this address.</p>
          </LayoutView>
      </NotFound>
  </Router>
  

2. 解决加载器持续加载问题 #

加载器一直显示通常是因为模板的加载逻辑未感知Blazor的异步渲染完成，需调整加载器的隐藏时机：

• 在_Host.cshtml中保留加载器的HTML（放在<component>标签之前）：

  <div id="loader" class="loader-container">
      <!-- 加载器动画或文字内容 -->
  </div>
  <component type="typeof(App)" render-mode="ServerPrerendered" />
  

• 编写JS函数控制加载器隐藏，并监听Blazor初始化事件：

  window.hideLoader = function() {
      document.getElementById('loader').style.display = 'none';
  };
  
  // 监听Blazor初始化完成事件，触发加载器隐藏
  window.addEventListener('blazorinitialized', () => {
      window.hideLoader();
  });
  

• 或者在WebsiteLayout的生命周期方法中触发隐藏：

  @inject IJSRuntime JSRuntime
  
  @code {
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          if (firstRender)
          {
              await JSRuntime.InvokeVoidAsync("hideLoader");
          }
      }
  }
  

3. 修复JS生成内容缺失、菜单失效问题 #

Bootstrap模板的JS通常只在初始DOM加载时执行一次，但Blazor是动态渲染组件，需在组件渲染完成后重新初始化模板功能：

• 将模板的初始化JS封装为全局可调用函数（放在模板的JS文件或_Host.cshtml的<script>中）：

  window.initTemplateFeatures = function() {
      // 模板原有初始化逻辑，例如菜单初始化、动态内容生成
      $('.sidebar-menu').metisMenu();
      $('[data-toggle="tooltip"]').tooltip();
      // 其他模板JS功能初始化代码
  };
  

• 在WebsiteLayout的OnAfterRenderAsync中调用该函数，确保每次组件渲染后都重新初始化：

  @inject IJSRuntime JSRuntime
  
  @code {
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          // 每次渲染后都重新初始化模板JS功能，适配Blazor动态DOM
          await JSRuntime.InvokeVoidAsync("initTemplateFeatures");
          
          if (firstRender)
          {
              await JSRuntime.InvokeVoidAsync("hideLoader");
          }
      }
  }
  

• 确保模板依赖的第三方库（如jQuery、Popper.js）在_Host.cshtml中于Blazor的<script>之前加载，避免出现未定义错误。

4. 无JS报错但功能异常排查 #

• 打开浏览器开发者工具的Console标签，查看是否有隐藏的警告（如元素查找失败、方法未定义）；
• 检查模板CSS是否正确引入到_Host.cshtml的<head>中，避免样式缺失导致的布局错乱；
• 确认动态生成的DOM元素在JS初始化时已存在，可通过console.log打印元素验证。

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