.NET MAUI Blazor Hybrid Создание приложения с помощьюBlazor Web App

В этой статье показано, как создать .NET MAUIBlazor Hybrid приложение с использованием общего пользовательского интерфейса через Blazor Web AppRazor библиотеку классов (RCL).

Предварительные требования и предварительные действия

Предварительные требования и предварительные действия см. в разделе "Создание .NET MAUIBlazor Hybrid приложения". Мы рекомендуем использовать руководство, чтобы настроить локальную систему для .NET MAUI разработки, прежде чем использовать Blazor Hybrid.NET MAUI инструкции в этой статье.

.NET MAUI Blazor Hybrid Шаблон решения веб-приложения и

Шаблон .NET MAUIBlazor Hybrid решения и веб-приложения настраивает решение, предназначенное для Android, iOS, Mac, Windows и Web, которое повторно использует пользовательский интерфейс. Вы можете выбрать интерактивный Blazor режим отрисовки для веб-приложения и создать соответствующие проекты для приложения, включая Blazor Web App приложение и .NET MAUIBlazor Hybrid приложение. Razor Общая библиотека классов (RCL) поддерживает Razor компоненты пользовательского интерфейса приложения. Шаблон также предоставляет пример кода, чтобы показать, как использовать внедрение зависимостей для предоставления различных реализаций интерфейса для Blazor Hybrid и Blazor Web App, как описано в интерфейсах Using для поддержки различных реализаций устройств в этой статье.

Если вы еще не установили рабочую нагрузку .NET MAUI , установите ее сейчас. .NET MAUI Рабочая нагрузка предоставляет шаблон проекта:

dotnet workload install maui

Создайте решение на основе шаблона проекта с помощью следующей команды .NET CLI, заменив {INTERACTIVITY} шаблон на режим отрисовки Blazor, который вы хотите использовать.

• Server: принимает интерактивный режим рендеринга на сервере и создает единое приложение Blazor.
• WebAssembly: принимает интерактивный режим рендеринга WebAssembly и создаёт два проекта: Blazor серверный проект и .Client проект.
• Auto: принимает режим интерактивной автоматической отрисовки и создает два Blazor проекта, серверный проект и .Client проект.

Дополнительные сведения о предыдущих режимах отрисовки и созданных проектах см. в разделе ASP.NET Режимы отрисовки Core Blazor и раздел "Использование Blazor режимов отрисовки" далее в этой статье.

dotnet new maui-blazor-web -o MauiBlazorWeb -I {INTERACTIVITY}

В предыдущей команде используются следующие параметры:

• Параметр -o|--output создает новую папку для приложения с именем MauiBlazorWeb.
• Параметр -I|--InteractivityPlatform задает режим интерактивной отрисовки. Плейсхолдер {INTERACTIVITY} представляет собой интерактивный Blazor режим рендеринга. Все три интерактивных Blazor режима отрисовки (Server, WebAssemblyи Auto) поддерживаются шаблоном проекта. Дополнительные сведения см. в разделе ASP.NET Core Режимы отрисовкиBlazor и в разделе Использование режимов отрисовкиBlazor.

Предыдущая команда создает приложение, которое принимает глобальную Blazor интерактивность, что важно, так как приложения MAUI всегда выполняются в интерактивном режиме и вызывают ошибки на Razor страницах компонентов, которые явно указывают режим отрисовки. Дополнительные сведения см. в разделе BlazorWebView, чтобы включить переопределение ResolveComponentForRenderMode (dotnet/aspnetcore #51235).

Использование Blazor режимов отрисовки

Используйте инструкции в одном из следующих подразделов, которые соответствуют спецификациям приложения для применения Blazorрежимов отрисовки в Blazor Web App заданиях режима отрисовки в проекте MAUI.

Подразделы спецификации режима отрисовки:

• Интерактивность глобального сервера
• Интерактивность глобального авто или webAssembly

Интерактивность глобального сервера

• Режим интерактивной отрисовки: сервер
• Расположение интерактивности: глобальное
• Проекты решений
  • MAUI (MauiBlazorWeb)
  • Blazor Web App (MauiBlazorWeb.Web)
  • RCL (MauiBlazorWeb.Shared): содержит общие Razor компоненты без настройки режимов отрисовки в каждом компоненте.

Ссылки на проект: MauiBlazorWeb и MauiBlazorWeb.Web ссылка на MauiBlazorWeb.Sharedпроект.

Интерактивность глобального авто или webAssembly

• Режим интерактивной отрисовки: авто или WebAssembly
• Расположение интерактивности: глобальное
• Проекты решений
  • MAUI (MauiBlazorWeb)
  • Blazor Web App
    • Проект сервера: MauiBlazorWeb.Web
    • Клиентский проект: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): содержит общие Razor компоненты без настройки режимов отрисовки в каждом компоненте.

