ASP.NET Core'da bileşenleri yeniden kullanma RazorBlazor Hybrid

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 DynamicComponentRCL 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 MapComponentRazor üzerindeki konumuna ait coğrafi konum verilerini almak için kullanılan bir sınıf kitaplığında (RCL), bileşen bir ILocationService hizmet soyutlaması ekler.
• App.Webve Blazor WebAssemblyBlazor Server projeleri, coğrafi konum verilerini almak için web API çağrılarını kullanan olarak WebLocationServiceuygularILocationService.
• App.Desktop, WPF ve Windows Forms için .NET MAUIolarak DesktopLocationServiceuygulayı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.csCameraService.Android.csve CameraService.csher birinde CameraService.Windows.csuygulandığı 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 bir ICameraService arabirim ekler.
• CameraService için ICameraService 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.