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

Страница обновлена : воскресенье, 17 июля 2022 г.

Дата создания страницы : среда, 30 марта 2022 г.

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

Visual Studio

Visual Studio 2019

.NET

.NET 5.0

Сначала

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

Создание веб-сборки Blazor

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

Имя проекта или решения является произвольным.

Экран «ASP.NET размещен на Core», отображаемый на экране дополнительной информации, также может работать как MVC, но результирующий проект находится близко к серверу API, поэтому мы не будем проверять его здесь.

Публикация Blazor WebAssembly

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

Щелкните правой кнопкой мыши проект и выберите Опубликовать.

Выберите Папки.

Оставьте место назначения публикации по умолчанию.

Откроется экран публикации. Вы можете установить различные настройки, но на данный момент кнопка «Опубликовать» оставлена по умолчанию.

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

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

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

Затем создайте проект ASP.NET Core MVC. Отдельное открытие Visual Studio может быть утомительным, поэтому создайте его внутри решения Blazor WebAssembly. Поскольку на этот раз два проекта не связаны, нет никаких проблем, даже если они созданы отдельно.

Имя проекта является необязательным. Остальные настройки остаются по умолчанию.

Поскольку сторона Blazor предполагает, что разработка завершена ASP.NET проект на стороне ядра MVC является стартапом.

Создание представлений для сборки Blazor

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

В принципе, он должен быть изменен, чтобы он напоминал тот, который создается при публикации сборки index.html Blazor.

Исправление _Layout.cshtml

Я хочу сослаться на CSS сборки Blazor, чтобы я мог написать его непосредственно в . _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>
  <!-- 以下同じなので省略 -->

Добавление страницы для сборки Blazor

Добавьте выделенную страницу для отображения сборки Blazor. ASP.NET Обычное добавление страниц и процедура в Core MVC одинаковы.

HomeController Добавьте следующие действия в . Серверная часть не делает ничего особенного, поэтому она просто возвращает представление.

ГлавнаяКонтроллер.cs

// 省略

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

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

Щелкните правой кнопкой мыши действие, чтобы добавить представление.

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

Представление создано.

Используя сгенерированную на момент публикации index.html Blazor Assembly, на которую ссылаются, мы переделаем ее следующим образом.

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.

индекс.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 в поле поиска.

Отображается пакет с таким же именем, поэтому установите его.

Убедитесь, что пакет добавлен.

Изменения в Startup.cs

app.UseHttpsRedirection(); Вставьте следующий код в строку, следующую за строкой:

app.UseBlazorFrameworkFiles();

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

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

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

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

В случае PWA внутренние ошибки возникают, если они не находятся в среде https. Он не может быть установлен как PWA.

Подтверждение выполнения

ASP.NET отладки запустите проект Core MVC. Перейдите на страницу Blazor и убедитесь, что макет сборки Blazor отображается на странице. Выберите левое меню и убедитесь, что каждая функция работает.

Об URL-адресах

Если вы нажмете на левое меню Blazor Assembly, отображаемое на странице, вы заметите, что URL-адрес меняется. Это поведение не соответствует поведению URL-адреса, ожидаемому ASP.NET Core MVC, поэтому, если возможно, сборка Blazor должна предпочтительно создать URL-адрес таким образом, чтобы URL-адрес не изменялся.

При открытии страницы Blazor

При нажатии на меню Счетчик

Список изменений

2022/7/12

Добавлены моменты, которые следует отметить при исключении ненужных файлов в размещении файлов опубликованного приложения Blazor.

2022/3/30

первое издание

Размещение приложений, созданных в Blazor WebAssembly, в IIS

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