Ссылки на проект:

• MauiBlazorWeb, MauiBlazorWeb.Webи MauiBlazorWeb.Web.Client проекты имеют ссылку на MauiBlazorWeb.Sharedпроект.
• MauiBlazorWeb.Web имеет ссылку на MauiBlazorWeb.Web.Clientпроект.

Интерактивность сервера на страницу или компонент

• Режим интерактивной отрисовки: сервер
• Расположение интерактивности: на страницу или компонент
• Проекты решений
  • MAUI (MauiBlazorWeb): вызовы InteractiveRenderSettings.ConfigureBlazorHybridRenderModes в MauiProgram.cs.
  • Blazor Web App(MauiBlazorWeb.Web). Не задает @rendermode атрибут директивы для HeadOutletRoutesApp компонентов компонента ().Components/App.razor
  • RCL (MauiBlazorWeb.Shared): содержит общие Razor компоненты, которые задают InteractiveServer режим отрисовки в каждом компоненте.

MauiBlazorWeb и MauiBlazorWeb.Web ссылка на MauiBlazorWeb.Sharedпроект.

Добавьте следующий InteractiveRenderSettings класс в RCL. Свойства класса используются для задания режимов отрисовки компонентов.

Проект MAUI по умолчанию является интерактивным, поэтому никаких действий на уровне проекта в проекте MAUI, отличном от вызова InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Blazor Web App Для веб-клиента значения свойств назначаются из RenderMode. Когда компоненты загружаются в BlazorWebView собственный клиент проекта MAUI, режимы отрисовки не назначены (nullпоскольку проект MAUI явно задает свойства null режима отрисовки при ConfigureBlazorHybridRenderModes вызове).

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } =
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } =
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } =
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

MauiProgram.CreateMauiAppВMauiProgram.cs, вызовConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

_Imports.razor В файле .Shared RCL замените @using оператор на оператор Microsoft.AspNetCore.Components.Web.RenderMode@using, чтобы InteractiveRenderSettings сделать свойства InteractiveRenderSettings класса доступными для компонентов:

- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings

Примечание.

Назначение режимов отрисовки через свойства класса RCL InteractiveRenderSettings отличается от типичного автономного Blazor Web App. Blazor Web AppВ режиме отрисовки обычно предоставляются RenderMode в Blazor Web App_Import файле.

Автоматическая интерактивность для каждой страницы или компонента

• Режим интерактивной отрисовки: авто
• Расположение интерактивности: на страницу или компонент
• Проекты решений
  • MAUI (MauiBlazorWeb): вызовы InteractiveRenderSettings.ConfigureBlazorHybridRenderModes в MauiProgram.cs.
  • Blazor Web App
    • Проект сервера: MauiBlazorWeb.Webне задает @rendermode атрибут директивы для HeadOutletRoutes компонентов App компонента (Components/App.razor).
    • Клиентский проект: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): содержит общие Razor компоненты, которые задают InteractiveAuto режим отрисовки в каждом компоненте.

Ссылки на проект:

• MauiBlazorWeb, MauiBlazorWeb.Webи MauiBlazorWeb.Web.Client имеет ссылку на MauiBlazorWeb.Sharedпроект.
• MauiBlazorWeb.Web имеет ссылку на MauiBlazorWeb.Web.Clientпроект.

Добавьте следующий InteractiveRenderSettings класс в RCL. Свойства класса используются для задания режимов отрисовки компонентов.

Проект MAUI по умолчанию является интерактивным, поэтому никаких действий на уровне проекта в проекте MAUI, отличном от вызова InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Blazor Web App Для веб-клиента значения свойств назначаются из RenderMode. Когда компоненты загружаются в BlazorWebView собственный клиент проекта MAUI, режимы отрисовки не назначены (nullпоскольку проект MAUI явно задает свойства null режима отрисовки при ConfigureBlazorHybridRenderModes вызове).

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } =
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } =
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } =
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

