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.
dotnet new blazorserver -o WebApplication1
cd WebApplication1
You can use any one of the below standards to install the Syncfusion Blazor library in your application.
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.
dotnet add package Syncfusion.Blazor.Calendars -v 18.4.0.42
dotnet restore
<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.
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.
dotnet add package Syncfusion.Blazor -v 18.4.0.42
dotnet restore
<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.
Syncfusion.Blazor
namespace.@using Syncfusion.Blazor
@using Syncfusion.Blazor.Calendars
using Syncfusion.Blazor;
namespace WebApplication1
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
~/Pages
folder. For example, the calendar component is added in the ~/Pages/Index.razor page.<SfCalendar TValue="DateTime"></SfCalendar>
dotnet run
command to run the application. the Syncfusion Blazor Calendar component will be rendered in the default web browser.