是否可以直接路由到MVC应用程序中托管的blazor页面？

问题描述

我有一个现有的.net core 3.1 MVC应用程序，已经开始向其添加Blazor组件。这非常好，组件可以按预期方式渲染和工作。目前，要进入使用Blazor的页面，我要添加一个控制器动作和一个视图来处理路由，然后将component标签添加到视图中以呈现Blazor组件。

因此，假设我有一个Customer Blazor组件，它实际上是一个客户“页面”，请执行以下操作。

1. 添加控制器和操作，在本示例中，我将添加带有“索引”操作的“客户”控制器
2. 我添加相应的索引视图
3. 在我的应用程序的Pages文件夹中创建一个Customer Blazor组件
4. 在视图中，我使用组件标签助手来加载Blazor组件： <component type="typeof(MyApp.Pages.Customers)" render-mode="Server" />

就像我说的那样，所有这些工作都很好，对于我添加的使用Blazor的每个页面来说，这只是很多开销。能够仅对页面使用内置的Blazor路由会很好。如果这行得通，我可以在Pages文件夹中添加Customer Blazor组件，并像这样添加@page标签： @page "/Customers"

不幸的是，这不起作用，如果尝试使用此方法，我会得到404。

我已按照本文中的说明进行操作，但仍然收到404： https://docs.microsoft.com/en-us/aspnet/core/blazor/components/integrate-components?view=aspnetcore-3.1#use-routable-components-in-an-mvc-app

有人能做到这一点吗？甚至有可能吗？

谢谢！

解决方法

开始以全新的 dotnet new mvc 应用程序结束，这就是您可以在 .NET 5.0 ...

1. 在 ConfigureServices 内，添加：

   • services.AddRazorPages();
   • services.AddServerSideBlazor();

2. 在 Configure 下方的 UseEndpoints 内，添加：

   • endpoints.MapFallbackToPage("/_Host");
   • endpoints.MapBlazorHub()

3. 在主布局内，添加 blazor 服务器 js

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

4. 使用 _Imports.razor 文件，参考：Microsoft.AspNetCore.Components.Web

   • 这是一个框架类库，因此不需要 NuGet 包
   • 确保它在您的 Blazor 组件的范围内！

5. 添加 _Host.cshtml 文件（从 Blazor 应用中提取）

   • 这应该引用 MVC _Layout 文件，并且除 App 组件外为空白
   • 页面路由应该是唯一的路由（就像对 API 的 SPA 调用一样）

     // _Host.cshtml
     @page "/blazor" 
     @namespace BlazorTechTalk.MvcWithBlazorUI.Pages
     @addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
     @{
          Layout = "~/Views/Shared/_Layout.cshtml";
     }
     
     <component type="typeof(App)" render-mode="ServerPrerendered" />
     

6. 添加 App.razor 组件（来自 Blazor 应用）

7. 添加 MainLayout 组件（来自 Blazor 应用）

   • 这应该是空白的，此外：

     @inherits LayoutComponentBase
     @Body
     

8. 呼，大功告成，现在可以在 MVC 项目中添加 BlazorPage.razor 个页面和组件！

@page "/blazorpage"

<h3>BlazorPage</h3>

以防万一有人偶然发现这一点并且只需要 Blazor 组件

执行第 1-4 步，但您可以省略：

• services.AddRazorPages();
• endpoints.MapToFallbackFile("/Host");