MauiProgram.CreateMauiAppВMauiProgram.cs, вызовConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

_Imports.razor В файле .Shared.Client RCL замените @using оператор на оператор Microsoft.AspNetCore.Components.Web.RenderMode@using, чтобы InteractiveRenderSettings сделать свойства InteractiveRenderSettings класса доступными для компонентов:

- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings

Примечание.

Назначение режимов отрисовки через свойства класса RCL InteractiveRenderSettings отличается от типичного автономного Blazor Web App. Blazor Web AppВ режиме отрисовки обычно предоставляются RenderMode в Blazor Web App_Import файле.

Интерактивность webAssembly на страницу или компонент

• Режим интерактивной отрисовки: WebAssembly
• Расположение интерактивности: на страницу или компонент
• Проекты решений
  • MAUI (MauiBlazorWeb)
  • Blazor Web App
    • Проект сервера: MauiBlazorWeb.Webне задает @rendermode атрибут директивы для HeadOutletRoutes компонентов App компонента (Components/App.razor).
    • Клиентский проект: MauiBlazorWeb.Web.Client
  • RcLs
    • MauiBlazorWeb.Shared
    • MauiBlazorWeb.Shared.Client: содержит общие Razor компоненты, которые задают InteractiveWebAssembly режим отрисовки в каждом компоненте. .Shared.Client RCL поддерживается отдельно от RCL, так как приложение должно поддерживать компоненты, необходимые для запуска в WebAssembly отдельно от .Shared компонентов, работающих на сервере, и которые остаются на сервере.

Ссылки на проект:

• MauiBlazorWeb и MauiBlazorWeb.Web ссылки на MauiBlazorWeb.Sharedпроект.
• MauiBlazorWeb.Web имеет ссылку на MauiBlazorWeb.Web.Clientпроект.
• MauiBlazorWeb.Web.Client и MauiBlazorWeb.Shared ссылка на MauiBlazorWeb.Shared.Clientпроект.

Добавьте следующий AdditionalAssemblies параметр в Router экземпляр компонента для MauiBlazorWeb.Shared.Client сборки проекта (через файл _Imports ) в MauiBlazorWeb.Shared файле проекта Routes.razor :

<Router AppAssembly="@typeof(Routes).Assembly" 
        AdditionalAssemblies="new [] { typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Components.Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

Добавьте сборку MauiBlazorWeb.Shared.Client проекта (через файл _Imports ) со следующим AddAdditionalAssemblies вызовом в MauiBlazorWeb.Web файле проекта Program.cs :

app.MapRazorComponents<App>()    
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly)
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly); 

Добавьте следующий InteractiveRenderSettings класс в .Shared.Client RCL. Свойства класса используются для задания режимов отрисовки компонентов на основе сервера.

Проект MAUI по умолчанию является интерактивным, поэтому никаких действий на уровне проекта в проекте MAUI, отличном от вызова InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Blazor Web App Для веб-клиента значения свойств назначаются из RenderMode. Когда компоненты загружаются в BlazorWebView собственный клиент проекта MAUI, режимы отрисовки не назначены (nullпоскольку проект MAUI явно задает свойства null режима отрисовки при ConfigureBlazorHybridRenderModes вызове).

InteractiveRenderSettings.cs (.Shared.Client RCL):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } =
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } =
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } =
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

В RCL добавляется InteractiveRenderSettings немного другая версия .Shared класса. В классе, добавленном в .Shared RCL, InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.Shared.Client вызывается RCL. Это гарантирует, что режим отрисовки компонентов WebAssembly, отображаемых на клиенте MAUI, не назначен (null), так как они интерактивны по умолчанию на собственном клиенте.

InteractiveRenderSettings.cs (.Shared RCL):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared
{
    public static class InteractiveRenderSettings
    {
        public static IComponentRenderMode? InteractiveServer { get; set; } = 
            RenderMode.InteractiveServer;
        public static IComponentRenderMode? InteractiveAuto { get; set; } = 
            RenderMode.InteractiveAuto;
        public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
            RenderMode.InteractiveWebAssembly;

        public static void ConfigureBlazorHybridRenderModes()
        {
            InteractiveServer = null;
            InteractiveAuto = null;
            InteractiveWebAssembly = null;
            MauiBlazorWeb.Shared.Client.InteractiveRenderSettings
                .ConfigureBlazorHybridRenderModes();
        }
    }
}

