ASP.NET 核心 MVC 视图中移动“蓝色网络助手”

更新页 : 2022年7月17日星期日

页面创建日期 : 2022年3月30日星期三

环境

Visual Studio

Visual Studio 2019

.NET

.NET 5.0

入门

由于 Blazor WebAssembly 是一种客户端技术，因此无论 Web 服务器如何工作，都无关紧要。但是，要向客户端提供 WebAssembly，至少需要服务器端设置。现在，我们将服务器程序作为 ASP.NET 核心 MVC 运行，以运行 Blazor WebAssembly。

创建布莱佐尔网络子

我希望这次能够看到 Blazor WebAssembly 正常工作，因此在创建项目时，请保留配置。

项目和解决方案名称是可选的。

附加信息屏幕中显示的“托管在 ASP.NET 核心”也可以充当 MVC，但我们不会在此处检查创建的项目，因为它更接近 API 服务器。

发布布鲁佐尔网络子

发布文件以将模糊 Web 助手部署到 ASP.NET 核心 MVC 项目。

右键单击项目并选择“发布”。

选择文件夹。

将目标保留为默认值。

将显示发布屏幕。您可以进行各种设置，但单击“发布”按钮，将其保留为默认值。

等待发布开始并成功完成。请注意，如果文件夹路径很长，则可能会失败。

您可以验证文件是否已在指定的文件夹中创建。如果指定了相对路径，则相对于项目的路径是目标。

创建 ASP.NET 核心 MVC 项目

接下来，ASP.NET 创建核心 MVC 项目。在“虚拟 Web 助理”解决方案中创建它，因为单独打开虚拟工作室很麻烦。这一次，这两个项目不协同工作，因此可以单独创建它们。

项目名称是可选的。其他设置将保留为默认值。

由于 Blazor 端已完成开发 ASP.NET 因此将核心 MVC 端的项目作为启动。

为“混合”创建视图

这取决于您实际创建的项目，因此请修改它以匹配该项目。我们将根据示例项目的配置进行修改。

基本上，您将修改它，使其更接近于发布“混合程序集”时创建 index.html 的形状。

修复_Layout.cshtml

我想引用模糊程序集的 CSS，因此 _Layout.cshtml 我可以直接在中编写它。由于我们希望它尽可能仅应用于目标页面，因此可以通过添加来扩展 CSS 链接，以便可以在 RenderSectionAsync 每个页面上编写它。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - AspNetCoreMvc</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" />
  @* 追加 *@
  @await RenderSectionAsync("Styles", required: false)
</head>
<body>
  <!-- 以下同じなので省略 -->

为布鲁佐尔程序集添加页面

添加显示模糊程序集的专用页面。 ASP.NET 核心 MVC 的常规页面添加和过程相同。

HomeController 将以下操作添加到：服务器端不执行任何操作，因此只需返回视图即可。

HomeController.cs

// 省略

namespace AspNetCoreMvc.Controllers
{
  public class HomeController : Controller
  {
    // 省略

    // 追加
    public IActionResult Blazor()
    {
      return View();
    }
  }
}

右键单击操作以添加视图。

没有要绑定的内容，因此请按原样添加它。

将创建视图。

使用“混合程序集”发布时生成的 index.html ，如下所示：

Blazor.cshtml

@{
  ViewData["Title"] = "Blazor";
}
@section Styles {
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

添加链接以转到“蓝色”页面。

index.cshtml

@{
  ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@* 追加 *@
<a asp-action="Blazor">Blazor</a>