Creating Razor Class Library (RCL) using Blazor components

26 Aug 20268 minutes to read

This guide explains how to create a Razor Class Library (RCL) that includes Blazor components using Visual Studio and Visual Studio Code.

Prerequisites

Create a Razor Class Library

  1. Choose Create a new project from the Visual Studio dashboard.

    new project in aspnetcore blazor

  2. Select Razor Class Library from the template, and then click the Next button.

    razor class template

  3. Now, the project configuration window will popup. Click Create button to create a new project with the default project configuration.

    razor class project configuration

  4. Select the target Framework .NET 8 or .NET 9 or .NET 10 at the top of the application based on your required target that you want and then click the Create button to create a new Razor Class Library application.

    select framework

Create a Razor Class Library using Visual Studio Code via Microsoft Templates.

dotnet new razorclasslib -o RazorUIClassLib
cd RazorUIClassLib

Install Blazor Grid and Themes NuGet in the App

Install the Syncfusion.Blazor.Grid and Syncfusion.Blazor.Themes NuGet packages. All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details. If using the WebAssembly or Auto render modes in the Blazor Web App, install these packages in the .Client project.

  1. Go to Tools → NuGet Package Manager → Manage NuGet Packages for the Solution.
  2. Search the required NuGet packages (Syncfusion.Blazor.Grid and Syncfusion.Blazor.Themes) and install them.

Alternatively, you can install the same packages using the Package Manager Console with the following commands.

Install-Package Syncfusion.Blazor.Grid -Version 34.2.2
Install-Package Syncfusion.Blazor.Themes -Version 34.2.2

Open the terminal and run the following commands.

dotnet add package Syncfusion.Blazor.Grid -v 34.2.2
dotnet add package Syncfusion.Blazor.Themes -v 34.2.2

Importing Blazor component in Razor Class Library

Import and add the Blazor components in the ~/Component1.razor file. For example, the Blazor DataGrid component is imported and added in the ~/Component1.razor page.

@using Syncfusion.Blazor.Grid

<div class="my-component">
This Blazor component is defined in the <strong>RazorClassLibrary</strong> package.
</div><br />

<SfGrid DataSource="@Orders" />

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

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 5).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

Create a Blazor project

Create a Blazor Web App or Blazor WebAssembly App using Visual Studio via Microsoft Templates or Blazor Extension.

Run the following command to create a new Blazor application.

The following example creates a Blazor Web App with Auto interactivity mode:

dotnet new blazor -o BlazorWebApp --interactivity Auto
cd BlazorWebApp
cd BlazorWebApp.Client

Alternatively, create a Blazor Web App or Blazor WebAssembly App using Visual Studio Code via Microsoft Templates or Blazor Extension or the C# Dev Kit extension.

Configure the Razor Class Library and Blazor application

  1. Right-click the solution in the Blazor application, and then select Add/Existing Project.

    razor class library in blazor app

  2. Add the Razor Class Library project by selecting the RazorClassLibrary.csproj file.

    add RCL in blazor app

    NOTE

    The Razor Class Library project is added to the existing Blazor application.

  3. Right-click the Blazor App project, choose Add, and then select Project reference…. Now, click the checkbox and configure the Razor Class Library application.

    reference manager in blazor app

    select RCL to configure blazor app

Importing Razor Class Library in the Blazor Application

  1. Open the ~/_Imports.razor file in Blazor App and import the RazorClassLibrary.

     @using RazorClassLibrary

  2. Register the Blazor service in the ~/Program.cs file of the Blazor App.

    • If you select an Interactive render mode as WebAssembly or Auto, need to register the Blazor service in both ~/Program.cs files of the Blazor Web App.
     ....
 using Syncfusion.Blazor;
 ....
 builder.Services.AddSyncfusionBlazor();
 ....

  3. Include Stylesheet and Script References based on the project type:

    • For Blazor WebAssembly App, include the stylesheet in the <head> section and the script at the end of the <body> in the ~/wwwroot/index.html file.

    • For Blazor Web App, include the stylesheet in the <head> and the script at the end of the <body> in the ~/Components/Pages/App.razor file.

     <head>
     ....
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
 </head>
 ....
 <body>
     ....
     <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 the Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in the Blazor application.

  4. Now, add the created custom component in the ~/Components/Pages/.razor file.

     <Component1></Component1>

Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor DataGrid component will render in your default web browser.

Open the terminal and navigate to the main project folder (for example, BlazorWebApp) and run the following command.

cd ..
cd BlazorWebApp
dotnet run

RCL output