MauiProgram.CreateMauiAppВMauiProgram.cs, вызовConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

_Imports.razor В файле .Shared.Client RCL замените @using оператор на оператор Microsoft.AspNetCore.Components.Web.RenderMode@using, чтобы InteractiveRenderSettings сделать свойства InteractiveRenderSettings класса доступными для компонентов:

- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings

Примечание.

Назначение режимов отрисовки через свойства класса RCL InteractiveRenderSettings отличается от типичного автономного Blazor Web App. Blazor Web AppВ режиме отрисовки обычно предоставляются RenderMode в Blazor Web App_Import файле.

Использование интерфейсов для поддержки различных реализаций устройств

В следующем примере показано, как использовать интерфейс для вызова различных реализаций в веб-приложении и собственном приложении (MAUI). В следующем примере создается компонент, отображающий форм-фактор устройства. Используйте уровень абстракции MAUI для собственных приложений и предоставьте реализацию для веб-приложения.

В библиотеке Razor классов (RCL) Services папка содержит IFormFactor интерфейс.

Services/IFormFactor.cs:

namespace MauiBlazorWeb.Shared.Services
{
    public interface IFormFactor
    {
        public string GetFormFactor();
        public string GetPlatform();
    }
}

Компонент Home (Components/Pages/Home.razor) RCL отображает форм-фактор и платформу.

Components/Pages/Home.razor:

@page "/"
@using MauiBlazorWeb.Shared.Services
@inject IFormFactor FormFactor

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app running on <em>@factor</em> using <em>@platform</em>.

@code {
    private string factor => FormFactor.GetFormFactor();
    private string platform => FormFactor.GetPlatform();
}

Веб-приложения и собственные приложения содержат реализации для IFormFactor.

Blazor Web AppВ папке с именем Services содержится следующий FormFactor.cs файл с FormFactor реализацией для использования веб-приложения.

Services/FormFactor.cs (MauiBlazorWeb.Web проект):

using MauiBlazorWeb.Shared.Services;

namespace MauiBlazorWeb.Web.Services
{
    public class FormFactor : IFormFactor
    {
        public string GetFormFactor()
        {
            return "Web";
        }

        public string GetPlatform()
        {
            return Environment.OSVersion.ToString();
        }
    }
}

В проекте MAUI папка с именем Services содержит следующий FormFactor.cs файл с FormFactor реализацией для собственного использования. Уровень абстракций MAUI используется для написания кода, работающего на всех собственных платформах устройств.

Services/FormFactor.cs (MauiBlazorWeb проект):

using MauiBlazorWeb.Shared.Services;

namespace MauiBlazorWeb.Services
{
    public class FormFactor : IFormFactor
    {
        public string GetFormFactor()
        {
            return DeviceInfo.Idiom.ToString();
        }

        public string GetPlatform()
        {
            return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
        }
    }
}

Внедрение зависимостей используется для получения реализаций этих служб.

В проекте MauiProgram.cs MAUI файл содержит следующие using инструкции в верхней части файла:

using MauiBlazorWeb.Services;
using MauiBlazorWeb.Shared.Interfaces;

Непосредственно перед вызовом builder.Build()FormFactor регистрируется для добавления служб, относящихся к устройству, используемых RCL:

builder.Services.AddSingleton<IFormFactor, FormFactor>();

Blazor Web App Program В файле есть следующие using операторы в верхней части файла:

using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Web.Services;  

Непосредственно перед вызовом builder.Build()регистрируется для добавления служб, относящихся к устройству, FormFactor используемых Blazor Web Appв следующих случаях:

builder.Services.AddScoped<IFormFactor, FormFactor>();

Если решение также предназначено для WebAssembly через .Web.Client проект, в проекте также требуется .Web.Client реализация предыдущего API.

Вы также можете использовать директивы препроцессора компилятора в RCL для реализации разного пользовательского интерфейса в зависимости от устройства, на котором работает приложение. Для этого сценария приложение должно иметь многоцелевой целевой объект RCL так же, как и приложение MAUI. Пример см. в репозитории BethMassi/BethTimeUntilGitHub.

Дополнительные ресурсы

• Проверка подлинности и авторизация в Blazor Hybrid ASP.NET Core
• режимы отрисовки ASP.NET Core Blazor
• Повторное использование Razor компонентов в приложениях ASP.NET Core Blazor Hybrid