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

Question

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

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

<component type="typeof(MyApp.Pages.Customers)" render-mode="Server" />

1. 添加了一个控制器和操作，在本例中，我将添加一个带有“索引”操作的
2. 的" Customers“控制器--添加相应的索引视图
3. ，在我的应用程序
4. 的Pages文件夹中创建一个Customers

组件，在视图中使用component标记帮助器加载Blazor组件：

就像我说的，所有这些都很好--我添加的每一页都要花费大量的开销--使用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-components-in-an-mvc-app

有人成功了吗？有可能吗？

谢谢!

Answer 1

开始使用一个新的dotnet new mvc应用程序，这就是如何在.NET 5.0中这样做的.

1. of ConfigureServices，添加：

- `services.AddRazorPages();`
- `services.AddServerSideBlazor();`

1. 在UseEndpoints下面的Configure中，添加：

- `endpoints.MapFallbackToPage("/_Host");`
- `endpoints.MapBlazorHub()`

在您的主布局中添加

1. 服务器js

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

使用Microsoft.AspNetCore.Components.Web文件的

1. ，参考：

- This is a framework class library so no NuGet package needed
- Make sure its in scope of your Blazor components!

1. 添加_Host.cshtml文件(从Blazor应用程序中提取)

- This should reference the MVC \_Layout file and be blank other than the App component
- The page route should be a unique route (just like a SPA calling to an API would be) // \_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" />

1. 添加App.razor组件(来自Blazor应用程序)

1. 添加MainLayout组件(来自Blazor应用程序)

- This should be blank besides: @inherits LayoutComponentBase @Body

1. Phew，您已经完成了，您现在可以在您的MVC项目中添加BlazorPage.razor页面和组件了！

@page "/blazorpage"

<h3>BlazorPage</h3>

，以防有人在这件事上绊倒，只需要组件

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

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