This article provides a step-by-step introduction to configure Syncfusion Blazor setup, and also to build and run a simple Blazor WebAssembly application using Visual Studio 2019.
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.
.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.
Choose Create a new project from the Visual Studio dashboard.
Select Blazor App from the template, and then click 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 ASP.NET Core 3.1 or .NET 5.0 at the top of the Application based on your required target.
Choose Blazor WebAssembly App from the dashboard, and then click Create button to create a new Blazor WebAssembly application.
You can use any one of the below standard 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.
NuGet Package Manager
. For more details about 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 the application.
Add the Syncfusion bootstrap4 theme in the <head>
element of the ~/wwwroot/index.html 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.
Now, install Syncfusion.Blazor NuGet package to the newly created application by using the NuGet Package Manager
. Right-click the project and then select Manage NuGet Packages.
Search Syncfusion.Blazor keyword in the Browse tab and install Syncfusion.Blazor NuGet package in the application.
Add the Syncfusion bootstrap4 theme in the <head>
element of the ~/wwwroot/index.html 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.35/styles/bootstrap4.css.
Open ~/_Imports.razor file and import the Syncfusion.Blazor
namespace.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Calendars
Open the ~/Program.cs file and register the Syncfusion Blazor Service.
using Syncfusion.Blazor;
namespace WebApplication1
{
public class Program
{
public static async Task Main(string[] args)
{
....
....
builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
}
}
}
Now, add the Syncfusion Blazor components in any web page (razor) in the Pages
folder. For example, the calendar component is added in the ~/Pages/Index.razor page.
<SfCalendar TValue="DateTime"></SfCalendar>
Run the application. Then, the Syncfusion Blazor Calendar component will be rendered in the default web browser.