Vytvoření .NET MAUIBlazor Hybrid aplikace pomocí Blazor webové aplikace

V tomto článku se dozvíte, jak vytvořit .NET MAUIBlazor Hybrid aplikaci s webovou Blazor aplikací, která používá sdílené uživatelské rozhraní prostřednictvím Razor knihovny tříd (RCL).

Požadavky a předběžné kroky

Požadavky a předběžné kroky najdete v tématu Sestavení .NET MAUIBlazor Hybrid aplikace. Před použitím pokynů v tomto článku doporučujeme použít .NET MAUIBlazor Hybrid kurz k nastavení místního systému pro .NET MAUI vývoj.

.NET MAUIBlazor Hybrid ukázková aplikace a webová aplikace

Získejte ukázkovou aplikaci s názvem MauiBlazorWeb z Blazor úložiště GitHubu () (dotnet/blazor-samples.NET 8 nebo novější).

Ukázková aplikace je počáteční řešení, které obsahuje .NET MAUIBlazor Hybrid (nativní, multiplatformní) aplikaci, Blazor webovou aplikaci a knihovnu Razor tříd (RCL), která obsahuje sdílené uživatelské rozhraní (Razor komponenty) používané nativními a webovými aplikacemi.

Migrace .NET MAUIBlazor Hybrid řešení

Místo použití ukázkové aplikace můžete pomocí sady Visual Studio migrovat existující .NET MAUIBlazor Hybrid aplikaci s pokyny v této části.

Přidejte do řešení nový projekt pomocí Blazor šablony projektu webové aplikace . Vyberte následující možnosti:

• Název projektu: Použijte název řešení s připojeným .Web názvem. Příklady v tomto článku předpokládají následující pojmenování:
  • Řešení: MauiBlazorWeb
  • Projekt MAUI: MauiBlazorWeb.Maui
  • Blazor Webová aplikace: MauiBlazorWeb.Web
  • Razor Knihovna tříd (RCL) (přidaná v pozdějším kroku): MauiBlazorWeb.Shared
• Typ ověřování: Žádný
• Konfigurace pro HTTPS: Vybraná (povolená)
• Interaktivní režim vykreslování: Server
• Umístění interaktivity: Globální
• Ukázkové stránky: Nevybrané (zakázané)

