One of the cool features of Blazor is code reusability. Using Razor Class Library, we can use our Razor component in all blazor type project like Blazor Server, WASM and MAUI Hybrid.

If we have requirement to develop the product, that should work on all the environment, then we can take benefit of Razor Class Library. It will save 70% time and money.

I will create simple POC project for Class library using Synfussion Blazor Control and use in Blazor Server and WASM application.

Step 1: Create the Razor Class Library like this

Step 2: Create Blazor Server, Blazor WASM and Blazor MAUI Hybrid project.

Step 3: In Blazor Class Library we will add the Synfussion Controls Using Nuget package like this

Step 4: Create the Component File in Razor Class Library and write Code like to populate Grid Control

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids

<div class="my-component">
    <b>Synfussion Blazor Grid Demo</b> <br />
    <SfGrid DataSource="@Orders" />
</div>

@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; }

    }
}

Step 5: Consume the Razor Class Library in All projects like Blazor Server, WASM and MAUI Hybrid project

Step 6: Do the required setup for Blazor Synfussion Controls in all Blazor project. For Blazor Server

In _Layout.cshtml page

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

Step 7: Now Consume the Razor Class library Component in Blazor Server or any other project like this

Now run the application, you will see similar output in all Blazor project.

For Blazor MAUI Hybrid:

Step 8: Create the Blazor MAUI Hybrid app like this and add the project reference of RazorClassDemo.

Step 9: Add the synfussion control in MAUI application like this

Step 10: Add the Synfussion controls related css and scripts file in index.html like this

Step 11: Go to the Index.razor page of Blazor MAUI app and call the shared component like this

Step 12: Now run the application on Android Emulator device, you will see output like this given below.

Summary: In this demo project, we saw that using Razor Class library, we can create similar Blazor UI in all Blazor type project. It will save lots of our development time and money as compared to other web technologies.

Source Code:

https://github.com/Chandradev819/BlazorServerDemo/tree/master

Hey, thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.