Syncfusion AI Assistant

How can I help you?

Integrating Blazor with .NET MAUI Blazor Hybrid and Web App

6 Apr 20265 minutes to read

This section explains how to create and run a .NET MAUI Blazor Hybrid App together with a Blazor Web App using Syncfusion® Blazor DataGrid components.

What is .NET MAUI Blazor Hybrid and Web App?

A .NET MAUI Blazor Hybrid App is a native application for Windows, Android, iOS, and macOS. It uses Blazor pages inside a WebView to display the UI.

A .NET MAUI Blazor Web App uses a Razor Class Library (RCL) to store reusable Blazor components. These shared components can be used in a Blazor WebAssembly App, a Blazor Server App, and a .NET MAUI Blazor App. This makes it easy to build one UI and use it across mobile, desktop, and web platforms.

By sharing UI components between native and web apps, this pattern ensures consistent user experiences, maximizes code reuse, and simplifies maintenance for applications targeting multiple environments.

Visual Studio includes the .NET MAUI Blazor Hybrid and Web App project template. You can use this template to quickly create a .NET MAUI Hybrid App together with a Blazor Web App in one solution.

Create a new .NET MAUI Blazor Hybrid and Blazor Web App in Visual Studio

  1. Open Visual Studio.
  2. Click Create a new project.
  3. Search for .NET MAUI Blazor Hybrid and Web App.
  4. Select the template and create the project.

The template generates the shared RCL, .NET MAUI App, and Web App.

.NET MAUI Blazor Hybrid and Blazor Web App

Install Syncfusion® Blazor DataGrid and Themes NuGet in the app

Follow these steps to add the Syncfusion® DataGrid.

  1. Open (Tools → NuGet Package Manager → Manage NuGet Packages for Solution).
  2. Search for and install.

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the list of packages and component details.

Add Syncfusion® namespaces

Open both of the following files and add the Syncfusion® namespaces.

  • ~/.Maui/Components/_Imports.razor
  • ~/Components/_Imports.razor (Blazor Web App)
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids

Register Syncfusion® Blazor service

Add the Syncfusion® Blazor service in both the MauiProgram.cs file of the MAUI Blazor App and the ~/Program.cs file of the Blazor Web App to enable Syncfusion® components in the application.

using Syncfusion.Blazor;
    ....
    builder.Services.AddMauiBlazorWebView();
    builder.Services.AddSyncfusionBlazor();
    ....
using Syncfusion.Blazor;
    
    var builder = WebApplication.CreateBuilder(args);

    // Add services to the container.
    builder.Services.AddRazorComponents()
    builder.Services.AddSyncfusionBlazor();
    ....

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Reference the stylesheet and script in the <head> of the ~wwwroot/index.html file of your MAUI Blazor App and in the ~/Components/App.razor file of your Blazor Web App.

<head>
    <!-- Syncfusion theme stylesheet -->
    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
</head>

<body>
    <!-- Syncfusion Blazor DataGrid component's script reference -->
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

NOTE

Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add Syncfusion® Blazor DataGrid component

Include the Syncfusion® Blazor DataGrid component in any razor file. In this example, the DataGrid component is added in ~/Pages/Home.razor under the ~/Pages folder of the .Shared App.

@page "/"
@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" />

@code{
    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 5).Select(x => new Order()
        {
            OrderID = 0 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }

    }
}

In the Visual Studio toolbar, select the Windows Machine target to build and run the .Maui App. To build and run the .Web App, select the IIS Express target.

Build and run MAUI Blazor App

NOTE

To run the application on Android or iOS, refer to MAUI Getting Started for emulator or device setup.

MAUI Blazor App with Syncfusion Blazor Components

NOTE

Download the demo from GitHub.

See also

NOTE

View MAUI Blazor Diagram Builder Source Code in GitHub