Creating Razor Class Library (RCL) using Syncfusion Blazor components

7 Jan 202313 minutes to read

This section provides information about creating Razor Class Library with the Syncfusion Blazor components using Visual Studio.

Prerequisites

NOTE

.NET Core SDK 3.1.8 requires Visual Studio 2019 16.7 or later.
.NET 5 requires Visual Studio 2019 16.8 or later.
.NET 6 requires Visual Studio 2022 Preview 4.1 or later.

Create a Razor Class Library using Syncfusion Blazor components in Visual Studio 2019

Choose Create a new project from the Visual Studio dashboard.
Select Razor Class Library from the template, and then click the Next button.
Now, the project configuration window will popup. Click Create button to create a new project with the default project configuration.
Choose Razor Class Library from the dashboard and click Create button to create a new Razor Class Library Server application. Select the target framework .NET Core 3.1 or .NET5.0 at the top based on your required target.

NOTE

If existing .NET Standard version is 2.0 in RazorClassLibrary.csproj, then change it to .NET Standard2.1 or above.
```
 <PropertyGroup>
     <TargetFramework>netstandard2.1</TargetFramework>
     ....
 </PropertyGroup>
```

Create a Razor Class Library using Syncfusion Blazor components in Visual Studio 2022

Choose Create a new project from the Visual Studio dashboard.
Select Razor Class Library from the template, and then click the Next button.
Now, the project configuration window will popup. Click Create button to create a new project with the default project configuration.
Select the target Framework .NET 6 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.

Importing Syncfusion Blazor component in Razor Class Library

You can use any one of the below standards to install the Syncfusion Blazor library in your Razor Class Library Server application.

Using Syncfusion Blazor individual NuGet Packages [New standard]

NOTE

Starting with Volume 4, 2020 (v18.4.0.30) release, Syncfusion provides individual NuGet packages for our Syncfusion Blazor components. We highly recommend this new standard for your Blazor production applications. Refer to this section to know the benefits of the individual NuGet packages.

Now, install Syncfusion.Blazor.Calendars NuGet package to the newly created RLC by using the NuGet Package Manager. For more details about the available NuGet packages, refer to the Individual NuGet Packages documentation.
Right-click the project, and then select Manage NuGet Packages.
Search Syncfusion.Blazor.Calendars keyword in the Browse tab and install Syncfusion.Blazor.Calendars NuGet package in RLC.
The Syncfusion Blazor Calendars package will be included in the newly created project once the installation process is completed.

Now, import and add the Syncfusion Blazor components in the ~/Component.razor file. For example, the Calendar component is imported and added in the ~/Component.razor page.

 @using Syncfusion.Blazor.Calendars

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

 <SfCalendar TValue="DateTime"></SfCalendar>

Using Syncfusion.Blazor NuGet Package [Old standard]

WARNING

If you prefer the above new standard (individual NuGet packages), then skip this section. Using both old and new standards in the same application will throw ambiguous compilation errors.

Now, install Syncfusion.Blazor NuGet package to the newly created RLC by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.
Search Syncfusion.Blazor keyword in the Browse tab and install Syncfusion.Blazor NuGet package in RLC.
The Syncfusion Blazor package will be installed in the project once the installation process is completed.
Open ~/_Imports.razor file in RLC and import the Syncfusion.Blazor.
```
 @using Syncfusion.Blazor
```

Now, import and add the Syncfusion Blazor components in the ~/Component.razor file. For example, the Calendar component is imported and added in the ~/Component.razor page.

 @using Syncfusion.Blazor.Calendars

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

 <SfCalendar TValue="DateTime"></SfCalendar>

Create a Blazor Server project in Visual Studio with Razor Class Library (RCL)

Refer to the Blazor Tooling documentation to create a new Blazor Server-Side Application using Visual Studio.

Configure the Razor Class Library and Blazor Server Application

Now, Right-click the solution, and then select Add/Existing Project.
Add the Razor Class Library project by selecting the RazorClassLibrary.csproj file.

NOTE

Razor Class Library project is added to the existing Blazor Server Application.
Right-click the Blazor App project, and then select Add/Project reference. Now, click the checkbox and configure the Razor Class Library and Blazor Server Application.

Importing Razor Class Library in the Blazor Server Application

Open ~/_Imports.razor file in Blazor App and import the RazorClassLibrary.
```
 @using RazorClassLibrary
```

Now, register the Syncfusion Blazor Service to the Blazor Server App.

a) For .NET 6 project, open the ~/Program.cs file and register the Syncfusion Blazor Service.

 // For .NET 6 project, add the Syncfusion Blazor Service in Program.cs file.
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Syncfusion.Blazor;

 var builder = WebApplication.CreateBuilder(args);

 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
 ....
 builder.Services.AddSyncfusionBlazor();
 var app = builder.Build();
 ....
 ....

