Events
Power BI DataViz World Championships
Feb 14, 4 PM - Mar 31, 4 PM
With 4 chances to enter, you could win a conference package and make it to the LIVE Grand Finale in Las Vegas
Learn moreThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Note
This isn't the latest version of this article. For the current release, see the .NET 9 version of this article.
Warning
This version of ASP.NET Core is no longer supported. For more information, see the .NET and .NET Core Support Policy. For the current release, see the .NET 9 version of this article.
Important
This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
For the current release, see the .NET 9 version of this article.
This article explains how to author and organize Razor components for the web and Web Views in Blazor Hybrid apps.
Razor components work across hosting models (Blazor WebAssembly, Blazor Server, and in the Web View of Blazor Hybrid) and across platforms (Android, iOS, and Windows). Hosting models and platforms have unique capabilities that components can leverage, but components executing across hosting models and platforms must leverage unique capabilities separately, which the following examples demonstrate:
BlazorWebView
can directly access native desktop and mobile device features, such as geolocation services. Blazor Server and Blazor WebAssembly apps must rely upon web API interfaces of apps on external servers to provide similar features.In order to author Razor components that can seamlessly work across hosting models and platforms, adhere to the following design principles:
DynamicComponent
. Additional UI can also be provided to components via RenderFragment instances. For more information on RenderFragment, see Child content render fragments and Render fragments for reusable rendering logic.As much as possible, place code and static content in Razor class libraries (RCLs). Each hosting model or platform references the RCL and registers individual implementations in the app's service collection that a Razor component might require.
Each target assembly should contain only the code that is specific to that hosting model or platform along with the code that helps bootstrap the app.
The following example demonstrates how to use an abstraction for a geolocation service by hosting model and platform.
MapComponent
Razor component injects an ILocationService
service abstraction.App.Web
for Blazor WebAssembly and Blazor Server projects implement ILocationService
as WebLocationService
, which uses web API calls to obtain geolocation data.App.Desktop
for .NET MAUI, WPF, and Windows Forms, implement ILocationService
as DesktopLocationService
. DesktopLocationService
uses platform-specific device features to obtain geolocation data.A common pattern in .NET MAUI is to create separate implementations for different platforms, such as defining partial classes with platform-specific implementations. For example, see the following diagram, where partial classes for CameraService
are implemented in each of CameraService.Windows.cs
, CameraService.iOS.cs
, CameraService.Android.cs
, and CameraService.cs
:
Where you want to pack platform-specific features into a class library that can be consumed by other apps, we recommend that you follow a similar approach to the one described in the preceding example and create an abstraction for the Razor component:
The following example demonstrates the concepts for images in an app that organizes photographs:
InputPhoto
from an RCL that it references.InputPhoto
in the RCL injects an ICameraService
interface, which is defined in the RCL.CameraService
partial class implementations for ICameraService
are in the .NET MAUI class library (CameraService.Windows.cs
, CameraService.iOS.cs
, CameraService.Android.cs
), which references the RCL.For an example, see Build a .NET MAUI Blazor Hybrid app with a Blazor Web App.
src/HybridApp
folder.
Azure-Samples/eShopOnAzure
GitHub repositorydotnet/eShop
GitHub repository.ASP.NET Core feedback
ASP.NET Core is an open source project. Select a link to provide feedback:
Events
Power BI DataViz World Championships
Feb 14, 4 PM - Mar 31, 4 PM
With 4 chances to enter, you could win a conference package and make it to the LIVE Grand Finale in Las Vegas
Learn moreTraining
Module
Build reusable components with Blazor - Training
Learn how to use Razor class libraries to package and deploy components with Blazor.