Search results

Creating Razor Class Library (RCL) using Syncfusion Blazor components

14 Apr 2021 / 8 minutes to read

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

Prerequisites

.NET Core SDK 3.1.8 requires Visual Studio 2019 16.7 or later.

.NET 5.0 requires Visual Studio 2019 16.8 or later.

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

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

new project in aspnetcore blazor

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

razor class template

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

razor class project configuration

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

select framework

Note: If exist netstandard version is 2.0 in RazorClassLibrary.csproj, then change it to netstandard2.1

Copied to clipboard
<PropertyGroup>
    <TargetFramework>netstandard2.1</TargetFramework>
    ....
</PropertyGroup>

Installing Syncfusion Blazor packages in the application

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

Using Syncfusion Blazor individual NuGet Packages [New standard]

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.

  1. 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.
  2. Right-click the project, and then select Manage NuGet Packages.

nuget explorer

  1. Search Syncfusion.Blazor.Calendars keyword in the Browse tab and install Syncfusion.Blazor.Calendars NuGet package in RLC.

select nuget

  1. The Syncfusion Blazor Calendars package will be included in the newly created project once the installation process is completed.
  2. Add the Syncfusion bootstrap4 theme in the <head> element of the ~/Pages/_Host.html page in Blazor App.
Copied to clipboard
<head>
    ....
    ....

    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>

Warning: Syncfusion.Blazor package should not to be installed along with individual NuGet packages. Hence, you have to add the above Syncfusion.Blazor.Themes static web assets (styles) in the application.

  1. 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.
Copied to clipboard
<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.

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

nuget explorer

  1. Search Syncfusion.Blazor keyword in the Browse tab and install Syncfusion.Blazor NuGet package in RLC.

select nuget

  1. The Syncfusion Blazor package will be installed in the project once the installation process is completed.
  2. Open ~/_Imports.razor file in RLC and import the Syncfusion.Blazor.
Copied to clipboard
@using Syncfusion.Blazor
  1. Add the Syncfusion bootstrap4 theme in the <head> element of the ~/Pages/_Host.html page in Blazor App.
Copied to clipboard
<head>
    ....
    ....

      <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
</head>

Note: The same theme file can be referred through the CDN version by using https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css.

  1. 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.
Copied to clipboard
@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 2019 with Razor Class Library (RCL)

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

new project in aspnetcore blazor

  1. Select Blazor App from the template, and then click the Next button.

blazor template

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

asp.net core project configuration

  1. Select the target Framework ASP.NET Core 3.1 or .NET 5.0 at the top of the Application based on your required target information.

select framework

  1. Choose Blazor Server App from the dashboard, and then click Create button to create a new Blazor Server application.

select framework

Note: ASP.NET Core 3.1 is available in Visual Studio 2019 version.

Configure the Razor Class Library and Blazor Server Application

  1. Now, Right-click the solution, and then select Add/Existing Project.

razor class library in blazor app

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

add RCL in blazor app

Note: Razor Class Library project is added to the existing Blazor Server Application.

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

reference manager in blazor app

select RCL to configure blazor app

Importing Razor Class Library in the Blazor Server Application

  1. Open ~/_Imports.razor file in Blazor App and import the RazorClassLibrary.
Copied to clipboard
@using RazorClassLibrary
  1. Open the ~/Startup.cs file and register the Syncfusion Blazor Service from RCL.
Copied to clipboard
....
using Syncfusion.Blazor;
namespace BlazorApp
{
    public class Startup
    {
    ....
    ....
    public void ConfigureServices(IServiceCollection services)
    {
        ....
        ....
        services.AddSyncfusionBlazor();
    }
    ....
    }
}
  1. Add the Syncfusion bootstrap4 theme in the <head> element of the ~/Pages/_Host.html page in Blazor App.
Copied to clipboard
<head>
    ....
    ....

    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>

Note: The same theme file can be referred through the CDN version by using https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css.

  1. 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.
Copied to clipboard
<Component></Component>
  1. Run the application, The Syncfusion Blazor Calendar component will be rendered in the default web browser.

RCL output

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

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

new project in aspnetcore blazor

  1. Select Blazor App from the template, and then click the Next button.

blazor template

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

asp.net core project configuration

  1. Select the target Framework ASP.NET Core 3.1 or .NET 5.0 at the top of the Application based on your required target information.

select framework

  1. Choose Blazor WebAssembly App from the dashboard, and then click Create button to create a new Blazor WebAssembly application.

select framework

Note: ASP.NET Core 3.1 is available in Visual Studio 2019 version.

Configure the Razor Class Library and Blazor WebAssembly Application

  1. Now, Right-click the solution, and then select Add/Existing Project.

razor class library in blazor app

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

add RCL in blazor app

Note: Razor Class Library project is added to the existing Blazor WebAssembly Application.

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

reference manager in blazor app

select RCL to configure blazor app

Importing Razor Class Library in the Blazor WebAssembly Application

  1. Open ~/_Imports.razor file in Blazor WebAssembly App and import the RazorClassLibrary.
Copied to clipboard
@using RazorClassLibrary
  1. Open the ~/Program.cs file and register the Syncfusion Blazor Service from RCL.
Copied to clipboard
using Syncfusion.Blazor;

namespace BlazorApp
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            ....
            ....
            builder.Services.AddSyncfusionBlazor();
            await builder.Build.RunAsync();
        }
    }
}
  1. 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.
Copied to clipboard
<Component></Component>
  1. Run the application, The Syncfusion Blazor Calendar component will be rendered in the default web browser.

RCL output