如何将 Razor 组件集成到现有的 Razor 页面 Asp.net 具有多个路由的核心项目

Question

我有一个现有的 Razor 页面 asp.net 核心 2.2 项目，我正在尝试移植到 asp.net 核心 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>

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

Answer 1

在 Blazor 中，布局只是另一个组件，(Layout Documentation)，因此我们不应该将脚本标记放在那里。我建议您将其移回 Pages 文件夹中的 _Host.cshtml。如果您使用的是基本模板，那么您的 Counter.razor 组件是什么？如果是这样，那么您应该可以简单地添加

<Counter />

index.razor 或 FetchData.razor 内的任意位置，并检查它是否在这些位置正常工作。

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

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

Answer 2

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

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

<base href="~/" />

在此之后，动态服务器端组件可以在任何路由和页面上工作。已经过测试并正在使用 Preview 7，哇哦！

如何将 Razor 组件集成到现有的 Razor 页面 Asp.net 具有多个路由的核心项目

How to integrate Razor Components into existing Razor Pages Asp.net Core project with multiple routes

c#

asp.net-core

razor-pages

blazor-server-side