Menggunakan Razor kembali komponen di ASP.NET Core Blazor Hybrid

Artikel ini menjelaskan cara menulis dan mengatur Razor komponen untuk web dan Web Views di Blazor Hybrid aplikasi.

Razorkomponen bekerja di seluruh model hosting (Blazor WebAssembly, Blazor Server, dan di ) Blazor Hybriddan di Web View seluruh platform (Android, iOS, dan Windows). Model dan platform hosting memiliki kemampuan unik yang dapat dimanfaat komponen, tetapi komponen yang dijalankan di seluruh model dan platform hosting harus memanfaatkan kemampuan unik secara terpisah, yang ditunjukkan oleh contoh berikut:

• Blazor WebAssembly mendukung interop JavaScript (JS) sinkron, yang tidak didukung oleh saluran komunikasi interop yang benar-benar asinkron JS di dan Blazor Server Web Views aplikasi Blazor Hybrid .
• Komponen dalam Blazor Server aplikasi dapat mengakses layanan yang hanya tersedia di server, seperti konteks database Kerangka Kerja Entitas.
• Komponen dalam BlazorWebView dapat langsung mengakses fitur desktop asli dan perangkat seluler, seperti layanan geolokasi. Blazor Server dan Blazor WebAssembly aplikasi harus mengandalkan antarmuka API web aplikasi di server eksternal untuk menyediakan fitur serupa.

Prinsip desain

Untuk menulis Razor komponen yang dapat bekerja dengan mulus di seluruh model dan platform hosting, patuhi prinsip desain berikut:

• Tempatkan kode UI bersama di Razor pustaka kelas (RCL), yang merupakan kontainer yang dirancang untuk mempertahankan potongan UI yang dapat digunakan kembali untuk digunakan di berbagai model dan platform hosting.
• Implementasi fitur unik tidak boleh ada di RCL. Sebaliknya, RCL harus menentukan abstraksi (antarmuka dan kelas dasar) yang menghosting model dan platform yang diterapkan.
• Hanya ikut serta dalam fitur unik dengan menghosting model atau platform. Misalnya, Blazor WebAssembly mendukung penggunaan IJSInProcessRuntime dan IJSInProcessObjectReference dalam komponen sebagai pengoptimalan, tetapi hanya menggunakannya dengan transmisi bersyarat dan implementasi fallback yang mengandalkan universal IJSRuntime dan IJSObjectReference abstraksi yang didukung semua model hosting dan platform. Untuk informasi selengkapnya tentang IJSInProcessRuntime, lihat Memanggil fungsi JavaScript dari metode .NET di ASP.NET Core Blazor. Untuk informasi selengkapnya tentang IJSInProcessObjectReference, lihat Memanggil metode .NET dari fungsi JavaScript di ASP.NET Core Blazor.
• Sebagai aturan umum, gunakan CSS untuk gaya HTML dalam komponen. Kasus yang paling umum adalah untuk konsistensi dalam tampilan dan nuansa aplikasi. Di tempat-tempat di mana gaya UI harus berbeda di seluruh model atau platform hosting, gunakan CSS untuk menata perbedaan.
• Jika beberapa bagian UI memerlukan konten tambahan atau berbeda untuk model atau platform hosting target, konten dapat dienkapsulasi di dalam komponen dan dirender di dalam RCL menggunakan DynamicComponent. UI tambahan juga dapat disediakan untuk komponen melalui RenderFragment instans. Untuk informasi selengkapnya tentang RenderFragment, lihat Fragmen render konten anak dan Render fragmen untuk logika penyajian yang dapat digunakan kembali.

Organisasi kode proyek

Sebanyak mungkin, menempatkan kode dan konten statis di Razor pustaka kelas (RCL). Setiap model atau platform hosting mereferensikan RCL dan mendaftarkan implementasi individual dalam koleksi layanan aplikasi yang Razor mungkin diperlukan komponen.

Setiap rakitan target hanya boleh berisi kode yang khusus untuk model atau platform hosting tersebut bersama dengan kode yang membantu bootstrap aplikasi.

Menggunakan abstraksi untuk fitur unik

Contoh berikut menunjukkan cara menggunakan abstraksi untuk layanan geolokasi dengan menghosting model dan platform.

• Dalam pustaka kelas (RCL) yang Razor digunakan oleh aplikasi untuk mendapatkan data geolokasi untuk lokasi pengguna di peta, MapComponentRazor komponen menyuntikkan ILocationService abstraksi layanan.
• App.Web untuk Blazor WebAssembly proyek dan Blazor Server diimplementasikan ILocationService sebagai WebLocationService, yang menggunakan panggilan API web untuk mendapatkan data geolokasi.
• App.Desktopuntuk .NET MAUI, WPF, dan Formulir Windows, terapkan ILocationService sebagai DesktopLocationService. DesktopLocationService menggunakan fitur perangkat khusus platform untuk mendapatkan data geolokasi.

.NET MAUIBlazor kode khusus platform

Pola umum dalam .NET MAUI adalah membuat implementasi terpisah untuk platform yang berbeda, seperti mendefinisikan kelas parsial dengan implementasi khusus platform. Misalnya, lihat diagram berikut, di mana kelas parsial untuk CameraService diimplementasikan di masing-masing CameraService.Windows.cs, , CameraService.iOS.csCameraService.Android.cs, dan CameraService.cs:

Jika Anda ingin mengemas fitur khusus platform ke dalam pustaka kelas yang dapat digunakan oleh aplikasi lain, kami sarankan Anda mengikuti pendekatan serupa dengan yang dijelaskan dalam contoh sebelumnya dan membuat abstraksi untuk Razor komponen:

• Tempatkan komponen di Razor pustaka kelas (RCL).
• .NET MAUI Dari pustaka kelas, referensikan RCL dan buat implementasi khusus platform.
• Dalam aplikasi yang menggunakan, referensikan .NET MAUI pustaka kelas.

Contoh berikut menunjukkan konsep untuk gambar dalam aplikasi yang mengatur foto:

• Aplikasi .NET MAUIBlazor Hybrid menggunakan InputPhoto dari RCL yang dirujuknya.
• Aplikasi ini .NET MAUI juga mereferensikan .NET MAUI pustaka kelas.
• InputPhoto dalam RCL menyuntikkan ICameraService antarmuka, yang didefinisikan dalam RCL.
• CameraService implementasi kelas parsial untuk ICameraService berada di .NET MAUI pustaka kelas (CameraService.Windows.cs, CameraService.iOS.cs, ), CameraService.Android.csyang mereferensikan RCL.

Misalnya, lihat Membuat .NET MAUIBlazor Hybrid aplikasi dengan Blazor Web App.