在一个ASP.NET Core 3应用程序中结合Blazor和Razor页面

本文的翻译是在“ C＃ASP.NET Core Developer”课程开始之前准备的。

---

在本文中，我将向您展示如何将基于Blazor的页面添加到现有的Razor Pages应用程序。

前言

开拓者将在两周内获得黄金。项目中的许多事情仍然需要进行相当大的更改，而最新的Preview 9极大地复杂了Razor页面和Blazor组件之间的交互：不再可以使用使用参数将Razor页面中的参数传递给Blazor组件 Html.RenderComponentAsync。将来可能会有所改变，但是在.NET Core 3.0中可能会出现此限制。



如果您仍然想使用Blazor魔术增强现有的Razor Pages应用程序，则一种解决方案是在Blazor中完全创建您的页面。在本文中，我将向您展示如何将Blazor Pages添加到现有的Razor Pages应用程序中，其中应用程序的某些部分是使用Razor Pages构建的，而其他部分是使用Blazor Pages构建的。两种页面的布局都相同。

第一步：支持Blazor

因此，我们有一个现有的Razor Pages应用程序，该应用程序已转换为.NET







Core3 。首先，您需要向应用程序添加Blazor支持。此支持将允许您从“剃刀”页面渲染Blazor组件。官方文档将完全引导您完成该过程，但是这里有一个简短的总结。



Startup.cs：



我们需要添加Services.AddServerSideBlazor到ConfigureServices和endpoints.MapBlazorHub中Configure：







_Layout.cshtml：



需要Blazor JS库才能在服务器端连接Blazor。它可以添加到_Layout.cshtml：







？

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

_Imports.razor：



我们还需要一个名为的新文件_Imports.razor。必须将其添加到Pages文件夹：







_Imports.razor用于设置Blazor组件的using语句。您可以从以下内容开始



：

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

仅此而已。我们的应用程序现在支持Blazor。我们能否通过将经典的Counter组件复制到我们的应用程序中来验证这一点







？

@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++;
    }
}

并编辑Privacy.cshtml以包含Counter组件：

<a href="https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application#">?</a>
@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>

现在，当我们启动该应用程序时，工作计数器应该出现在我们的页面上：







在本文的下一部分中，我将向您展示如何修改Razor Pages应用程序，以便您不仅可以向现有页面添加组件，还可以创建完整的Blazor页面。

第二步：支持Blazor Pages

我们的Blazor组件定义了一个路由“/counter”：







但是遵循它不起作用：







我们的目标是使路由到Blazor页面起作用。我们希望Blazor页面使用与Razor页面相同的布局。为此，我们需要做一些事情，从Router开始。



App.razor：在文件夹中



创建一个新文件App.razor

Pages

：







路由器组件中定义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>

路由器使用page指令自动扫描所有Blazor组件，并向它们添加路由。



_Host.cshtml：



我们还需要一个页面来托管Blazor页面。可以随意命名，但是默认使用Blazor模板_Host.cshtml，这对我们（以及其他任何模板）都很好。在其中_Host.cshtml我们可以定义一个布局，在这种情况下，它与Razor页面的布局相同。







_Host.cshtml包含电话Html.RenderComponentAsync：



？

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

Startup.cs：



最后，对该方法进行了少量添加Configure Startup.cs。之前我们添加了MapBlazorHub，现在我们需要添加一个MapFallbackToPage指向新调用的调用_Host.cshtml：







就是这样！现在我们只需要测试我们的设置。通过编辑将Blazor Page Counter（Counter）添加到布局中Pages/Shared/_Layout.cshtml：







启动应用程序时，我们在Razor Pages应用程序中看到一个工作的Blazor页面：







而且我们没有中断对将Blazor组件添加到Razor Pages的支持：

笔记

需要注意的几件事：

• Blazor路由仅在指向根时才起作用。例如，如果将“ /计数器”更改为，则该“/products/counter”页面将无法加载所需的页面blazor.server.js。我们将得到一个404代替，应该可以更改script标记，以便无论位置如何都可以加载所需的脚本，但这似乎已从8之前的版本更改为9之前的版本，我无法使其正常工作。这是显示问题的404屏幕截图：
• 如果您设法加载脚本，Blazor hub可能会遇到相同的问题：脚本尝试在/ products / blazor而非blazor中找到hub。要变通解决此问题，您可以手动启动服务器和浏览器之间的连接：

？

<script src="~/_framework/blazor.server.js" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      builder.withUrl('/_blazor');
    }
  });
</script>

样例代码

GitHub上提供了此项目的示例代码。

---

想进一步了解我们的课程吗？给你。

---

阅读更多：

• NET Core 3的C＃JSON序列化程序之战

---