ASP.NET Core Blazor HybridRazor összetevők újrafelhasználása

Ez a cikk bemutatja, hogyan hozhatja össze és rendszerezheti Razor webes és Web Views összetevőit Blazor Hybrid alkalmazásokban.

Razor összetevők az üzemeltetési modelleken (Blazor WebAssembly, Blazor Serverés a Blazor HybridWeb View) és platformokon (Android, iOS és Windows) működnek. A üzemeltetési modellek és platformok egyedi képességekkel rendelkeznek, amelyeket az összetevők kihasználhatnak, de az üzemeltetési modellek és platformok között végrehajtó összetevőknek külön kell használniuk az egyedi képességeket, amelyeket az alábbi példák szemléltetnek:

• Blazor WebAssembly támogatja a szinkron JavaScript (JS) interop-t, amelyet a szigorúan aszinkron JS interop kommunikációs csatorna nem támogat Blazor Server és Web ViewsBlazor Hybrid alkalmazásokban.
• A Blazor Server-alkalmazások összetevői olyan szolgáltatásokat érhetnek el, amelyek csak a kiszolgálón érhetők el, például egy Entity Framework-adatbázis környezetében.
• A BlazorWebView összetevői közvetlenül hozzáférhetnek a natív asztali és mobileszköz-funkciókhoz, például a földrajzi helymeghatározási szolgáltatásokhoz. Blazor Server és Blazor WebAssembly alkalmazásoknak a külső kiszolgálókon lévő alkalmazások webes API-felületeire kell támaszkodniuk, hogy hasonló funkciókat nyújtsanak.

Tervezési alapelvek

Annak érdekében, hogy Razor olyan összetevőket lehessen létrehozni, amelyek zökkenőmentesen működhetnek az üzemeltetési modellek és platformok között, tartsa be az alábbi tervezési alapelveket:

• Helyezzen megosztott felhasználói felületi kódot Razor osztálykódtárakba (RCL-kbe), amelyek olyan tárolók, amelyek a különböző üzemeltetési modellek és platformok újrafelhasználható felhasználói felületeinek karbantartására szolgálnak.
• Az egyedi funkciók implementációinak nem szabad létezniük az RCL-ekben. Ehelyett az RCL-nek olyan absztrakciókat (interfészeket és alaposztályokat) kell meghatároznia, amelyeket a modellek és platformok implementálnak.
• Csak a modell vagy a platform üzemeltetésével engedélyezheti az egyedi funkciókat. A Blazor WebAssembly például támogatja a IJSInProcessRuntime és IJSInProcessObjectReference használatát egy összetevőben optimalizálásként, de csak feltételes leadással és tartalék implementációkkal használja őket, amelyek az összes üzemeltetési modell és platform által támogatott univerzális IJSRuntime és IJSObjectReference absztrakciókra támaszkodnak. További információ a(z) IJSInProcessRuntimetémájában: lásd JavaScript-függvények meghívása a .NET-metódusokból az ASP.NET Core-ban Blazor. További információért a IJSInProcessObjectReference-ról lásd: "JavaScript-függvényekből .NET-metódusok meghívása az ASP.NET Core-ban" Blazor.
• Általános szabályként használja a CSS-t az összetevők HTML-stílusához. A leggyakoribb eset az alkalmazás megjelenésének és stílusának konzisztenciája. Azokon a helyeken, ahol a felhasználói felület stílusai eltérnek az üzemeltetési modellek vagy platformok között, a különbségek stílusozásához használjon CSS-t.
• Ha a felhasználói felület egyes részei további vagy eltérő tartalmakat igényelnek egy cél üzemeltetési modellhez vagy platformhoz, a tartalom beágyazható egy összetevőbe, és az RCL-ben jeleníthető meg DynamicComponenthasználatával. További felhasználói felületet is megadhat az összetevőknek RenderFragment példányokon keresztül. További információkért a RenderFragmenttémában lásd a Gyermektartalom renderelési töredékeket, és a újrahasználható renderelési logikai töredékeket.

Projektkód-szervezet

A lehető legnagyobb mértékben helyezze el a kódot és a statikus tartalmat Razor osztálykódtárakban (RCLs). Minden üzemeltetési modell vagy platform hivatkozik az RCL-ra, és regisztrálja az alkalmazás szolgáltatásgyűjteményében azokat az egyedi implementációkat, amelyekre egy Razor összetevő szükség lehet.

Minden célszerelvénynek csak az adott üzemeltetési modellre vagy platformra jellemző kódot kell tartalmaznia, valamint azt a kódot, amely segít az alkalmazás elindításában.

Absztrakciók használata egyedi funkciókhoz

Az alábbi példa bemutatja, hogyan használható absztrakció egy geolokációs szolgáltatáshoz modell és platform üzemeltetésével.

• Egy Razor osztálykönyvtárban (RCL) az alkalmazás geolokációs adatokat kér le a felhasználó helyéről a térképen, a MapComponentRazor összetevő egy ILocationService szolgáltatás absztrakcióját injektálja.
• App.Web a Blazor WebAssembly és Blazor Server projektek számára WebLocationServiceformájában implementálja a ILocationService-at, amely webes API-hívásokkal szerzi be a földrajzi helyadatokat.
• App.Desktop .NET MAUI, WPF és Windows Forms esetén implementálja a ILocationServiceDesktopLocationService. DesktopLocationService platformspecifikus eszközfunkciókkal szerzi be a földrajzi helyadatokat.

.NET MAUI Blazor platformspecifikus kód

A .NET MAUI gyakori mintája, hogy különálló implementációkat hoz létre különböző platformokhoz, például részleges osztályokat definiál platformspecifikus implementációkkal. Lásd például a következő ábrát, amelyben a CameraService részleges osztályai mindegyik CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.csés CameraService.csimplementálódnak:

Ha platformspecifikus funkciókat szeretne egy olyan osztálytárba csomagolni, amelyet más alkalmazások használhatnak, javasoljuk, hogy kövesse az előző példában ismertetetthez hasonló megközelítést, és hozzon létre egy absztrakciót a Razor összetevőhöz:

• Helyezze az összetevőt egy Razor osztálytárba (RCL).
• Egy .NET MAUI osztálytárból hivatkozzon az RCL-re, és hozza létre a platformspecifikus implementációkat.
• A fogyasztó alkalmazásban hivatkozzon a .NET MAUI osztálytárra.

Az alábbi példa a fényképeket rendszerezésre szolgáló alkalmazások képeinek fogalmait mutatja be:

• A .NET MAUIBlazor Hybrid-alkalmazás egy hivatkozott RCL-ből származó InputPhoto-t használ.
• A .NET MAUI alkalmazás egy .NET MAUI osztálytárra is hivatkozik.
• InputPhoto az RCL-ben egy ICameraService interfészt injektál, amely az RCL-ben van definiálva.
• CameraService ICameraService részleges osztálymegvalósításai az RCL-re hivatkozó .NET MAUI osztálykódtárban (CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs) találhatók.

Például lásd: .NET MAUIBlazor Hybrid-alkalmazás létrehozása Blazor Web App.

További erőforrások

• eShop referenciaalkalmazás (AdventureWorks): A .NET MAUIBlazor Hybrid alkalmazás a src/HybridApp mappában található.
  • Azure-üzemeltetés esetén: Azure-Samples/eShopOnAzure GitHub-adattár
  • Általános, nem Azure-beli üzemeltetés esetén: dotnet/eShop GitHub-adattár.