首页 > 解决方案 > 如何将 Razor 组件集成到具有多个路由的现有 Razor Pages Asp.net Core 项目中

问题描述

我有一个现有的 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 放置在全局布局中。这是否不适用于链接到父布局页面的所有子页面和路由?

标签: c#asp.net-corerazor-pagesblazor-server-side

解决方案


对于任何正在寻找的人,我设法找出答案。

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

<base href="~/" />

After this, the dynamic server-side components work on any route and page. Tested and working on Preview 7 too, woop!


推荐阅读