Membuat .NET MAUIBlazor Hybrid aplikasi dengan Blazor Aplikasi Web

Artikel ini memperlihatkan kepada Anda cara membuat .NET MAUIBlazor Hybrid aplikasi dengan Blazor Aplikasi Web yang menggunakan antarmuka pengguna bersama melalui Razor pustaka kelas (RCL).

Prasyarat dan langkah-langkah awal

Untuk prasyarat dan langkah-langkah awal, lihat Membangun .NET MAUIBlazor Hybrid aplikasi. Sebaiknya gunakan .NET MAUIBlazor Hybrid tutorial untuk menyiapkan sistem lokal Anda untuk .NET MAUI pengembangan sebelum menggunakan panduan dalam artikel ini.

.NET MAUIBlazor Hybrid dan aplikasi sampel Aplikasi Web

Dapatkan aplikasi sampel bernama MauiBlazorWeb dari Blazor repositori GitHub sampel (dotnet/blazor-samples) (.NET 8 atau yang lebih baru).

Aplikasi sampel adalah solusi pemula yang berisi .NET MAUIBlazor Hybrid aplikasi Blazor (asli, lintas platform), Aplikasi Web, dan Razor pustaka kelas (RCL) yang berisi UI (Razor komponen) bersama yang digunakan oleh aplikasi asli dan web.

Memigrasikan .NET MAUIBlazor Hybrid solusi

Alih-alih menggunakan aplikasi sampel, Anda dapat memigrasikan .NET MAUIBlazor Hybrid aplikasi yang ada dengan panduan di bagian ini menggunakan Visual Studio.

Tambahkan proyek baru ke solusi dengan Blazor templat proyek Aplikasi Web. Pilih opsi berikut:

• Nama proyek: Gunakan nama solusi dengan .Web ditambahkan. Contoh dalam artikel ini mengasumsikan penamaan berikut:
  • Larutan: MauiBlazorWeb
  • Proyek MAUI: MauiBlazorWeb.Maui
  • Blazor Aplikasi Web: MauiBlazorWeb.Web
  • Razor pustaka kelas (RCL) (ditambahkan di langkah selanjutnya): MauiBlazorWeb.Shared
• Jenis autentikasi: Tidak ada
• Mengonfigurasi untuk HTTPS: Dipilih (diaktifkan)
• Mode render interaktif: Server
• Lokasi interaktivitas: Global
• Halaman sampel: Tidak dipilih (dinonaktifkan)

