Blazor Identity：如何在现有页面内嵌入用户资料管理页面？

不需要将所有现有页面转为Razor组件，按以下步骤即可实现把管理页显示在MainLayout的@body区域：

1. 修改Identity页面的布局配置 #

脚手架生成的Identity页面默认是Razor Pages（.cshtml文件），位于项目的Pages/Identity目录下：

• 找到该目录下的_ViewStart.cshtml文件，默认内容为：

  @{
      Layout = "_Layout";
  }
  

• 创建一个适配Blazor主布局的Razor Pages布局文件（例如_BlazorMainLayout.cshtml），内容如下：

  @using Microsoft.AspNetCore.Components.Web
  @namespace YourAppNamespace.Pages
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  
  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <base href="~/" />
      <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
      <link href="css/site.css" rel="stylesheet" />
      <link href="YourAppNamespace.styles.css" rel="stylesheet" />
      <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
  </head>
  <body>
      <component type="typeof(MainLayout)" render-mode="ServerPrerendered">
          @RenderBody()
      </component>
      <script src="_framework/blazor.server.js"></script>
  </body>
  </html>
  

  注意替换YourAppNamespace为你项目的实际命名空间，render-mode根据项目类型调整（比如WASM项目用WebAssembly）。
• 修改_ViewStart.cshtml，将布局指向新创建的_BlazorMainLayout.cshtml：

  @{
      Layout = "_BlazorMainLayout";
  }
  

2. 调整跳转代码避免整页刷新 #

原跳转代码的第二个参数true会强制触发整页刷新，改为false使用Blazor客户端导航：

async Task OnMyProfileClick() {
    await Task.Delay(0);
    Navigation.NavigateTo("Identity/Account/Manage/", false);
}

完成以上两步后，点击跳转时管理页就会嵌入到MainLayout的@body区域，而不是加载全新页面。

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