How to port Syncfusion® Blazor Server App to MAUI Blazor Hybrid App

29 Nov 20243 minutes to read

This section explains how to port Syncfusion® Blazor Server App to .NET MAUI Blazor Hybrid App using Razor Class Library (RCL). This way, you can avoid rewriting all your Blazor Server App pages for the .NET MAUI Blazor Hybrid App.

Prerequisites

.NET 6.0 or later.

Create a new project for Blazor Server App

  1. Create a new Blazor Server App with Syncfusion® Blazor Calendar component using Visual Studio.

  2. Now, create a Razor Class Library in Visual Studio and configure it with already created Blazor Server App.

  3. Next, move the Syncfusion® Blazor NuGet packages, Razor components, App.razor, Import.razor, CSS, Shared, and Data folders to the Razor class library from the Blazor server project.

    Folders to move

  4. Create a new .NET MAUI Blazor Hybrid App for porting the Blazor Server Side App.

  5. Afterward, refer the Razor class library in both the Blazor server app and MAUI Blazor App and then resolve reference missing errors.

  6. Delete the common folders like Razor components, Main.razor, Import.razor, CSS, Shared, and Data folder from the MAUI Blazor app.

  7. Modify the ~/index.html file as shown below to render the already existing razor components in the MAUI Blazor project

     <head>
     ...
     <link rel="stylesheet" href="_content/RazorClassLibrary/css/bootstrap/bootstrap.min.css" />
     <link href="_content/RazorClassLibrary/css/site.css" rel="stylesheet" />
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
     <link href="MauiBlazorApp.styles.css" rel="stylesheet" />
 </head>

  8. Now, register the Syncfusion® Blazor service in the MauiProgram.cs file of your MAUI Blazor App.

using Syncfusion.Blazor;
        ....
        builder.Services.AddSyncfusionBlazor();
        ....
  1. Finally, in MainPage.xaml, The RazorClassLibrary is added and points to the root of the Blazor app. The root Blazor component for the app is in App.razor, which Razor compiles into a type named App in the application’s root namespace.
<?xml version="1.0" encoding="utf-8" ?>

    <ContentPage xmlns=  http://schemas.microsoft.com/dotnet/2021/maui
                xmlns:x=  http://schemas.microsoft.com/winfx/2009/xaml
                xmlns:rcl="clr-namespace:RazorClassLibrary;assembly=RazorClassLibrary"
                x:Class="MauiBlazorApp.MainPage"
                BackgroundColor="{DynamicResource PageBackgroundColor}">

        <BlazorWebView HostPage="wwwroot/index.html">
            <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type rcl:App}" />
            </BlazorWebView.RootComponents>
        </BlazorWebView>
    </ContentPage>

  1. In the Visual Studio toolbar, select the Windows Machine button to build and run the app.

    Build and run MAUI Blazor Hybrid App