如何将Razor组件集成到具有多个路由的现有Razor Pages Asp.net Core项目中

Question

我有一个现有的Razor Page asp.net Core 2.2项目，我想移植到asp.net Core 3（我知道这仍在预览中，但是RC指日可待，我只是在刷牙），这是一个基本项目有一些简单的页面，以及这些页面的一些路由。 我可以正确渲染组件，但是无论我将blazor js注入哪里，动态内容的SignlaR连接都只能在索引页面上工作

我的startup.cs看起来像这样

public class Startup
{
    public Startup(IConfiguration configuration)
    { 
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.Configure<CookiePolicyOptions>(options =>
        {
            options.CheckConsentNeeded = context => true;
        });

        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddMvc();
    }

    public  void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");

            app.UseHsts();
        }
        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseCookiePolicy();
        app.UseRouting();
        app.UseAuthorization();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapRazorPages();
            endpoints.MapControllers();
        });
    }
}

我已经创建了_imports.razor文件，其中包含...

@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Layouts
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
@using Web
@using Web.Components

...在我的_Layout.cshtml文件中，放置了对blazor脚本的引用...

<script src="_framework/blazor.server.js"></script>

在索引和子页面上，我都像这样调用组件...

<div id="counter">
    @(await Html.RenderComponentAsync<Web.Components.Counter>(new { }))
</div>

在站点的索引页面上，一切正常，通过SignalR使用动态服务器执行的代码呈现CSS和HTML。 但是，即使我将blazor.server.js放置在全局布局中，但只要转到另一个页面或路线，CSS和HTML仍会呈现，但动态服务器端内容会停止。 这是否不适用于链接到父布局页面的所有子页面和路由？

Answer 1

在Blazor中，布局只是另一个组件，（ Layout Documentation ），因此我们不应该将script标签放在那里。 我建议您将其移回到Pages文件夹内的_Host.cshtml。 如果使用的是基本模板，那是Counter.razor组件吗？ 如果是这样，那么您应该只需能够添加

<Counter />

index.razor或FetchData.razor中的任何位置，并检查它们在这些位置是否正常运行。

如果您已经移动了Counter组件，那么也许可以重新阅读Components文档，尤其是Component Classes部分，我认为这应该对您有所帮助。

有关更多信息，请参见以下错误消息：脚本标记不应放置在组件内，因为它们不能动态更新。 要解决此问题，请将脚本标记移至“ index.html”文件或其他静态位置。 有关更多信息，请参见https://go.microsoft.com/fwlink/?linkid=872131

Answer 2

对于任何正在寻找的人，我都设法找到了答案。

除了进行上述所有之前的更改之外，您还需要将其放在_Layout.cshtml中的HEAD标记中

<base href="~/" />

此后，动态服务器端组件可以在任何路由和页面上工作。 测试和预览7也工作，哇！