在 ASP.NET Core Blazor Hybrid 中重複使用 Razor 元件

注意

這不是這篇文章的最新版本。 如需目前版本，請參閱本文的 .NET 8 版本。

重要

這些發行前產品的相關資訊在產品正式發行前可能會有大幅修改。 Microsoft 對此處提供的資訊，不做任何明確或隱含的瑕疵擔保。

如需目前版本，請參閱本文的 .NET 8 版本。

本文說明如何在 Blazor Hybrid 應用程式中撰寫及組織 Web 和 Web Views 的 Razor 元件。

Razor 元件可在裝載模型之間運作 (Blazor WebAssembly、Blazor Server，以及在 Blazor Hybrid ˇ的 Web View 中)，以及跨平台 (Android、iOS 和 Windows)。 裝載模型和平台具有元件可以利用的唯一功能，但跨裝載模型和平台執行的元件必須個別利用唯一的功能，由下列範例示範：

• Blazor WebAssembly 支援同步 JavaScript (JS) Interop，而 Blazor Server 和 Web Views 的 Blazor Hybrid 應用程式中嚴格非同步 JS Interop 通訊通道卻不支援。
• Blazor Server 應用程式中的元件可以存取只能在伺服器上使用的服務，例如 Entity Framework 資料庫內容。
• BlazorWebView 中的元件可以直接存取原生桌面和行動裝置功能，例如地理位置服務。 Blazor Server 和 Blazor WebAssembly 應用程式必須依賴外部伺服器上應用程式的 Web API 介面來提供類似的功能。

設計原則

若要撰寫可順暢地在跨裝載模型和平台運作的 Razor 元件，請遵循下列設計原則：

• 將共用 UI 程式碼放在 Razor 類別庫 (RCL)中，這些容器的設計目的是維持可重複使用的 UI 片段，以供不同的裝載模型和平台使用。
• 唯一功能的實作不應該存在於 RCL 中。 相反地，RCL 應該定義裝載模型和平台所實作的抽象概念(介面和基底類別)。
• 只有藉由裝載模型或平台加入唯一功能。 例如，Blazor WebAssembly 支援在元件中使用 IJSInProcessRuntime 和 IJSInProcessObjectReference 做為最佳化，但只在條件式轉換和後援實作中使用，這些實作需依賴所有裝載模型和平台支援的通用 IJSRuntime 和 IJSObjectReference 抽象。 如需 IJSInProcessRuntime 的詳細資訊，請參閱從 ASP.NET Core Blazor 中的 .NET 方法呼叫 JavaScript 函式。 如需 IJSInProcessObjectReference 的詳細資訊，請參閱 在 ASP.NET Core Blazor 中從 JavaScript 函式呼叫 .NET 方法。
• 一般而言，請在元件中使用 CSS 作為 HTML 樣式。 最常見的案例是確保應用程式外觀和風格的一致性。 在 UI 樣式在裝載模型或平台之間必須呈現不同之處之下，請使用 CSS 來設定這些差異。
• 如果 UI 的某些部分需要目標裝載模型或平台的其他或不同內容，則可以將內容封裝在元件內，並使用 DynamicComponent 在 RCL 內轉譯。 您也可以透過 RenderFragment 執行個體將其他 UI 提供給元件。 如需 RenderFragment 的詳細資訊，請參閱子內容轉譯片段和可重複使用轉譯邏輯的轉譯片段。

專案程式碼組織

盡可能將程式碼和靜態內容放在 Razor 類別庫 (RCL) 中。 每個裝載模型或平台都會參考 RCL，並在應用程式的服務集合中註冊 Razor 元件可能需要的個別實作。

每個目標組件都應該只包含該裝載模型或平台特有的程式碼，以及可協助啟動應用程式的程式碼。

針對唯一功能使用抽象概念

下列範例示範如何藉由裝載模型和平台，針對地理位置服務使用抽象概念。

• 在應用程式用來取得地圖上使用者位置的地理位置資料的 Razor 類別庫 (RCL)，MapComponentRazor 元件會插入 ILocationService 服務抽象概念。
• Blazor WebAssembly 和 Blazor Server 專案的 App.Web 會將 ILocationService 實作為 WebLocationService，其會使用 Web API 呼叫來取得地理位置資料。
• .NET MAUI 的 App.Desktop、WPF 和 Windows Forms，將 ILocationService 實作為 DesktopLocationService。 DesktopLocationService 使用平台特定的裝置功能來取得地理位置資料。

.NET MAUIBlazor 平台特定程式碼

.NET MAUI 中的常見模式是為不同的平台建立個別的實作，例如使用平台特定實作來定義部分類別。 例如，請參閱下圖，其中 CameraService 的部分類別會在每個 CameraService.Windows.cs、CameraService.iOS.cs、CameraService.Android.cs 和 CameraService.cs 中實作：

如果您想要將平台特定功能封裝到其他應用程式可以使用的類別庫，建議您遵循上述範例中所述的類似方法，並為 Razor 元件建立抽象概念：

• 將元件放在 Razor 類別庫 (RCL) 中。
• 從 .NET MAUI 類別庫，參考 RCL 並建立平台特定的實作。
• 在取用的應用程式內，參考 .NET MAUI 類別庫。

下列範例示範組織相片的應用程式中影像的概念：

• .NET MAUIBlazor Hybrid 應用程式會從參考的 RCL 使用 InputPhoto。
• .NET MAUI 應用程式也會參考 .NET MAUI 類別庫。
• RCL 中的 InputPhoto 會插入在 RCL 中定義的 ICameraService 介面。
• ICameraService 的 CameraService 部分類別實作位於參考 RCL 的 .NET MAUI 類別庫 (CameraService.Windows.cs、CameraService.iOS.cs、CameraService.Android.cs)。

其他資源

• .NET MAUIBlazor 播客範例應用程式
  • 原始程式碼 (microsoft/dotnet-podcasts GitHub 存放庫)
  • Live 應用程式