能否在现有ASP.NET Core站点中无Router嵌入Blazor WebAssembly？

1. 给现有ASP.NET Core项目添加Blazor WebAssembly支持 #

• 通过NuGet安装Microsoft.AspNetCore.Components.WebAssembly.Server包
• 在Program.cs中配置服务和中间件：

  var builder = WebApplication.CreateBuilder(args);
  
  // 添加Blazor WebAssembly服务
  builder.Services.AddBlazorWebAssembly();
  
  // 保留现有项目的服务配置...
  
  var app = builder.Build();
  
  // 启用Blazor框架文件服务
  app.UseBlazorFrameworkFiles();
  
  // 保留现有中间件配置（静态文件、路由等）...
  
  // 无需添加MapFallbackToFile，组件直接嵌入指定CSHTML页面
  app.MapRazorPages(); // 若项目用Razor Pages
  app.MapControllerRoute(
      name: "default",
      pattern: "{controller=Home}/{action=Index}/{id?}"); // 若项目用MVC
  
  app.Run();
  

2. 创建无路由的Blazor组件 #

在项目中新建文件夹（如BlazorComponents），创建纯UI组件，无需添加@page指令，示例Feature.razor：

<h3>Blazor组件内容</h3>
<p>嵌入在ASP.NET Core原生页面中</p>

@code {
    // 可定义组件参数，接收页面传递的数据
    [Parameter]
    public string? PageTitle { get; set; }
}

3. 在CSHTML页面中嵌入Blazor组件 #

以Feature.cshtml为例，保留原有页面内容，添加Blazor挂载点和初始化脚本：

@page "/feature"
@model YourProject.Pages.FeatureModel

@{
    ViewData["Title"] = "Feature Page";
}

<!-- 现有页面原生内容 -->
<header>
    <h1>@ViewData["Title"]</h1>
    <p>这是ASP.NET Core页面的头部和文本内容</p>
</header>

<!-- Blazor组件挂载容器 -->
<div id="blazor-feature-container"></div>

<!-- 引入Blazor WebAssembly运行时脚本 -->
<script src="_framework/blazor.webassembly.js"></script>
<script>
    // 初始化Blazor组件，指定挂载容器和组件类型
    Blazor.start({
        rootComponents: [
            {
                component: typeof(YourProject.BlazorComponents.Feature),
                selector: '#blazor-feature-container',
                // 可选：向组件传递参数
                parameters: { PageTitle: '@ViewData["Title"]' }
            }
        ]
    });
</script>

4. 多页面部署多个独立Blazor组件 #

重复步骤2和3即可实现：

• 为每个目标页面创建对应的Blazor组件（如Feature1.razor、Feature2.razor）
• 在Feature1.cshtml、Feature2.cshtml中分别添加各自的挂载容器和初始化脚本，指定对应组件类型
• 各页面的Blazor组件完全独立，互不影响，且无需感知站点URL路由

关键细节 #

• 无需独立Blazor项目：所有组件、配置都在现有ASP.NET Core项目内完成，不需要单独创建Blazor WebAssembly项目
• 预渲染支持：若需要组件预渲染，可在CSHTML中使用<component>标签替代手动初始化，示例：

  <component type="typeof(YourProject.BlazorComponents.Feature)" 
             render-mode="WebAssemblyPrerendered" 
             parameters="new { PageTitle = @ViewData["Title"] }" />
  

• 资源隔离：多个组件的独立资源（CSS、JS）可在对应CSHTML页面单独引入，或通过组件的IJSRuntime动态加载

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