Pengaturan lokasi Interaktivitas ke Global penting karena aplikasi MAUI selalu berjalan secara interaktif dan melemparkan kesalahan pada Razor halaman komponen yang secara eksplisit menentukan mode render. Jika Anda tidak menggunakan mode render global, Anda harus menerapkan pendekatan yang dijelaskan di bagian Gunakan Blazor mode render setelah mengikuti panduan di bagian ini. Untuk informasi selengkapnya, lihat BlazorWebView memerlukan cara untuk mengaktifkan penggantian ResolveComponentForRenderMode (dotnet/aspnetcore #51235).

Tambahkan proyek pustaka kelas (RCL) baru Razor ke solusi. Contoh dalam artikel ini mengasumsikan bahwa proyek diberi nama MauiBlazorWeb.Shared. Jangan pilih Halaman dukungan dan tampilan saat Anda menambahkan proyek ke solusi.

Tambahkan referensi proyek ke RCL dari proyek MAUI dan Blazor proyek Aplikasi Web.

Pindahkan Components folder dan semua kontennya dari proyek MAUI ke RCL. Konfirmasikan bahwa Components folder dihapus dari proyek MAUI.

Tip

Saat memindahkan folder atau file di Visual Studio, gunakan perintah keyboard atau menu pintasan dengan mengklik kanan untuk operasi potong dan tempel. Menyeret folder di Visual Studio hanya menyalin dari satu lokasi ke lokasi lain, yang memerlukan langkah tambahan untuk menghapus yang asli.

Pindahkan css folder dari wwwroot folder proyek MAUI ke folder RCL wwwroot .

Hapus file berikut dari folder RCL wwwroot :

• background.png
• exampleJsInterop.js

Di RCL, ganti file akar _Imports.razor dengan file di folder RCL Components , timpa file yang ada di RCL dan hapus yang asli di Components folder . Setelah memindahkan file, buka dan ganti nama dua @using pernyataan terakhir agar sesuai dengan namespace RCL. Dalam contoh berikut, namespace RCL adalah MauiBlazorWeb.Shared:

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

Di akar proyek RCL, hapus file berikut:

• Component1.razor
• ExampleJsInterop.cs

Di RCL, buka Components/Routes.razor file dan ubah MauiProgram menjadi Routes:

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

MainPage.xaml Buka file dalam proyek MAUI. xmlns:shared Tambahkan referensi ke RCL di ContentPage atribut . Dalam contoh berikut, namespace RCL adalah MauiBlazorWeb.Shared. Atur nilai yang benar untuk clr-namespace dan assembly:

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

Juga dalam MainPage.xaml file, perbarui BlazorWebView komponen ComponentType root dari local ke shared:

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

Dalam proyek MAUI, buka wwwroot/index.html file dan ubah lembar gaya untuk menunjuk ke jalur aset statis RCL.

Hapus baris berikut:

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

Ganti baris sebelumnya dengan markup berikut. Dalam contoh berikut, jalur aset statis RCL adalah _content/MauiBlazorWeb.Shared/:

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

Blazor Di Aplikasi Web, buka _Imports.razor file dan tambahkan dua @using pernyataan berikut untuk RCL. Dalam contoh berikut, namespace RCL adalah MauiBlazorWeb.Shared:

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

Blazor Di proyek Aplikasi Web, buka App komponen (Components/App.razor). app.css Hapus lembar gaya:

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

Ganti baris sebelumnya dengan referensi lembar gaya aset statis RCL. Dalam contoh berikut, jalur aset statis RCL adalah _content/MauiBlazorWeb.Shared/:

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

Blazor Di proyek Aplikasi Web, hapus folder dan file berikut:

• Folder Components/Layout
• Components/Routes.razor
• Components/Pages/Home.razor
• wwwroot/app.css

Blazor Buka file Aplikasi Program.cs Web dan tambahkan rakitan tambahan untuk RCL ke aplikasi. Dalam contoh berikut, namespace RCL adalah MauiBlazorWeb.Shared:

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

Jalankan proyek MAUI dengan memilih proyek di Penjelajah Solusi dan menggunakan tombol mulai Visual Studio.

Jalankan Blazor proyek Aplikasi Web dengan memilih Blazor proyek Aplikasi Web di Penjelajah Solusi dan menggunakan tombol mulai Visual Studio dengan https konfigurasi build.

Jika Anda menerima kesalahan build bahwa perakitan RCL tidak dapat diselesaikan, buat proyek RCL terlebih dahulu. Jika ada kesalahan sumber daya proyek MAUI yang terjadi pada build, bangun kembali proyek MAUI untuk menghapus kesalahan.

Menggunakan Blazor mode render

Gunakan panduan di salah satu subbagian berikut yang cocok dengan spesifikasi aplikasi Anda untuk menerapkan Blazormode render untuk lokasi interaktivitas tertentu di Blazor Aplikasi Web tetapi abaikan penetapan mode render dalam proyek MAUI.

Sub bagian mode render dan spesifikasi interaktivitas:

• Interaktivitas Server Global
• Interaktivitas Global Auto atau WebAssembly
• Interaktivitas Server per halaman/komponen
• Interaktivitas Otomatis per halaman/komponen
• Interaktivitas WebAssembly per halaman/komponen

Interaktivitas Server Global

• Mode render interaktif: Server
• Lokasi interaktivitas: Global
• Proyek solusi
  • MAUI (MauiBlazorWeb.Maui)
  • Blazor Aplikasi Web (MauiBlazorWeb.Web)
  • RCL (MauiBlazorWeb.Shared): Berisi komponen bersama Razor tanpa mengatur mode render di setiap komponen.

Referensi proyek: MauiBlazorWeb.Maui dan MauiBlazorWeb.Web memiliki referensi proyek ke MauiBlazorWeb.Shared.

Interaktivitas Global Auto atau WebAssembly

• Mode render interaktif: Auto atau WebAssembly
• Lokasi interaktivitas: Global
• Proyek solusi
  • MAUI (MauiBlazorWeb.Maui)
  • Blazor Aplikasi Web
    • Proyek server: MauiBlazorWeb.Web
    • Proyek klien: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): Berisi komponen bersama Razor tanpa mengatur mode render di setiap komponen.

