ASP.NET 核心 MVC 中放置多个混合 Web 助手

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

环境

Visual Studio

Visual Studio 2019

.NET

.NET 5.0

入门

此提示假定您知道"在 ASP.NET 核心 MVC 视图中移动模糊 WebAssembly"，因此，如果您不知道如何在 ASP.NET 核心 MVC 中移动模糊程序集，请参阅文章。

由于在上一种方法中只能放置一个"混合程序集"，因此此提示允许放置两个或多个。

创建两个混合程序集

只要确保两个混合程序集都正常工作，就可以对"混合程序集"执行任何操作。现在，请创建它，以便了解差异。在这里，我们更改左侧菜单的颜色以适合项目的初始状态。

发布每个项目并准备文件。

创建 ASP.NET 核心 MVC 项目

同样，您将使用前面的提示创建项目。创建项目后，在 NuGet 中 Microsoft.AspNetCore.Components.WebAssembly.Server 添加 '。

修复_Layout.cshtml

这与上次相同。

<!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>
  <!-- 以下同じなので省略 -->

为两个布洛泽尔程序集添加了一个页面

这一次，我们将有两个视图来显示每个混合程序集。

HomeController 向添加两个操作。服务器端不执行任何操作，因此只需返回视图即可。

HomeController.cs

// 省略

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

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

    public IActionResult Blazor2()
    {
      return View();
    }
  }
}

右键单击操作以添加视图。请做两分钟。

将创建视图。

首先，配置第一个蓝色程序集。

Blazor1.cshtml

@{
  ViewData["Title"] = "Blazor1";
}
@section Styles {
  <base href="/Home/Blazor1/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample1.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>
}

与上次不同的是，base 标记的内容 <base href="/" /> 是从的 <base href="/Home/Blazor1/" /> 。

如果更改此路径，则 Blazor 程序集可以将此路径作为根引用每个文件，如 dll。

但是，当前 Blazor 程序集规范指定 MVC 操作确定的 URL 与此基础主机的相对路径不匹配，以便在加载 Blazor 程序集时出错，因此控制器指定路径与操作相同。

顺便说一下，此路径的大小写是有影响的，因此，如果 URL 是自动小写的，则应该为小写。

Blazor2.cshtml 也编辑。 Blazor1.cshtml 请注意，它们与某些内容不同。

Blazor2.cshtml

@{
  ViewData["Title"] = "Blazor2";
}
@section Styles {
  <base href="/Home/Blazor2/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample2.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>

@* 追加 *@
<ul>
  <li><a asp-action="Blazor1">Blazor1</a></li>
  <li><a asp-action="Blazor2">Blazor2</a></li>
</ul>

更改启动.cs

由于"混合 Web 代理"路由的路径会更改，因此请为每个路径启用它。

app.UseBlazorFrameworkFiles("/Home/Blazor1");
app.UseBlazorFrameworkFiles("/Home/Blazor2");

布拉泽尔网络阿萨姆布利的放置

上次，我已将发布的文件放在 wwwroot 中，但由于每个页面都为 base 标记指定了路径，因此我们将为 wwwroot 创建具有类似路径的文件夹。

将已发布文件的 wwwroot 内容复制到每个文件夹。与上次一样 index.html ，不需要它。

执行

运行它，以确保每个页面上的"混合 Web 代理"正常工作。

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