Nastavení umístění interaktivity na globální je důležité, protože aplikace MAUI vždy běží interaktivně a na Razor stránkách součástí, které explicitně určují režim vykreslování. Pokud nepoužíváte globální režim vykreslování, musíte po provedení pokynů v této části implementovat přístup popsaný v části Použít Blazor režimy vykreslování. Další informace naleznete v tématu BlazorWebView potřebuje způsob, jak povolit přepsání ResolveComponentForRenderMode (dotnet/aspnetcore #51235).

Do řešení přidejte nový Razor projekt knihovny tříd (RCL). Příklady v tomto článku předpokládají, že projekt má název MauiBlazorWeb.Shared. Při přidávání projektu do řešení nevybírejte stránky a zobrazení podpory.

Přidejte odkazy na projekt RCL z projektu MAUI i projektu Blazor webové aplikace.

Components Přesuňte složku a veškerý její obsah z projektu MAUI do seznamu RCL. Ověřte, že Components je složka odstraněna z projektu MAUI.

Tip

Při přesouvání složky nebo souboru v sadě Visual Studio použijte klávesové příkazy nebo místní nabídku kliknutím pravým tlačítkem myši na operaci vyjmutí a vložení. Přetažení složky v sadě Visual Studio kopíruje jenom z jednoho umístění do jiného, což vyžaduje další krok pro odstranění originálu.

css Přesuňte složku ze wwwroot složky projektu MAUI do složky seznamu RCLwwwroot.

Ze složky seznamu RCL wwwroot odstraňte následující soubory:

• background.png
• exampleJsInterop.js

V seznamu RCL nahraďte kořenový soubor kořenovým _Imports.razor souborem ve složce seznamu RCL Components , přepište existující soubor v seznamu RCL a odstraňte původní soubor ve Components složce. Po přesunutí souboru ho otevřete a přejmenujte poslední dva @using příkazy tak, aby odpovídaly oboru názvů seznamu RCL. V následujícím příkladu je MauiBlazorWeb.Sharedobor názvů RCL:

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

V kořenovém adresáři projektu RCL odstraňte následující soubory:

• Component1.razor
• ExampleJsInterop.cs

V seznamu RCL otevřete Components/Routes.razor soubor a změňte MauiProgram na Routes:

- <Router AppAssembly="@typeof(MauiProgram).Assembly">
+ <Router AppAssembly="@typeof(Routes).Assembly">

MainPage.xaml Otevřete soubor v projektu MAUI. xmlns:shared Přidejte odkaz na seznam RCL v ContentPage atributech. V následujícím příkladu je MauiBlazorWeb.Sharedobor názvů RCL . Nastavte správnou hodnotu pro hodnotu i clr-namespaceassemblypro :

xmlns:shared="clr-namespace:MauiBlazorWeb.Shared;assembly=MauiBlazorWeb.Shared"

MainPage.xaml V souboru také aktualizujte kořenovou komponentu ComponentTypeBlazorWebView z local :shared

- <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
+ <RootComponent Selector="#app" ComponentType="{x:Type shared:Components.Routes}" />

V projektu MAUI otevřete wwwroot/index.html soubor a změňte šablony stylů tak, aby ukazovaly na cestu statického prostředku seznamu RCL.

Odeberte následující řádky:

- <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
- <link rel="stylesheet" href="css/app.css" />

Nahraďte předchozí řádky následujícím kódem. V následujícím příkladu je _content/MauiBlazorWeb.Shared/cesta statického prostředku seznamu RCL:

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

Blazor Ve webové aplikaci otevřete _Imports.razor soubor a přidejte následující dva @using příkazy pro seznam RCL. V následujícím příkladu je MauiBlazorWeb.Sharedobor názvů RCL:

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

Blazor V projektu Webové aplikace otevřete komponentu App (Components/App.razor). app.css Odeberte šablonu stylů:

- <link rel="stylesheet" href="app.css" />

Nahraďte předchozí řádek odkazy na šablonu stylů statických prostředků seznamu RCL. V následujícím příkladu je _content/MauiBlazorWeb.Shared/cesta statického prostředku seznamu RCL:

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

Blazor V projektu Webové aplikace odstraňte následující složku a soubory:

• Components/Layout složka
• Components/Routes.razor
• Components/Pages/Home.razor
• wwwroot/app.css

Blazor Otevřete soubor webové aplikace Program.cs a přidejte do aplikace další sestavení pro seznam RCL. V následujícím příkladu je MauiBlazorWeb.Sharedobor názvů RCL:

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

Spusťte projekt MAUI tak, že vyberete projekt v Průzkumník řešení a použijete tlačítko Start sady Visual Studio.

Blazor Spusťte projekt webové aplikace takBlazor, že v Průzkumník řešení vyberete projekt webové aplikace a použijete tlačítko Start sady Visual Studio s https konfigurací sestavení.

Pokud se zobrazí chyba sestavení, kterou sestavení RCL nejde vyřešit, nejprve sestavte projekt RCL. Pokud při sestavení dojde k nějakým chybám zdrojů projektu MAUI, znovu sestavte projekt MAUI, aby se chyby vymazaly.

Použití Blazor režimů vykreslování

Použijte pokyny v jednom z následujících pododdílů, které odpovídají specifikacím vaší aplikace pro použití Blazorrežimů vykreslování pro dané umístění interaktivity ve Blazor webové aplikaci, ale ignorujte přiřazení režimu vykreslování v projektu MAUI.

Pododdíly režimu vykreslování a specifikace interaktivity:

• Interaktivita globálního serveru
• Globální automatická nebo interaktivita webassembly
• Interaktivita serveru na stránce nebo komponentě
• Automatická interaktivita jednotlivých stránek nebo součástí
• Interaktivita WebAssembly na stránce nebo komponentě

Interaktivita globálního serveru

• Interaktivní režim vykreslování: Server
• Umístění interaktivity: Globální
• Projekty řešení
  • MAUI (MauiBlazorWeb.Maui)
  • Blazor Webová aplikace (MauiBlazorWeb.Web)
  • RCL (MauiBlazorWeb.Shared): Obsahuje sdílené Razor komponenty bez nastavení režimů vykreslení v každé komponentě.

Odkazy na projekt: MauiBlazorWeb.Maui a MauiBlazorWeb.Web mají odkaz na MauiBlazorWeb.Sharedprojekt .

Globální automatická nebo interaktivita webassembly

• Interaktivní režim vykreslování: Automaticky nebo WebAssembly
• Umístění interaktivity: Globální
• Projekty řešení
  • MAUI (MauiBlazorWeb.Maui)
  • Blazor Webová aplikace
    • Serverový projekt: MauiBlazorWeb.Web
    • Projekt klienta: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): Obsahuje sdílené Razor komponenty bez nastavení režimů vykreslení v každé komponentě.