Referensi proyek:

• MauiBlazorWeb.Maui, MauiBlazorWeb.Web, dan MauiBlazorWeb.Web.Client proyek memiliki referensi proyek ke MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web memiliki referensi proyek ke MauiBlazorWeb.Web.Client.

Interaktivitas Server per halaman/komponen

• Mode render interaktif: Server
• Lokasi interaktivitas: Per halaman/komponen
• Proyek solusi
  • MAUI (MauiBlazorWeb.Maui): Panggilan InteractiveRenderSettings.ConfigureBlazorHybridRenderModes di MauiProgram.cs.
  • BlazorAplikasi Web (MauiBlazorWeb.Web): Tidak mengatur @rendermode atribut direktif pada HeadOutlet komponen App dan Routes komponen (Components/App.razor).
  • RCL (MauiBlazorWeb.Shared): Berisi komponen bersama Razor yang mengatur InteractiveServer mode render di setiap komponen.

MauiBlazorWeb.Maui dan MauiBlazorWeb.Web memiliki referensi proyek ke MauiBlazorWeb.Shared.

Tambahkan kelas berikut InteractiveRenderSettings ke RCL. Properti kelas digunakan untuk mengatur mode render komponen.

Proyek MAUI interaktif secara default, sehingga tidak ada tindakan yang diambil pada tingkat proyek di proyek MAUI selain memanggil InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Blazor Untuk Aplikasi Web di klien web, nilai properti ditetapkan dari RenderMode. Ketika komponen dimuat ke dalam BlazorWebView untuk klien asli proyek MAUI, mode render tidak ditetapkan (null) karena proyek MAUI secara eksplisit mengatur properti mode render ke null ketika ConfigureBlazorHybridRenderModes dipanggil.

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

Di MauiProgram.CreateMauiApp dari MauiProgram.cs, panggil ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

Dalam file RCL _Imports.razor , tambahkan arahan statis @using global berikut untuk membuat properti kelas tersedia untuk komponen:

@using static InteractiveRenderSettings

Catatan

Penetapan mode render melalui properti kelas RCL InteractiveRenderSettings berbeda dari Aplikasi Web mandiri Blazor biasa. Blazor Dalam Aplikasi Web, mode render biasanya disediakan oleh RenderMode melalui @using static Microsoft.AspNetCore.Components.Web.RenderMode pernyataan dalam Blazor file Aplikasi _Import Web.

Interaktivitas Otomatis per halaman/komponen

• Mode render interaktif: Otomatis
• Lokasi interaktivitas: Per halaman/komponen
• Proyek solusi
  • MAUI (MauiBlazorWeb.Maui): Panggilan InteractiveRenderSettings.ConfigureBlazorHybridRenderModes di MauiProgram.cs.
  • Blazor Aplikasi Web
    • Proyek server: MauiBlazorWeb.Web: Tidak mengatur @rendermode atribut direktif pada HeadOutlet komponen App dan Routes komponen (Components/App.razor).
    • Proyek klien: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): Berisi komponen bersama Razor yang mengatur InteractiveAuto mode render di setiap komponen.

Referensi proyek:

• MauiBlazorWeb.Maui, MauiBlazorWeb.Web, dan MauiBlazorWeb.Web.Client memiliki referensi proyek ke MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web memiliki referensi proyek ke MauiBlazorWeb.Web.Client.

