如何解决是否可以直接路由到MVC应用程序中托管的blazor页面?
我有一个现有的.net core 3.1 MVC应用程序,已经开始向其添加Blazor组件。这非常好,组件可以按预期方式渲染和工作。目前,要进入使用Blazor的页面,我要添加一个控制器动作和一个视图来处理路由,然后将component标签添加到视图中以呈现Blazor组件。
因此,假设我有一个Customer Blazor组件,它实际上是一个客户“页面”,请执行以下操作。
- 添加控制器和操作,在本示例中,我将添加带有“索引”操作的“客户”控制器
- 我添加相应的索引视图
- 在我的应用程序的Pages文件夹中创建一个Customer Blazor组件
- 在视图中,我使用组件标签助手来加载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
...
-
在
ConfigureServices
内,添加:services.AddRazorPages();
services.AddServerSideBlazor();
-
在
Configure
下方的UseEndpoints
内,添加:endpoints.MapFallbackToPage("/_Host");
endpoints.MapBlazorHub()
-
在主布局内,添加 blazor 服务器 js
<script src="_framework/blazor.server.js"></script>
-
使用
_Imports.razor
文件,参考:Microsoft.AspNetCore.Components.Web
- 这是一个框架类库,因此不需要 NuGet 包
- 确保它在您的 Blazor 组件的范围内!
-
添加
_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" />
-
添加
App.razor
组件(来自 Blazor 应用) -
添加
MainLayout
组件(来自 Blazor 应用)- 这应该是空白的,此外:
@inherits LayoutComponentBase @Body
- 这应该是空白的,此外:
-
呼,大功告成,现在可以在 MVC 项目中添加
BlazorPage.razor
个页面和组件!
@page "/blazorpage"
<h3>BlazorPage</h3>
以防万一有人偶然发现这一点并且只需要 Blazor 组件
执行第 1-4 步,但您可以省略:
services.AddRazorPages();
endpoints.MapToFallbackFile("/Host");
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。