Search results

Getting started with Syncfusion Blazor - Server App in Visual Studio 2019

This article provides a step-by-step introduction to configure Syncfusion Blazor setup, build and run a simple Blazor Server 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.

New: Syncfusion Blazor components are compatible with .NET 5.0 RC and it requires Visual Studio 2019 16.8 Preview 3 or later.

Prerequisites

Note: .NET Core SDK 3.1.8 requires Visual Studio 2019 16.7 or later and .NET 5.0 RC1 requires Visual Studio 2019 16.8 Preview 3 or later.

Create a Blazor Server project in Visual Studio 2019

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

    new project in aspnetcore blazor

  2. Select Blazor App from the template and click the Next button.

    blazor template

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

  4. Choose Blazor Server App from the dashboard and click Create button to create a new Blazor Server application. Make sure .NET Core and ASP.NET Core 3.1 is selected at the top.

    select framework

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

Importing Syncfusion Blazor component in the application

  1. Now, install Syncfusion.Blazor NuGet package to the newly created application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.

    nuget explorer

  2. Search Syncfusion.Blazor keyword in the Browse tab and install Syncfusion.Blazor NuGet package in the application.

    select nuget

  3. The Syncfusion Blazor package will be installed in the project, Once the installation process is completed.
  4. Open ~/_Imports.razor file and import the Syncfusion.Blazor.

    @using Syncfusion.Blazor
    @using Syncfusion.Blazor.Calendars
  5. 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();
            }
        }
    }
  6. Add the Syncfusion bootstrap4 theme in the <head> element of the ~/Pages/_Host.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.3.35/styles/bootstrap4.css.

    To use manual scripts other than the scripts from NuGet package, register the Blazor service in ~/Startup.cs file by using true parameter as mentioned below.

    using Syncfusion.Blazor;
    
    namespace WebApplication1
    {
        public class Startup
        {
            public void ConfigureServices(IServiceCollection services)
            {
               ....
               ....
               services.AddSyncfusionBlazor(true);
            }
        }
    }
  7. 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>
  8. Run the application, The Syncfusion Blazor Calendar component will render in the default web browser.

    output