Odkazy na projekt:

• MauiBlazorWeb.Maui, MauiBlazorWeb.Weba MauiBlazorWeb.Web.Client projekty mají odkaz na MauiBlazorWeb.Sharedprojekt .
• MauiBlazorWeb.Web obsahuje odkaz na MauiBlazorWeb.Web.Clientprojekt .

Interaktivita serveru na stránce nebo komponentě

• Interaktivní režim vykreslování: Server
• Umístění interaktivity: Jednotlivé stránky nebo komponenty
• Projekty řešení
  • MAUI (MauiBlazorWeb.Maui): Volání InteractiveRenderSettings.ConfigureBlazorHybridRenderModes do MauiProgram.cs.
  • Blazor Webová aplikace (MauiBlazorWeb.Web): Nenastavuje @rendermode atribut direktivy HeadOutletRoutes u komponent App komponenty (Components/App.razor).
  • RCL (MauiBlazorWeb.Shared): Obsahuje sdílené Razor komponenty, které nastavují InteractiveServer režim vykreslování v jednotlivých komponentách.

MauiBlazorWeb.Maui a MauiBlazorWeb.Web mít odkaz na MauiBlazorWeb.Sharedprojekt .

Do seznamu RCL přidejte následující InteractiveRenderSettings třídu. Vlastnosti třídy slouží k nastavení režimů vykreslování komponent.

Projekt MAUI je ve výchozím nastavení interaktivní, takže se na úrovni projektu v jiném projektu MAUI než volání InteractiveRenderSettings.ConfigureBlazorHybridRenderModesneprovedou žádné akce.

Blazor Pro webovou aplikaci ve webovém klientovi jsou hodnoty vlastností přiřazeny z RenderMode. Když jsou komponenty načteny do BlazorWebView nativního klienta projektu MAUI, režimy vykreslování nejsou přiřazené (null), protože projekt MAUI explicitně nastaví vlastnosti režimu vykreslování na null dobu, kdy ConfigureBlazorHybridRenderModes je volána.

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;
    }
}

In MauiProgram.CreateMauiApp of MauiProgram.cs, call ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

Do souboru RCL _Imports.razor přidejte následující globální statickou @using direktivu, která zpřístupní vlastnosti třídy komponentám:

@using static InteractiveRenderSettings

Poznámka:

Přiřazení režimů vykreslování prostřednictvím vlastností třídy RCL InteractiveRenderSettings se liší od typické samostatné Blazor webové aplikace. Blazor Ve webové aplikaci jsou režimy vykreslování obvykle poskytovány příkazem RenderMode@using static Microsoft.AspNetCore.Components.Web.RenderMode v Blazor souboru webové aplikace_Import.

Automatická interaktivita jednotlivých stránek nebo součástí

• Interaktivní režim vykreslování: Automaticky
• Umístění interaktivity: Jednotlivé stránky nebo komponenty
• Projekty řešení
  • MAUI (MauiBlazorWeb.Maui): Volání InteractiveRenderSettings.ConfigureBlazorHybridRenderModes do MauiProgram.cs.
  • Blazor Webová aplikace
    • Serverový projekt: Nenastavuje @rendermode atribut direktivy pro HeadOutletRoutes komponenty App komponenty (Components/App.razor). MauiBlazorWeb.Web
    • Projekt klienta: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): Obsahuje sdílené Razor komponenty, které nastavují InteractiveAuto režim vykreslování v jednotlivých komponentách.

Odkazy na projekt:

• MauiBlazorWeb.Maui, MauiBlazorWeb.Weba MauiBlazorWeb.Web.Client mít odkaz na MauiBlazorWeb.Sharedprojekt .
• MauiBlazorWeb.Web obsahuje odkaz na MauiBlazorWeb.Web.Clientprojekt .

Do seznamu RCL přidejte následující InteractiveRenderSettings třídu. Vlastnosti třídy slouží k nastavení režimů vykreslování komponent.

