将 blazor 组件包含到 MVC 视图中（.NET Core 3 Preview #5）答案

【问题标题】：Include blazor component into MVC view (.NET Core 3 Preview #5)将 blazor 组件包含到 MVC 视图中（.NET Core 3 Preview #5）
【发布时间】：2019-09-28 08:25:02
【问题描述】：

我正在尝试将 blazor 组件包含到我的 MVC 应用程序中，但端点路由的某些内容似乎不合适。

我有一个剃须刀页面（在 pages/example.cshtml 中）和一个带有视图的默认控制器（在 Controllers/Home 中）（在 Views/Home/Index.cshtml 中）。

打开...

[本地] -> 索引视图，Blazor 工作
[local]/Home -> 索引视图，Blazor 工作
[local]/Example -> 示例页面，Blazor 工作
[local]/Home/ -> 索引视图，Blazor 不起作用
[local]/Home/Index -> 索引视图，Blazor 不起作用

脚本调试器说： HTTP404: NOT FOUND - 服务器没有找到与请求的 URI（统一资源标识符）匹配的任何内容。 (XHR)POST - https://localhost:44342/Home/_blazor/negotiate

我在启动文件中尝试了不同的东西，但无论我尝试了什么都无法让它工作。

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSingleton<WeatherForecastService>();
        //services.AddControllersWithViews(o => o.EnableEndpointRouting = false); -> does not change anything
        services.AddMvc(o => o.EnableEndpointRouting = false);
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        app.UseHttpsRedirection();

        app.UseStaticFiles();

        app.UseMvcWithDefaultRoute();
        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            //endpoints.MapControllers();  -> does not change anything
            //endpoints.MapDefaultControllerRoute(); -> does not change anything
        });
    }
}

【问题讨论】：

预渲染是否有效，即您是否在 MVC 页面中看到该组件？
是的。如果我在代码中添加一个断点来初始化组件中的某些内容，调试器将在它的预渲染期间停止。只有从浏览器到服务器的通信不起作用。
我已经打开了一个关于这个的问题，因为它在预览版 8 中仍然很流行。github.com/aspnet/AspNetCore/issues/13594

标签： blazor

【解决方案1】：

GitHub 上的问题已由其中一位开发者解决：https://github.com/aspnet/AspNetCore/issues/13594#issuecomment-527821142

这是设计使然。您需要在 html 页面的 head 标记内使用 <base href="~/" /> 设置文档的基本路径。或者，您可以手动启动 blazor，如

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
        Blazor.start({
            configureSignalR: function (builder) {
                builder.useUrl(@("/"))
            }
        });
    </script>

虽然第二种解决方案可能会阻止链接正常工作。

【讨论】：