如何让Blazor Identity UI页面以InteractiveServer模式渲染？

默认的Blazor Identity页面是静态Razor Pages，无法直接设置@rendermode，要实现InteractiveServer模式运行并使用带RenderFragment的组件，可按以下两种方式操作：

方法一：将Identity页面转为Blazor组件（推荐） #

1. 导出Identity页面源码
   右键项目 → 添加 → 新搭建的基架项 → 选择「Identity」→ 点击「添加」。在弹窗中勾选需要自定义的页面（登录、注册等），选择项目DbContext（无则新建），生成位置设为Areas/Identity/Pages，完成导出。

2. 转换为Blazor组件

   • 找到导出的Login.cshtml，重命名为Login.razor。
   • 替换页面指令，保留@page "/Identity/Account/Login"，添加@rendermode InteractiveServer，注入所需服务：

     @page "/Identity/Account/Login"
     @rendermode InteractiveServer
     @inject SignInManager<IdentityUser> SignInManager
     @inject ILogger<Login> Logger
     

   • 将原Razor Pages的HTML和逻辑转换为Blazor语法：用<AntiforgeryToken />替换@Html.AntiForgeryToken()，将表单提交的asp-action改为Blazor的@onclick事件，实现登录逻辑。

3. 使用带RenderFragment的组件
   此时Login.razor是InteractiveServer模式组件，可直接使用自定义组件：

   <CustomButton>
       <ChildContent>登录</ChildContent>
   </CustomButton>
   

   自定义组件示例：

   <button @onclick="OnClick">@ChildContent</button>
   
   @code {
       [Parameter]
       public RenderFragment? ChildContent { get; set; }
   
       private void OnClick()
       {
           // 自定义点击逻辑
       }
   }
   

方法二：在原Razor Pages中嵌入交互式组件 #

如果不想替换整个页面，可在现有Identity Razor Pages中嵌入InteractiveServer组件：

1. 先导出Identity页面源码（同方法一第一步）。

2. 修改Login.cshtml
   在需要使用交互式组件的位置，添加带渲染模式的Blazor组件：

   @page
   @model LoginModel
   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   
   <!-- 原页面内容 -->
   <div>
       <component type="typeof(CustomButton)" render-mode="InteractiveServer">
           <ChildContent>登录</ChildContent>
       </component>
   </div>
   <!-- 原页面内容 -->
   

3. 注意事项

   • 原Razor Pages仍为静态渲染，但嵌入的组件是InteractiveServer模式，支持交互和RenderFragment参数。
   • 确保项目已配置InteractiveServer渲染（默认Auto模式已包含）。

常见问题处理 #

• RenderFragment不显示：检查组件的[Parameter]定义是否正确，确保在<component>标签内正确传递ChildContent。
• 路由冲突：替换为Blazor组件后，删除或重命名原Razor Pages文件，避免路由重复。
• 依赖注入：Blazor组件可通过@inject直接注入SignInManager、ILogger等服务，与原Razor Pages一致。

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