Блейзор

Розгортання декількох Blazor WebAssemblys в ASP.NET Core MVC

Дата створення сторінки :

середовище

Візуальна студія
  • Візуальна студія 2019
.NET
  • .NET 5,0

Спочатку

Ці поради передбачає ваші знання про "Запуск Blazor WebAssembly в ASP.NET Core MVC View", так що якщо ви не знаєте, як запустити Blazor асамблеї на ASP.NET Core MVC, перегляньте цю статтю.

Попередній спосіб дозволяє розмістити тільки одну збірку Blazor, тому ця Порада дозволяє розмістити більше одного.

Створення двох Блазорних асамблей

Ви можете переконатися, що дві асамблеї Blazor працюють відповідно, так що ви можете зробити все, що Блазор асамблеї. Будь ласка, зробіть це так, щоб ви могли бачити різницю на даний момент. Тут колір лівого меню змінюється для початкового стану проекту.

Опублікуйте кожен проект і підготуйте файл.

створити проект ASP.NET Core MVC

Це також базується на порадах перед створенням проекту. Після створення проекту додайте "в 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 Асамблеї

На цей раз у нас буде два погляди, щоб показати кожну асамблею Blazor.

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 href="/" /> складається з . <base href="/Home/Blazor1/" />

Якщо змінити цей шлях, Blazor Assembly зможе посилатися на кожен файл, наприклад dll, як на корінь цього шляху у відносному шляху.

Однак поточна специфікація Blazor Assembly визначає, що контролер і дія мають однаковий шлях, тому що якщо 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>
}

Додайте посилання, щоб ви могли перейти на сторінку блазора.

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 зміни

Маршрутний шлях Blazor WebAssembly змінюється, тому вмикайте його для кожного шляху.

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

Розгортання Blazor WebAssembly

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

Скопіюйте вміст wwwroot опублікованого файлу до кожної папки. Як index.html і раніше, це не обов'язково.

виконання

Запустіть його, щоб переконатися, що blazor WebAssembly на кожній сторінці працює правильно.

ASP.NET Запустити Blazor WebAssembly з core MVC-видом