Блазор

Развертывание нескольких веб-сборок Blazor в ASP.NET Core MVC

Дата создания страницы :

окружающая среда

Visual Studio
  • Visual Studio 2019
.NET
  • .NET 5.0

Сначала

В этом совете предполагается, что вы знаете "Запуск Blazor WebAssembly в ASP.NET Core MVC View", поэтому, если вы не знаете, как запустить сборку Blazor на ASP.NET Core MVC, обратитесь к этой статье.

Предыдущий метод позволяет разместить только одну сборку Blazor, поэтому этот совет позволяет разместить более одной.

Создание двух Blazor Assembly

Вы можете убедиться, что две сборки Blazor работают соответственно, поэтому вы можете делать то, что представляет собой Blazor Assembly. Пожалуйста, сделайте так, чтобы вы могли видеть разницу на данный момент. Здесь цвет левого меню изменяется для начального состояния проекта.

Опубликуйте каждый проект и подготовьте файл.

Создание проекта ASP.NET Core MVC

Это также основано на советах перед созданием проекта. После создания проекта добавьте "in Microsoft.AspNetCore.Components.WebAssembly.Server NuGet".

Исправление _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>
  <!-- 以下同じなので省略 -->

Добавление страниц для двух blazor Assembly

На этот раз у нас будет два вида, чтобы показать каждую Ассамблею Блазора.

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 href="/" /> состоит из . <base href="/Home/Blazor1/" />

Если вы измените этот путь, Blazor Assembly сможет ссылаться на каждый файл, например dll, как на корень этого пути в относительном пути.

Однако текущая спецификация сборки Blazor указывает, что контроллер и действие имеют одинаковый путь, поскольку, если URL-адрес, определенный действием MVC, не соответствует относительному пути от узла этой базы, сборка 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>
}

Добавьте ссылку, чтобы вы могли перейти на страницу blazor.

индекс.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 при запуске

Путь маршрута Blazor WebAssembly изменяется, поэтому включите его для каждого пути.

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

Развертывание веб-сборки Blazor

В прошлый раз я поместил опубликованный файл в wwwroot таким, каким он был, но поскольку я указал путь для базового тега на каждой странице, я создаю папку с аналогичным путем в wwwroot.

Скопируйте содержимое wwwroot опубликованного файла в каждую папку. Как index.html и прежде, это не требуется.

исполнение

Запустите его, чтобы убедиться, что blazor WebAssembly на каждой странице работает правильно.

ASP.NET запуск Blazor WebAssembly с основным представлением MVC