Getting started with Syncfusion Blazor components in Blazor Server Side App using .NET Core CLI

14 Apr 2021 / 3 minutes to read

This article provides a step-by-step introduction to configure Syncfusion Blazor setup, and also to build and run a simple Blazor Server Side application using the .NET Core CLI.

Note: Starting with version 17.4.0.39 (2019 Volume 4), you need to include a valid license key (either paid or trial key) within your applications. Please refer to this help topic for more information.

Prerequisites

.NET Core SDK 3.1.8 / .NET 5.0 SDK

Create a Blazor Server side project using .NET Core CLI

Run the following command line to create a new Blazor Server application.

    dotnet new blazorserver -o WebApplication1
    cd WebApplication1

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.

Now, add Syncfusion.Blazor.Calendars NuGet package to the new application using the following command line. Refer to the Individual NuGet Packages section for the available NuGet packages.

    dotnet add package Syncfusion.Blazor.Calendars -v 18.4.0.42
    dotnet restore

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

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

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

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, add Syncfusion.Blazor NuGet package to the new application using the following command line.

    dotnet add package Syncfusion.Blazor -v 18.4.0.42
    dotnet restore

The Syncfusion Blazor package will be included in the newly created project once the installation process is completed.
Add the Syncfusion bootstrap4 theme in the <head> element of the ~/Pages/_Host.cshtml page.

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

Adding Syncfusion Blazor component and running the application

Open ~/_Imports.razor file and import the Syncfusion.Blazor namespace.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Calendars

Open the ~/Startup.cs file and register the Syncfusion Blazor Service.

using Syncfusion.Blazor;

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

Now, add the Syncfusion Blazor components in any .razor file in the ~/Pages folder. For example, the calendar component is added in the ~/Pages/Index.razor page.

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

Run dotnet run command to run the application. the Syncfusion Blazor Calendar component will be rendered in the default web browser.

output

Contents

Prerequisites
Create a Blazor Server side project using .NET Core CLI
Installing Syncfusion Blazor packages in the application
Using Syncfusion Blazor individual NuGet Packages New standard
Using Syncfusion.Blazor NuGet Package Old standard
Adding Syncfusion Blazor component and running the application

Contents

Prerequisites
Create a Blazor Server side project using .NET Core CLI
Installing Syncfusion Blazor packages in the application
Using Syncfusion Blazor individual NuGet Packages New standard
Using Syncfusion.Blazor NuGet Package Old standard
Adding Syncfusion Blazor component and running the application