Tambahkan kelas berikut InteractiveRenderSettings ditambahkan ke RCL. Properti kelas digunakan untuk mengatur mode render komponen.

Proyek MAUI interaktif secara default, sehingga tidak ada tindakan yang diambil pada tingkat proyek di proyek MAUI selain memanggil InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Blazor Untuk Aplikasi Web di klien web, nilai properti ditetapkan dari RenderMode. Ketika komponen dimuat ke dalam BlazorWebView untuk klien asli proyek MAUI, mode render tidak ditetapkan (null) karena proyek MAUI secara eksplisit mengatur properti mode render ke null ketika ConfigureBlazorHybridRenderModes dipanggil.

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

Di MauiProgram.CreateMauiApp dari MauiProgram.cs, panggil ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

Dalam file RCL _Imports.razor , tambahkan arahan statis @using global berikut untuk membuat properti kelas tersedia untuk komponen:

@using static InteractiveRenderSettings

Catatan

Penetapan mode render melalui properti kelas RCL InteractiveRenderSettings berbeda dari Aplikasi Web mandiri Blazor biasa. Blazor Dalam Aplikasi Web, mode render biasanya disediakan oleh RenderMode melalui @using static Microsoft.AspNetCore.Components.Web.RenderMode pernyataan dalam Blazor file Aplikasi _Import Web.

Interaktivitas WebAssembly per halaman/komponen

• Mode render interaktif: WebAssembly
• Lokasi interaktivitas: Per halaman/komponen
• Proyek solusi
  • MAUI (MauiBlazorWeb.Maui)
  • Blazor Aplikasi Web
    • Proyek server: MauiBlazorWeb.Web: Tidak mengatur @rendermode atribut direktif pada HeadOutlet komponen App dan Routes komponen (Components/App.razor).
    • Proyek klien: MauiBlazorWeb.Web.Client
  • RRCL
    • MauiBlazorWeb.Shared
    • MauiBlazorWeb.Shared.Client: Berisi komponen bersama Razor yang mengatur InteractiveWebAssembly mode render di setiap komponen. .Shared.Client RCL dipertahankan secara terpisah dari .Shared RCL karena aplikasi harus mempertahankan komponen yang diperlukan untuk berjalan di WebAssembly secara terpisah dari komponen yang berjalan di server dan yang tetap berada di server.

Referensi proyek:

• MauiBlazorWeb.Maui dan MauiBlazorWeb.Web memiliki referensi proyek ke MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web memiliki referensi proyek ke MauiBlazorWeb.Web.Client.
• MauiBlazorWeb.Web.Client dan MauiBlazorWeb.Shared memiliki referensi proyek ke MauiBlazorWeb.Shared.Client.

Tambahkan parameter berikut AdditionalAssemblies ke Router instans komponen untuk perakitan MauiBlazorWeb.Shared.Client proyek (melalui filenya _Imports ) dalam MauiBlazorWeb.Shared file proyek 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 Tambahkan rakitan proyek (melalui filenya_Imports) dengan panggilan berikut AddAdditionalAssemblies dalam MauiBlazorWeb.Web file proyekProgram.cs:

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

Tambahkan kelas berikut InteractiveRenderSettings ditambahkan ke .Shared.Client RCL. Properti kelas digunakan untuk mengatur mode render komponen untuk komponen berbasis server.

Proyek MAUI interaktif secara default, sehingga tidak ada tindakan yang diambil pada tingkat proyek di proyek MAUI selain memanggil InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Blazor Untuk Aplikasi Web di klien web, nilai properti ditetapkan dari RenderMode. Ketika komponen dimuat ke dalam BlazorWebView untuk klien asli proyek MAUI, mode render tidak ditetapkan (null) karena proyek MAUI secara eksplisit mengatur properti mode render ke null ketika ConfigureBlazorHybridRenderModes dipanggil.

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

