Перейти к содержанию

Размещаем приложение Blazor внутри приложения ASP.NET Core

Наше существующее приложение Blazor по умолчанию сконфигурировано как самостоятельное приложение, и нам нужно внести ещё несколько изменений, чтобы разместить его внутри другого приложения. Для этого сперва удалим следующую строчку в файле BlazorClient/Program.cs:

builder.RootComponents.Add<App>("#app");

Далее, добавим проект BlazorClient в качестве зависимости к проекту SignalRServer.
Затем нам нужно добавить специальный NuGet-пакет, который позволит приложению SignalRServer выступать сервером для размещения приложения Blazor WebAssembly:
dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Server

Далее, добавим страницу, которая будет отображать наш компонент Blazor. Откроем файл Controllers/HomeController.cs нашего приложения и добавим метод
public IActionResult WebAssemblyClient()
{
    return View();
}

Затем добавим соответствующее отображение. Создадим файл Views/Home/WebAssemblyClient.cshtml, в котором будет следующее:
@{
    ViewData["Title"] = "Home Page";
}
@using BlazorClient.Pages;
<component type="typeof(Client)" render-mode="WebAssemblyPrerendered" />
<script src="_framework/blazor.webassembly.js"></script>

Здесь мы загрузили компонент Client из сборки BlazorClient, а также добавили загрузку js-файла, которых позволит компоненту WebAssembly взаимодействовать с контролами на нашей странице. Этот файл поставляется в установленном нами NuGet-пакете. Режим сборки WebAssemblyPrerendered указывает платформе на то, что код будет собран как WebAssembly. Если использование WebAssembly невозможно (например, страница открыта в старом браузере, или браузере с жёсткими ограничениями), будет сгенерирован JavaScript код (аналогично тому, как действует Blazor Server).
Далее добавим ссылку на только что созданную страницу. Откроем файл Views/Shared/_Layout.cshtml и найдём элемент, отвечающий за навигационную панель. Это элемент ul с классом navbar-nav. Добавим в него следующее:
<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="WebAssemblyClient">WebAssembly</a>
</li>

И, наконец, обеспечим доступ к необходимым файлам для промежуточного ПО нашего приложения. Добавим следующую строку в файл Program.cs перед вызовом app.Run():
app.UseBlazorFrameworkFiles();

Последнее обновление : 11 декабря 2022 г.
Дата создания : 11 декабря 2022 г.

Комментарии

Комментарии