Syncfusion AI Assistant

How can I help you?

Integrating Blazor with .NET MAUI Blazor Hybrid and Web App

1 Jun 20265 minutes to read

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

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 Blazor Hybrid App, and Blazor Web App.

.NET MAUI Blazor Hybrid and Blazor Web App

Install Blazor DataGrid and Themes NuGet in the app

Open the NuGet Package Manager in Visual Studio by selecting (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), and then install the following NuGet packages.

NOTE

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

Add required namespaces

Open both of the following files and add the namespaces.

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

Register Blazor service

Add the Blazor service in both the MauiProgram.cs file of the .NET MAUI Blazor Hybrid App and the ~/Program.cs file of the Blazor Web App to enable Blazor 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()
        .AddInteractiveServerComponents();
    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 .NET MAUI Blazor Hybrid App and in the ~/Components/App.razor file of your Blazor Web App.

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8" />
    ....
    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
 </head>

 <body>
    ....
    <div id="app">Loading...</div>
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
    <script src="_framework/blazor.webview.js" autostart="false"></script>
 </body>

</html>
<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8" />
    ....
    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
    <HeadOutlet />
 </head>

 <body>
    <Routes />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
    <script src="_framework/blazor.web.js"></script>
 </body>

</html>

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 Blazor DataGrid component

Include the 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 = 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 .NET MAUI Blazor Hybrid App project. To build and run the Blazor Web App project, select the IIS Express or https profile.

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 Blazor Components

NOTE

Download the demo from GitHub.

See also