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

Question

我有一个现有的 .net core 3.1 MVC 应用程序，我已开始向其中添加 Blazor 组件。这工作得很好，组件呈现并按预期工作。目前，为了访问使用 Blazor 的页面，我添加了一个控制器操作和处理路由的视图，然后将组件标记添加到视图中以呈现 Blazor 组件。

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

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

就像我说的，所有这些工作都很好，只是我添加的每个使用 Blazor 的页面都会产生大量开销。如果能够仅使用内置的 Blazor 页面路由就好了。如果这有效，我可以在 Pages 文件夹中添加 Customers Blazor 组件，并添加 @page 标签，如下所示： @page "/Customers"

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

我已按照本文中的说明进行操作，但仍然收到 404： https://learn.microsoft.com/en-us/aspnet/core/blazor/components/integrate-components ?view=aspnetcore-3.1#use-routable- MVC 应用程序中的组件

有人让这个工作吗？有可能吗？

谢谢！

Answer 1

从一个新的应用程序开始到结束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 组件之外为空白
   • 页面路由应该是唯一的路由（就像 SPA 调用 API 一样）

     // _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");