Projekt MAUI je ve výchozím nastavení interaktivní, takže se na úrovni projektu v jiném projektu MAUI než volání InteractiveRenderSettings.ConfigureBlazorHybridRenderModesneprovedou žádné akce.

Blazor Pro webovou aplikaci ve webovém klientovi jsou hodnoty vlastností přiřazeny z RenderMode. Když jsou komponenty načteny do BlazorWebView nativního klienta projektu MAUI, režimy vykreslování nejsou přiřazené (null), protože projekt MAUI explicitně nastaví vlastnosti režimu vykreslování na null dobu, kdy ConfigureBlazorHybridRenderModes je volána.

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;
    }
}

In MauiProgram.CreateMauiApp of MauiProgram.cs, call ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

Do souboru RCL _Imports.razor přidejte následující globální statickou @using direktivu, která zpřístupní vlastnosti třídy komponentám:

@using static InteractiveRenderSettings

Poznámka:

Přiřazení režimů vykreslování prostřednictvím vlastností třídy RCL InteractiveRenderSettings se liší od typické samostatné Blazor webové aplikace. Blazor Ve webové aplikaci jsou režimy vykreslování obvykle poskytovány příkazem RenderMode@using static Microsoft.AspNetCore.Components.Web.RenderMode v Blazor souboru webové aplikace_Import.

Interaktivita WebAssembly na stránce nebo komponentě

• Interaktivní režim vykreslování: WebAssembly
• Umístění interaktivity: Jednotlivé stránky nebo komponenty
• Projekty řešení
  • MAUI (MauiBlazorWeb.Maui)
  • Blazor Webová aplikace
    • Serverový projekt: Nenastavuje @rendermode atribut direktivy pro HeadOutletRoutes komponenty App komponenty (Components/App.razor). MauiBlazorWeb.Web
    • Projekt klienta: MauiBlazorWeb.Web.Client
  • Seznamy RCLs
    • MauiBlazorWeb.Shared
    • MauiBlazorWeb.Shared.Client: Obsahuje sdílené Razor komponenty, které v každé komponentě nastavují InteractiveWebAssembly režim vykreslování. Seznam .Shared.Client RCL se udržuje odděleně od .Shared seznamu RCL, protože aplikace by měla udržovat komponenty potřebné ke spuštění na WebAssembly odděleně od komponent, které běží na serveru a které zůstávají na serveru.

Odkazy na projekt:

• MauiBlazorWeb.Maui a MauiBlazorWeb.Web mít odkazy na MauiBlazorWeb.Sharedprojekt .
• MauiBlazorWeb.Web obsahuje odkaz na MauiBlazorWeb.Web.Clientprojekt .
• MauiBlazorWeb.Web.Client a MauiBlazorWeb.Shared mít odkaz na MauiBlazorWeb.Shared.Clientprojekt .

Do instance komponenty pro MauiBlazorWeb.Shared.Client sestavení projektu (prostřednictvím souboru_Imports) v MauiBlazorWeb.Shared souboru projektu Routes.razor přidejte následující AdditionalAssemblies parametrRouter:

<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 Přidejte sestavení projektu (prostřednictvím souboru_Imports) s následujícím AddAdditionalAssemblies voláním v MauiBlazorWeb.Web souboru projektuProgram.cs:

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

Do seznamu RCL přidejte .Shared.Client následující InteractiveRenderSettings třídu. Vlastnosti třídy slouží k nastavení režimů vykreslování komponent pro serverové komponenty.

Projekt MAUI je ve výchozím nastavení interaktivní, takže se na úrovni projektu v jiném projektu MAUI než volání InteractiveRenderSettings.ConfigureBlazorHybridRenderModesneprovedou žádné akce.

Blazor Pro webovou aplikaci ve webovém klientovi jsou hodnoty vlastností přiřazeny z RenderMode. Když jsou komponenty načteny do BlazorWebView nativního klienta projektu MAUI, režimy vykreslování nejsou přiřazené (null), protože projekt MAUI explicitně nastaví vlastnosti režimu vykreslování na null dobu, kdy ConfigureBlazorHybridRenderModes je volána.

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;
    }
}

Do seznamu RCL se přidá .Shared mírně odlišná verze InteractiveRenderSettings třídy. Ve třídě přidané do .Shared seznamu RCL se InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.Shared.Client volá seznam RCL. Tím se zajistí, že režim vykreslování komponent WebAssembly vykreslených na klientovi MAUI není přiřazený (null), protože jsou ve výchozím nastavení interaktivní na nativním klientovi.

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();
        }
    }
}

