如何在Blazor Server的/Identity/Account/Manage页面复用NavMenu.razor实现UI一致

前置准备 #

确保项目为 ASP.NET Core 6+ 版本的 Blazor Server / 托管模式Blazor WebAssembly项目，且已通过Scaffold生成了Identity的Manage页面源码。

步骤1：配置服务与依赖引用 #

• 在项目根目录的Program.cs中，确保已注册Razor Pages与组件渲染所需服务：

// Blazor Server 项目补充
builder.Services.AddRazorPages().AddRazorRuntimeCompilation();
builder.Services.AddServerSideBlazor();

// 托管模式Blazor WebAssembly项目补充
builder.Services.AddRazorPages().AddRazorRuntimeCompilation();
builder.Services.AddWebAssemblyPrerendering();

• 在Areas/Identity/Pages/_ViewImports.cshtml中添加命名空间引用，确保可以访问到项目的共享组件：

@using 你的项目实际命名空间.Shared
@inject NavigationManager NavManager
@inject AuthenticationStateProvider AuthStateProvider
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

步骤2：修改Identity Manage页面的布局文件 #

找到Areas/Identity/Pages/Account/Manage/_Layout.cshtml文件，调整布局结构与Blazor原生MainLayout.razor保持一致：

• 首先在<head>标签中引入和Blazor页面完全一致的样式资源，确保样式匹配：

<link rel="stylesheet" href="~/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<!-- 替换为你的项目名对应的css隔离文件 -->
<link rel="stylesheet" href="~/你的项目实际名称.styles.css" />

• 调整<body>内的布局结构，和MainLayout.razor结构对齐，用component标签助手直接渲染NavMenu组件：

<body>
  <div class="page">
    <!-- 直接复用现有的NavMenu.razor组件 -->
    <component type="typeof(NavMenu)" render-mode="ServerPrerendered" />
    <!-- 托管模式WebAssembly请替换render-mode为WebAssemblyPrerendered -->
    
    <main>
      <div class="top-row px-4">
        <a href="~/Identity/Account/Logout" class="ms-auto">退出登录</a>
      </div>
      <article class="content px-4">
        @RenderBody()
      </article>
    </main>
  </div>

  <!-- 引入Blazor运行时（Server项目） -->
  <script src="_framework/blazor.server.js"></script>
  <!-- 托管模式WebAssembly项目替换为 -->
  <!-- <script src="_framework/blazor.webassembly.js"></script> -->
</body>

步骤3：验证效果 #

运行项目后进入/Identity/Account/Manage路径，即可看到和Blazor原生页面完全一致的侧边栏，无需单独维护两套侧边栏代码，NavMenu的所有修改会同步生效到Blazor组件页和Identity管理页。

注意：如果你的NavMenu中包含授权相关的逻辑（比如仅管理员可见的菜单），无需额外修改，Identity页面的授权状态会自动同步到渲染的NavMenu组件中。

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