Versi kelas yang InteractiveRenderSettings sedikit berbeda ditambahkan ke .Shared RCL. Di kelas yang ditambahkan ke .Shared RCL, InteractiveRenderSettings.ConfigureBlazorHybridRenderModes RCL .Shared.Client dipanggil. Ini memastikan bahwa mode render komponen WebAssembly yang dirender pada klien MAUI tidak ditetapkan (null) karena mereka interaktif secara default pada klien asli.

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

Di MauiProgram.CreateMauiApp dari MauiProgram.cs, panggil ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

_Imports.razor Dalam file .Shared.Client RCL, tambahkan @using static InteractiveRenderSettings untuk membuat properti InteractiveRenderSettings kelas tersedia untuk komponen:

@using static InteractiveRenderSettings

Catatan

Penetapan mode render melalui properti kelas RCL InteractiveRenderSettings berbeda dari Aplikasi Web mandiri Blazor biasa. Blazor Dalam Aplikasi Web, mode render biasanya disediakan oleh RenderMode melalui @using static Microsoft.AspNetCore.Components.Web.RenderMode pernyataan dalam Blazor file Aplikasi _Import Web.

Menggunakan antarmuka untuk mendukung implementasi perangkat yang berbeda

Contoh berikut menunjukkan cara menggunakan antarmuka untuk memanggil implementasi yang berbeda di seluruh aplikasi web dan aplikasi asli (MAUI). Contoh berikut membuat komponen yang menampilkan faktor bentuk perangkat. Gunakan lapisan abstraksi MAUI untuk aplikasi asli dan berikan implementasi untuk aplikasi web.

Razor Di pustaka kelas (RCL), Interfaces folder berisi IFormFactor antarmuka.

Interfaces/IFormFactor.cs:

namespace MauiBlazorWeb.Shared.Interfaces;

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

Komponen berikut DeviceFormFactor ada di folder 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();
}

Di RCL, entri untuk DeviceFormFactor komponen adalah bagian dari menu navigasi di NavMenu komponen.

Di 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>

Aplikasi web dan asli berisi implementasi untuk IFormFactor.

Blazor Di Aplikasi Web, folder bernama Services berisi file berikut FormFactor.cs dengan FormFactor implementasi untuk penggunaan aplikasi web.

Services/FormFactor.cs (Blazor Proyek Aplikasi Web):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Web.Services;

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

Dalam proyek MAUI, folder bernama Services berisi file berikut FormFactor.cs dengan FormFactor implementasi untuk penggunaan asli. Lapisan abstraksi MAUI digunakan untuk menulis kode yang berfungsi pada semua platform perangkat asli.

Services/FormFactor.cs (Proyek 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;
    }
}

Injeksi dependensi digunakan untuk mendapatkan implementasi layanan ini.

Dalam proyek MAUI, MauiProgram.cs file memiliki pernyataan berikut using di bagian atas file:

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

Segera sebelum panggilan ke builder.Build(), FormFactor didaftarkan untuk menambahkan layanan khusus perangkat yang digunakan oleh RCL:

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

Blazor Di Aplikasi Web, Program file memiliki pernyataan berikut using di bagian atas file:

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

Segera sebelum panggilan ke builder.Build(), FormFactor didaftarkan untuk menambahkan layanan khusus perangkat yang Blazor digunakan oleh Aplikasi Web:

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

Jika solusi juga menargetkan WebAssembly melalui .Web.Client proyek, implementasi API sebelumnya juga diperlukan dalam .Web.Client proyek.

Anda juga dapat menggunakan direktif preprocessor kompilator di RCL Anda untuk menerapkan UI yang berbeda tergantung pada perangkat tempat aplikasi berjalan. Untuk skenario ini, aplikasi harus melakukan multi-target RCL seperti yang dilakukan aplikasi MAUI. Misalnya, lihat BethMassi/BethTimeUntil repositori GitHub.

Sumber Daya Tambahan:

• mode render ASP.NET Core Blazor
• Menggunakan Razor kembali komponen di aplikasi ASP.NET Core Blazor Hybrid