Add Syncfusion

The Syncfusion controls allow us to implement advanced functionality easily with a minimum amount of code. The Syncfusion controls are contained in a NuGet package.

In this chapter, we will cover the steps to obtain that package and configure it for our application.

Note: For the latest requirements to use Syncfusion, see the following link: https://blazor.syncfusion.com/documentation/system-requirements/.

Install NuGet packages

NuGet Packages

Figure 37: NuGet Packages

Right-click on the project node and select Manage NuGet Packages.

Install NuGet Packages

Figure 38: Install NuGet Packages

Select the Browse tab and install the following NuGet packages:

Syncfusion.Blazor
System.Text.Json

Additional configuration

Open the _Imports.razor file and add the following.

Code Listing 17: _Imports.razor

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Data

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Layouts

@using Syncfusion.Blazor.Calendars

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Lists

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Notifications

Open the Startup.cs file and add the following using statement.

Code Listing 18: Startup.cs Using Statement

using Syncfusion.Blazor;

Also, add the following to the ConfigureServices section.

Code Listing 19: Startup.cs AddSyncfusionBlazor

// Syncfusion support

services.AddSyncfusionBlazor();

Add the following to the <head> element of the _Host.cshtml page.

Code Listing 20: _Host.cshtml

Note: When you run the application, you will see a message:

“This application was built using a trial version of Syncfusion Essential Studio. Please include a valid license to permanently remove this license validation message. You can also obtain a free 30-day evaluation license to temporarily remove this message during the evaluation period. Please refer to this help topic for more information.”

Click the link in the message for instructions on obtaining a key to make the message go away.

Build modern Blazor apps

using Syncfusion® Blazor component suite

80+ high performance Blazor components.
Lightweight and user friendly.
Stunning Built-in themes with customization.

Get Your Free Trial Now

Add Syncfusion

Install NuGet packages

Additional configuration

DISCLAIMER: Web reader is currently in beta. Please report any issues through our support system. PDF and Kindle format files are also available for download.