ASP.NET Core'da bileşenleri yeniden kullanma RazorBlazor Hybrid
Uyarı
ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.
Bu makalede, web ve uygulamalar için bileşenleri yazma ve Web ViewsBlazor Hybrid düzenleme Razor işlemleri açıklanmaktadır.
Razor bileşenleri barındırma modellerinde (Blazor WebAssembly, Blazor Serverve içinde Web ViewBlazor Hybrid) ve platformlar (Android, iOS ve Windows) arasında çalışır. Barındırma modelleri ve platformları, bileşenlerin yararlanabileceği benzersiz özelliklere sahiptir, ancak barındırma modelleri ve platformlar arasında yürütülen bileşenler aşağıdaki örneklerin gösterdiği benzersiz özelliklerden ayrı olarak yararlanmalıdır:
- Blazor WebAssemblyzaman uyumlu JavaScript (JS) birlikte çalışma desteği sağlar. Bu, uygulamalarda ve Blazor HybridWeb Views uygulamalarda kesinlikle zaman uyumsuz JS birlikte çalışma iletişim kanalı Blazor Server tarafından desteklenmez.
- Bir Blazor Server uygulamadaki bileşenler, Entity Framework veritabanı bağlamı gibi yalnızca sunucuda kullanılabilen hizmetlere erişebilir.
- içindeki
BlazorWebView
bileşenler, coğrafi konum hizmetleri gibi yerel masaüstü ve mobil cihaz özelliklerine doğrudan erişebilir. Blazor Server ve Blazor WebAssembly uygulamaların benzer özellikler sağlamak için dış sunuculardaki uygulamaların web API arabirimlerine güvenmesi gerekir.
Tasarım ilkeleri
Barındırma modelleri ve platformları arasında sorunsuz bir şekilde çalışabilecek bileşenler yazmak Razor için aşağıdaki tasarım ilkelerine uyun:
- Paylaşılan kullanıcı arabirimi kodunu, farklı barındırma modellerinde ve platformlarında Razor kullanılmak üzere yeniden kullanılabilir kullanıcı arabirimi parçalarını korumak üzere tasarlanmış kapsayıcılar olan sınıf kitaplıklarına (RCL) yerleştirin.
- Benzersiz özelliklerin uygulamaları KCL'lerde mevcut olmamalıdır. Bunun yerine RCL, modelleri ve platformları barındıran soyutlamalar (arabirimler ve temel sınıflar) tanımlamalıdır.
- Yalnızca modeli veya platformu barındırarak benzersiz özellikleri kabul edin. Örneğin, Blazor WebAssembly bir bileşende iyileştirme olarak ve IJSInProcessObjectReference kullanımını IJSInProcessRuntime destekler, ancak bunları yalnızca tüm barındırma modellerinin ve platformlarının desteklediği evrensel IJSRuntime ve soyutlamalara dayanan koşullu yayınlar ve IJSObjectReference geri dönüş uygulamalarıyla kullanın. hakkında IJSInProcessRuntimedaha fazla bilgi için bkz . ASP.NET Core'da Blazor.NET yöntemlerinden JavaScript işlevlerini çağırma. hakkında IJSInProcessObjectReferencedaha fazla bilgi için bkz . ASP.NET Core'da BlazorJavaScript işlevlerinden .NET yöntemlerini çağırma.
- Genel bir kural olarak, bileşenlerde HTML stili için CSS kullanın. En yaygın durum, bir uygulamanın genel görünümünde tutarlılık sağlamaktır. Kullanıcı arabirimi stillerinin barındırma modelleri veya platformlar arasında farklı olması gereken yerlerde, farklılıkları stil olarak ayarlamak için CSS'yi kullanın.
- Kullanıcı arabiriminin bir bölümü hedef barındırma modeli veya platformu için ek veya farklı içerik gerektiriyorsa, içerik bir bileşenin içinde kapsüllenebilir ve kullanılarak
DynamicComponent
RCL içinde işlenebilir. Örnekler aracılığıyla RenderFragment bileşenlere ek kullanıcı arabirimi de sağlanabilir. hakkında RenderFragmentdaha fazla bilgi için bkz . Alt içerik işleme parçaları ve Yeniden kullanılabilir işleme mantığı için parçaları işleme.
Proje kodu kuruluşu
Mümkün olduğunca, kod ve statik içeriği Razor sınıf kitaplıklarına (RCL' ler) yerleştirin. Her barındırma modeli veya platformu RCL'ye başvurur ve bir Razor bileşenin gerektirebileceği tek tek uygulamaları uygulamanın hizmet koleksiyonuna kaydeder.
Her hedef derleme yalnızca söz konusu barındırma modeline veya platforma özgü kodu ve uygulamayı önyüklemeye yardımcı olan kodu içermelidir.
Benzersiz özellikler için soyutlamaları kullanma
Aşağıdaki örnekte, modeli ve platformu barındırarak bir coğrafi konum hizmeti için soyutlamanın nasıl kullanılacağı gösterilmektedir.
- Razor Uygulama tarafından kullanıcının harita
MapComponent
Razor üzerindeki konumuna ait coğrafi konum verilerini almak için kullanılan bir sınıf kitaplığında (RCL), bileşen birILocationService
hizmet soyutlaması ekler. App.Web
ve Blazor WebAssemblyBlazor Server projeleri, coğrafi konum verilerini almak için web API çağrılarını kullanan olarakWebLocationService
uygularILocationService
.App.Desktop
, WPF ve Windows Forms için .NET MAUIolarakDesktopLocationService
uygulayınILocationService
.DesktopLocationService
coğrafi konum verilerini almak için platforma özgü cihaz özelliklerini kullanır.
.NET MAUIBlazor platforma özgü kod
içindeki .NET MAUI yaygın bir desen, platforma özgü uygulamalarla kısmi sınıflar tanımlama gibi farklı platformlar için ayrı uygulamalar oluşturmaktır. Örneğin, için kısmi sınıfların CameraService
, , CameraService.iOS.cs
CameraService.Android.cs
ve CameraService.cs
her birinde CameraService.Windows.cs
uygulandığı aşağıdaki diyagrama bakın:
Platforma özgü özellikleri diğer uygulamalar tarafından kullanılabilecek bir sınıf kitaplığına paketlemek istediğinizde, önceki örnekte açıklanana benzer bir yaklaşım izlemenizi ve bileşen için Razor bir soyutlama oluşturmanızı öneririz:
- Bileşeni bir Razor sınıf kitaplığına (RCL) yerleştirin.
- .NET MAUI Sınıf kitaplığından RCL'ye başvurun ve platforma özgü uygulamaları oluşturun.
- Tüketen uygulama içinde sınıf kitaplığına .NET MAUI başvurun.
Aşağıdaki örnekte, fotoğrafları düzenleyen bir uygulamadaki görüntülere yönelik kavramlar gösterilmektedir:
- Bir .NET MAUIBlazor Hybrid uygulama, başvurduğunu bir RCL'den kullanır
InputPhoto
. - Uygulama .NET MAUI ayrıca bir .NET MAUI sınıf kitaplığına başvurur.
InputPhoto
içinde RCL, RCL'de tanımlanan birICameraService
arabirim ekler.CameraService
içinICameraService
kısmi sınıf uygulamaları, RCL'ye başvuran sınıf kitaplığında .NET MAUI (CameraService.Windows.cs
,CameraService.iOS.cs
,CameraService.Android.cs
) bulunur.
Örnek için bkz. Web Uygulaması ile Blazor uygulama oluşturma.NET MAUIBlazor Hybrid.
ASP.NET Core
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz.Gönderin ve geri bildirimi görüntüleyin