Opakované použití Razor součástí v ASP.NET Core Blazor Hybrid

Tento článek vysvětluje, jak vytvářet a organizovat Razor komponenty pro web a Web Views v Blazor Hybrid aplikacích.

Razorkomponenty fungují napříč hostitelskými modely (Blazor WebAssemblyBlazor Servera v Web View systémech Blazor Hybrid) a napříč platformami (Android, iOS a Windows). Hostitelské modely a platformy mají jedinečné funkce, které mohou komponenty využít, ale komponenty spouštěné napříč hostitelskými modely a platformami musí využívat jedinečné funkce samostatně, což ukazují následující příklady:

• Blazor WebAssembly podporuje synchronní interoperabilitu JavaScriptu (JS), která není podporována výhradně asynchronním JS komunikačním kanálem komunikace v Blazor Server aplikacích a Web Views aplikacích Blazor Hybrid .
• Komponenty v Blazor Server aplikaci mají přístup ke službám, které jsou dostupné jenom na serveru, jako je například kontext databáze Entity Framework.
• Komponenty v systému BlazorWebView můžou přímo přistupovat k nativním desktopovým a mobilním zařízením, jako jsou například služby geografické polohy. Blazor Server a Blazor WebAssembly aplikace musí spoléhat na rozhraní webového rozhraní API aplikací na externích serverech, aby poskytovaly podobné funkce.

Zásady návrhu

Aby bylo možné vytvářet Razor komponenty, které mohou bezproblémově fungovat napříč hostitelskými modely a platformami, dodržujte následující principy návrhu:

• Umístěte sdílený kód uživatelského rozhraní do Razor knihoven tříd (RCLS), což jsou kontejnery navržené tak, aby zachovaly opakovaně použitelné části uživatelského rozhraní pro použití napříč různými hostitelskými modely a platformami.
• Implementace jedinečných funkcí by neměly existovat ve verzích RCLS. Místo toho by měl RCL definovat abstrakce (rozhraní a základní třídy), které hostují modely a platformy implementují.
• Pouze výslovný souhlas s jedinečnými funkcemi hostováním modelu nebo platformy Například Blazor WebAssembly podporuje použití IJSInProcessRuntime a IJSInProcessObjectReference v komponentě jako optimalizaci, ale používejte je pouze s podmíněnými přetypováními a náhradními implementacemi, které spoléhají na univerzální IJSRuntime a IJSObjectReference abstrakce, které podporují všechny hostitelské modely a platformy. Další informace o IJSInProcessRuntimevolání javascriptových funkcí z metod .NET v ASP.NET Core Blazor. Další informace o IJSInProcessObjectReferencevolání metod .NET z funkcí JavaScriptu v ASP.NET Core Blazor.
• Obecně platí, že pro styly HTML v komponentách používejte šablony stylů CSS. Nejběžnějším případem je konzistence v vzhledu a chování aplikace. Na místech, kde se styly uživatelského rozhraní musí lišit v různých modelech nebo platformách hostování, použijte šablony stylů CSS k určení rozdílů.
• Pokud některá část uživatelského rozhraní vyžaduje pro cílový model nebo platformu hostování další nebo jiný obsah, může být obsah zapouzdřen uvnitř komponenty a vykreslen uvnitř seznamu RCL pomocí DynamicComponent. Další uživatelské rozhraní lze také poskytnout komponentám prostřednictvím RenderFragment instancí. Další informace najdete RenderFragmentv tématu Podřízený obsah vykreslovat fragmenty a vykreslovat fragmenty pro opakovaně použitelnou logiku vykreslování.

Organizace kódu projektu

Co nejvíce umístěte kód a statický obsah do Razor knihoven tříd (RCLS). Každý model hostování nebo platforma odkazuje na seznam RCL a zaregistruje jednotlivé implementace v kolekci služeb aplikace, které může komponenta Razor vyžadovat.

Každé cílové sestavení by mělo obsahovat pouze kód, který je specifický pro daný model nebo platformu, spolu s kódem, který pomáhá spustit aplikaci.

Použití abstrakcí pro jedinečné funkce

Následující příklad ukazuje použití abstrakce pro službu geografické polohy hostováním modelu a platformy.

• Razor V knihovně tříd (RCL) používané aplikací k získání dat o geografické poloze uživatele na mapě MapComponentRazor vloží ILocationService komponenta abstrakci služby.
• App.Web pro Blazor WebAssembly a Blazor Server projekty implementují ILocationService jako WebLocationService, která používá volání webového rozhraní API k získání dat geografické polohy.
• App.Desktoppro .NET MAUI, WPF a model Windows Forms implementovat ILocationService jako DesktopLocationService. DesktopLocationService používá funkce zařízení specifické pro platformu k získání dat o geografické poloze.

.NET MAUIBlazor kód specifický pro platformu

Běžným vzorem .NET MAUI je vytvoření samostatných implementací pro různé platformy, například definování částečných tříd pomocí implementací specifických pro platformu. Podívejte se například na následující diagram, kde jsou v každém z nich implementovány částečné třídy CameraService , CameraService.Android.csCameraService.iOS.csa CameraService.cs:CameraService.Windows.cs

Pokud chcete zabalit funkce specifické pro platformu do knihovny tříd, kterou můžou využívat jiné aplikace, doporučujeme postupovat podle podobného přístupu, který je popsaný v předchozím příkladu, a vytvořit abstrakci pro komponentu Razor :

• Umístěte komponentu Razor do knihovny tříd (RCL).
• V knihovně .NET MAUI tříd odkazujte na seznam RCL a vytvořte implementace specifické pro platformu.
• V rámci aplikace využívající odkazujte na knihovnu .NET MAUI tříd.

Následující příklad ukazuje koncepty obrázků v aplikaci, která organizuje fotografie:

• Aplikace .NET MAUIBlazor Hybrid používá InputPhoto z seznamu RCL, na který odkazuje.
• Aplikace .NET MAUI také odkazuje na knihovnu .NET MAUI tříd.
• InputPhoto v seznamu RCL vloží ICameraService rozhraní, které je definováno v seznamu RCL.
• CameraService částečné implementace ICameraService tříd jsou v knihovně .NET MAUI tříd (CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs), která odkazuje na seznam RCL.

Příklad najdete v tématu Vytvoření .NET MAUIBlazor Hybrid aplikace s webovou Blazor aplikací.