b) For .NET 5 or .NET Core SDK 3.1 project, open the ~/Startup.cs file and register the Syncfusion Blazor Service.

 // For .NET 5 or .NET Core SDK 3.1 project, add the Syncfusion Blazor Service in Startup.cs file.
 using Syncfusion.Blazor;

 namespace WebApplication1
 {
     public class Startup
     {
         public void ConfigureServices(IServiceCollection services)
         {
             ....
             ....
             services.AddSyncfusionBlazor();
         }
     }
 }

Now, add the Syncfusion Blazor theme to the Blazor Server App.

a) For .NET 6 project, add the Syncfusion bootstrap4 theme in the <head> element of the ~/Pages/_Layout.cshtml page.
```
 <head>
     ....
     ....
     // Using individual NuGet packages
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
        
     // (or)
        
     // Using overall NuGet package
     <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
 </head>
```
b) For .NET 5 or .NET Core SDK 3.1 project, add the Syncfusion bootstrap4 theme in the <head> element of the ~/Pages/_Host.cshtml page.
```
 <head>
     ....
     ....
     // Using individual NuGet packages
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
        
     // (or)
        
     // Using overall NuGet package
     <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
 </head>
```
WARNING

Syncfusion.Blazor package should not to be installed along with individual NuGet packages. If you are using individual NuGet packages, you have to add the above Syncfusion.Blazor.Themes static web assets (styles) reference in the application. Or else, you have to add the above Syncfusion.Blazor styles reference for overall NuGet package.

NOTE

Also, you can refer to the themes through the CDN version by using the following link instead of package theme reference.
https://cdn.syncfusion.com/blazor/20.4.48/styles/bootstrap4.css.
Now, add the created custom component that is imported with Syncfusion Blazor component from Razor Class Library in any web page (razor) in the ~/Pages folder. For example, the custom component with imported Syncfusion Blazor Calendar component from Razor Class Library is added to the ~/Pages/Index.razor page as like below.
```
 <Component></Component>
```
Run the application, The Syncfusion Blazor Calendar component will be rendered in the default web browser.

Create a Blazor WebAssembly project in Visual Studio with Razor Class Library (RCL)

Refer to the Blazor Tooling documentation to create a new Blazor Server-Side Application using Visual Studio.

Configure the Razor Class Library and Blazor WebAssembly Application

Now, Right-click the solution, and then select Add/Existing Project.
Add the Razor Class Library project by selecting RazorClassLibrary.csproj file.

NOTE

Razor Class Library project is added to the existing Blazor WebAssembly Application.
Right-click the Blazor App project, and then select Add/Project reference. Now, click the checkbox and configure the Razor Class Library and Blazor WebAssembly Application.

Importing Razor Class Library in the Blazor WebAssembly Application

Open ~/_Imports.razor file in Blazor WebAssembly App and import the RazorClassLibrary.
```
 @using RazorClassLibrary
```

Open the ~/Program.cs file and register the Syncfusion Blazor Service from RCL.

 // For .NET 6 project.
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Syncfusion.Blazor;

 var builder = WebApplication.CreateBuilder(args);

 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
 ....
 builder.Services.AddSyncfusionBlazor();
 var app = builder.Build();
 ....
 ....

 // For .NET 5 or .NET Core SDK 3.1 project.
 using Syncfusion.Blazor;

 namespace BlazorApp
 {
     public class Program
     {
         public static async Task Main(string[] args)
         {
             ....
             ....
             builder.Services.AddSyncfusionBlazor();
             await builder.Build.RunAsync();
         }
     }
 }

Add the Syncfusion bootstrap4 theme in the <head> element of the ~/wwwroot/index.html page.
```
 <head>
     ....
     ....
     // Using individual NuGet packages
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
        
     // (or)
        
     // Using overall NuGet package
     <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
 </head>
```
WARNING

Syncfusion.Blazor package should not to be installed along with individual NuGet packages. If you are using individual NuGet packages, you have to add the above Syncfusion.Blazor.Themes static web assets (styles) reference in the application. Or else, you have to add the above Syncfusion.Blazor styles reference for overall NuGet package.

NOTE

Also, you can refer to the themes through the CDN version by using the following link instead of package theme reference.
https://cdn.syncfusion.com/blazor/20.4.48/styles/bootstrap4.css.
Now, add the created custom component that is imported with Syncfusion Blazor component from Razor Class Library in any web page (razor) in the ~/Pages folder. For example, the custom component with imported Syncfusion Blazor Calendar component from Razor Class Library is added to the ~/Pages/Index.razor page as like below.
```
 <Component></Component>
```
Run the application, The Syncfusion Blazor Calendar component will be rendered in the default web browser.