Blazor 页面路由集成到现有的 razor 页面应用程序

Question

我尽可能地遵循了这里的文档。 Microsoft Doc

我已按照指示添加了 App.razor、_Imports.razor 和 _Host.cshtml。

测试页是这个

我更新了启动 blazorHub() 和 MapFallbackToPage() 端点

如果我浏览现有的 razor 页面 ClientDashboard.cshtml 并让它加载组件，blazor 页面将加载并运行。所以我知道我的 blazor.js 正在正确加载

@(await @Html.RenderComponentAsync<Components.ClientDashboard.ClientManagement>(RenderMode.Server, new{clientId = @Model.ClientID}))

但我不想绕过这个，只是想绕过实际路由以导航到我的 blazor 页面本地主机。com/ClientDashboard/42 例如。

但是我目前在尝试浏览到 https://localhost:5001/TestRouting 页面时出现页面错误

我不确定我遗漏了什么或如何调试它，我们将不胜感激！

更新我尝试了 PMC 的建议，但出现了不同的错误页面空白浏览器工具出现此错误

更新 2

将所有文件移至 Pages 目录，以防位置出现问题。也尝试了几个版本的host.cshtml

仍然，直接在页面上或在浏览器的控制台中获取空引用异常。

上述不同调整的参考 PMC Guide

我确定我在这里遗漏了一些愚蠢的东西，我似乎无法弄清楚是什么。

更新 3

我更新了 _host 文件以匹配 Qing Guo 列出的我已经完成的大部分更改。

默认 _layout 页面加载但不是我正在尝试的 blazor 组件

Answer 1

尝试改变

<Router AppAssembly="typeof(App).Assembly">

在你的 App.Razor 文件中

<Router AppAssembly="typeof(Program).Assembly">

我遵循了这个 guide 并且它在 Dot net 5.0 上使用 Razor Pages 对我有用，也可以通过直接路由实现 Blazor 组件。

Answer 2

试试下面的工作演示，你可以参考一下：

第一步：Blazor 支持

首先，您必须将 Blazor 支持添加到您的应用程序中。此支持将允许您从 Razor 页面呈现 Blazor 组件。

1.Startup.cs:

Services.AddServerSideBlazor();在 ConfigureServices 和 endpoints.MapBlazorHub() 中需要；在配置中：

2._Layout.cshtml:

Blazor 的 JS-library 是启用服务器端 Blazor 所必需的。这可以添加到 _Layout.cshtml:

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

3._Imports.razor:

我们还需要一个名为 _Imports.razor 的新文件。这应该添加到 Pages-folder 中。_Imports.razor 用于为您的 Blazor 组件设置 using-statements。我们可以从以下开始：

@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components.Web

4.Counter.razor:

那是 it.We 现在应该可以在我们现有的应用程序中使用 Blazor-support。我们可以通过 copy-pasting 经典 Counter-component 到我们的应用程序来测试它：

@page "/counter"
 
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code {
    int currentCount = 0;
 
    void IncrementCount()
    {
        currentCount++;
    }
}

5.Privacy.cshtml:

编辑 Privacy.cshtml 以包含计数器组件：

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
 
<p>Use this page to detail your site's privacy policy.</p>
 
<component>@(await Html.RenderComponentAsync<Counter>(RenderMode.Server))</component>

第二步：Blazor 页面支持

1.App.razor:

在 Pages-folder 中创建一个新的 App.razor 文件。 Router 组件在 App.razor:

中定义

@using Microsoft.AspNetCore.Components.Routing
 
<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData"/>
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

2._Host.cshtml:

在 _Host.cshtml 中，我们可以定义在我们的例子中与 Razor 页面使用的布局相同的布局，_Host.cshtml 包含对 Html.RenderComponentAsync:[=19 的调用=]

@page "/blazor"
 
@{
    Layout = "_Layout";
}
 
<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>

3.Startup.cs:

Startup.cs 的一小部分 Configure-method。我们之前添加了 MapBlazorHub 但现在我们还添加了对 MapFallbackToPage 的调用并将其指向新的 _Host.cshtml:

endpoints.MapFallbackToPage("/_Host");

4._Layout.cshtml:

现在我们只需要测试我们的设置。通过编辑 Pages/Shared/_Layout.cshtml:

将 Blazor 页面计数器添加到您的布局中

                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/Counter">Blazor Counter</a>
                        </li>

当我们现在启动应用程序时，我们的 Razor Pages 应用程序中应该有一个工作的 Blazor 页面，并且我们没有中断对将 Blazor 组件添加到 Razor Pages 的支持。

结果：

Blazor 页面路由集成到现有的 razor 页面应用程序

Blazor page routing integration into existing razor page app

.net

razor-pages

blazor-server-side