In MauiProgram.CreateMauiApp of MauiProgram.cs, call ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

_Imports.razor V souboru .Shared.Client RCL přidejte@using static InteractiveRenderSettings, aby byly vlastnosti InteractiveRenderSettings třídy k dispozici pro komponenty:

@using static InteractiveRenderSettings

Poznámka:

Přiřazení režimů vykreslování prostřednictvím vlastností třídy RCL InteractiveRenderSettings se liší od typické samostatné Blazor webové aplikace. Blazor Ve webové aplikaci jsou režimy vykreslování obvykle poskytovány příkazem RenderMode@using static Microsoft.AspNetCore.Components.Web.RenderMode v Blazor souboru webové aplikace_Import.

Použití rozhraní pro podporu různých implementací zařízení

Následující příklad ukazuje, jak pomocí rozhraní volat různé implementace v rámci webové aplikace a nativní aplikace (MAUI). Následující příklad vytvoří komponentu, která zobrazí faktor formuláře zařízení. Pro nativní aplikace použijte abstrakci MAUI a poskytněte implementaci webové aplikace.

V knihovně Razor tříd (RCL) Interfaces obsahuje IFormFactor složka rozhraní.

Interfaces/IFormFactor.cs:

namespace MauiBlazorWeb.Shared.Interfaces;

public interface IFormFactor
{
    public string GetFormFactor();
    public string GetPlatform();
}

Následující DeviceFormFactor komponenta se nachází ve složce seznamu RCL Components .

Components/Pages/DeviceFormFactor.razor:

@page "/device-form-factor"
@using MauiBlazorWeb.Shared.Interfaces
@inject IFormFactor FormFactor

<PageTitle>Form Factor</PageTitle>

<h1>Device Form Factor</h1>

<p>You are running on:</p>

<ul>
    <li>Form Factor: @factor</li>
    <li>Platform: @platform</li>
</ul>

<p>
    <em>This component is defined in the MauiBlazorWeb.Shared library.</em>
</p>

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

V seznamu RCL je položka pro DeviceFormFactor komponentu součástí navigační nabídky v komponentě NavMenu .

V Components/Layout/NavMenu.razor:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="device-form-factor">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Form Factor
    </NavLink>
</div>

Webové a nativní aplikace obsahují implementace pro IFormFactor.

Blazor Ve webové aplikaci obsahuje složka s názvem Services následující FormFactor.cs soubor s implementací FormFactor pro použití webové aplikace.

Services/FormFactor.cs (Blazor projekt webové aplikace):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Web.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return "Web";
    }
    public string GetPlatform()
    {
        return Environment.OSVersion.ToString();
    }
}

V projektu MAUI obsahuje složka s názvem Services následující FormFactor.cs soubor s implementací FormFactor pro nativní použití. Vrstva abstrakcí MAUI se používá k psaní kódu, který funguje na všech nativních platformách zařízení.

Services/FormFactor.cs (projekt MAUI):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Maui.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return DeviceInfo.Idiom.ToString();
    }
    public string GetPlatform()
    {
        return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
    }
}

Injektáž závislostí se používá k získání implementací těchto služeb.

V projektu MauiProgram.cs MAUI má soubor v horní části souboru následující using příkazy:

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

Bezprostředně před voláním builder.Build()FormFactor se zaregistruje k přidání služeb specifických pro zařízení používaných seznamem RCL:

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

Blazor Ve webové aplikaci Program má soubor v horní části souboru následující using příkazy:

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

Bezprostředně před voláním builder.Build()FormFactor se zaregistruje k přidání služeb specifických pro zařízení používaných Blazor webovou aplikací:

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

Pokud řešení cílí také na WebAssembly prostřednictvím .Web.Client projektu, vyžaduje se v .Web.Client projektu také implementace předchozího rozhraní API.

Direktivy preprocesoru kompilátoru můžete v seznamu RCL použít také k implementaci jiného uživatelského rozhraní v závislosti na zařízení, na kterém aplikace běží. V tomto scénáři musí aplikace s více cílit na seznam RCL stejně jako aplikace MAUI. Příklad najdete v úložišti BethMassi/BethTimeUntilGitHub.

Další materiály

• režimy vykreslování ASP.NET Core Blazor
• Opakované použití Razor součástí v aplikacích ASP.NET Core Blazor Hybrid