Блейзор

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

Сторінка оновлюється :
Дата створення сторінки :

середовище

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

Спочатку

Оскільки Blazor WebAssembly є клієнтською технологією, не має значення, як працює веб-сервер. Однак для того, щоб обслуговувати WebAssembly клієнтам, як мінімум, потрібна конфігурація на стороні сервера. Давайте запустимо серверну програму як ASP.NET Core MVC в Blazor WebAssembly.

Створення blazor WebAssembly

Тепер нам просто потрібно переконатися, що Blazor WebAssembly працює, тому ми залишимо його таким, яким він був, коли ми створювали проект.

Назва проекту або назва рішення довільні.

Екран "ASP.NET розміщений на Core", що відображається на додатковому інформаційному екрані, також може працювати як MVC, але отриманий проект знаходиться близько до сервера API, тому ми не будемо перевіряти його тут.

Видавництво Blazor WebAssembly

Публікуйте файли для розгортання Blazor WebAssembly в ASP.NET Core MVC проекту.

Клацніть проект правою кнопкою миші та виберіть команду Опублікувати.

Виберіть елемент Папки.

Залиште місце публікації за промовчанням.

З'явиться екран публікації. Можна виставити різні настройки, але поки що кнопка «Опублікувати» залишається за замовчуванням.

Дочекайтеся початку і успішного завершення публікації. Зверніть увагу, що довгі шляхи до папок можуть вийти з ладу.

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

Створення ASP.NET Core MVC проекту

Далі створюємо ASP.NET Core MVC-проект. Відкриття Visual Studio окремо може бути виснажливим, тому створіть його всередині рішення Blazor WebAssembly. Оскільки цього разу ці два проекти не пов'язані між собою, проблем немає, навіть якщо вони створюються окремо.

Назва проекту необов'язкова. Інші настройки залишаються за замовчуванням.

Оскільки сторона Blazor передбачає, що розробка завершена ASP.NET проект з основної сторони MVC є стартапом.

Створення переглядів для асамблеї Блазора

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

В основному, його слід модифікувати, щоб він нагадував той, який був створений при публікації index.html Асамблеї Блазора.

Фіксація _Layout.cshtml

Я хочу послатися на CSS Асамблеї Блазора, щоб я міг написати це безпосередньо на . _Layout.cshtml Ми хочемо, щоб він був максимально застосований тільки до цільової сторінки, щоб ми могли розширити його, додавши, щоб RenderSectionAsync посилання на CSS можна було писати на кожній сторінці.

<!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 Звичайне додавання сторінки та процедура в Core 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>
}

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

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>

Додайте посилання microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs Вам не потрібно писати необхідний код самостійно, але для зручності ви отримуєте від Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Клацніть правою кнопкою миші елемент Залежності та виберіть пункт Керування пакетами NuGet.

Виберіть вкладку Адміністрування і введіть в поле пошуку Microsoft.AspNetCore.Components.WebAssembly.Server.

Відображається пакет з такою ж назвою, тому встановіть його.

Переконайтеся, що пакет додано.

Зміни в стартапі.cs

app.UseHttpsRedirection(); Вставте наступний код в рядок, наступний за рядком:

app.UseBlazorFrameworkFiles();

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

В основному, ви можете помістити опубліковану папку Blazor WebAssembly wwwroot, як вона є в папці wwwroot ASP.NEt Core, але вам слід видалити її,index.html оскільки вона більше не знадобиться. Крім того, оскільки йогоfavicon.ico дублюють, вирішіть, який значок використовувати.

Під час випуску за допомогою PWA, якщо ви виключили файли (наприклад, index.html) у теці wwwroot, Відкриється потрібно в текстовому редакторі, також в папці wwwroot, і видалити записи в service-worker-assets.js виключеному файлі. В іншому випадку ви можете отримати внутрішню помилку під час відкриття веб-екрана.

Коли ви публікуєте додаток Blazor, вам не потрібно робити це вручну, виключаючи непотрібні файли зі свого проекту.

У випадку з ПВС внутрішні помилки виникають, якщо вони не знаходяться в середовищі https. Він не може бути встановлений як PWA.

Підтвердження виконання

ASP.NET Debug запускає проект Core MVC. Відвідайте сторінку Blazor і переконайтеся, що на сторінці з'являється макет Асамблеї Блазора. Виберіть меню ліворуч і переконайтеся, що кожна функція працює.

Про URL-адреси

Якщо ви натиснете на ліве меню Blazor Assembly, що відображається на сторінці, ви помітите, що URL-адреса змінюється. Така поведінка не відповідає поведінці URL-адреси, очікуваній ASP.NET Core MVC, тому, якщо можливо, blazor Assembly повинна переважно створювати URL-адресу таким чином, щоб URL-адреса не змінювалася.

Коли ви відкриваєте сторінку Blazor

Коли ви натискаєте меню Лічильник

Журнал змін

2022/7/12
  • Додані моменти, які слід зазначити при виключенні непотрібних файлів у файловому розміщенні опублікованого додатка Blazor.
2022/3/30
  • перше видання
Розмістити програми, створені в Blazor WebAssembly у службах IIS
Розгортання декількох Blazor WebAssemblys в ASP.NET Core MVC