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

Question

我有一个现有的 Razor Page asp.net Core 2.2 项目，我正在尝试移植到 asp.net core 3（我知道这仍处于预览阶段，但 RC 即将到来，我只是在复习）这是一个基本项目有一些简单的页面和这些页面的一些路由。我可以让组件正确渲染，但动态内容的 SignlaR 连接仅适用于索引页面，无论我在何处注入 blazor js

我的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。但是，一旦转到另一个页面或路由，CSS 和 HTML 仍然会呈现，但动态服务器端内容会停止，即使我已将 blazor.server.js 放置在全局布局中。这是否不适用于链接到父布局页面的所有子页面和路由？

Answer 1

对于任何正在寻找的人，我设法找到了答案。除了进行上面提到的所有更改之外，您还需要将其放在 _Layout.cshtml 中的 HEAD 标记内<base&nbsp;href="~/"&nbsp;/>此后，动态服务器端组件可以在任何路由和页面上工作。也在 Preview 7 上进行了测试和工作，哇！

Answer 2

在 Blazor 中，布局只是另一个组件（布局文档），因此我们不应该将脚本标记放在那里。我建议您将其移回 Pages 文件夹中的 _Host.cshtml。如果您使用的是基本模板，那么您的 Counter.razor 组件是什么？如果是这样，您应该只需添加<Counter />index.razor 或 FetchData.razor 中的任何位置，并检查它是否在这些位置工作。如果您已经移动了 Counter 组件，那么也许可以再次重新阅读组件文档，特别是Component Classes部分，我认为这应该对您有所帮助。有关额外信息，请参阅此错误消息：脚本标记不应放置在组件内，因为它们无法动态更新。要解决此问题，请将脚本标记移动到“index.html”文件或其他静态位置。