Search results

Getting started with Syncfusion Blazor - Server App in .NET Core CLI

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

Create a Blazor Server project using .NET Core CLI

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

        dotnet new blazorserver -o WebApplication1
        cd WebApplication1

Importing Syncfusion Blazor component in the application

  1. Now, add Syncfusion.EJ2.Blazor NuGet package to the new application using below command line.

        dotnet add package Syncfusion.EJ2.Blazor -v 17.4.0.44
        dotnet restore
  2. The Syncfusion Blazor package will be included in the newly created project after the installation process is completed.

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

    @using Syncfusion.EJ2.Blazor
    @using Syncfusion.EJ2.Blazor.Calendars
  4. Open the ~/Startup.cs file and register the Syncfusion Blazor Service.

    using Syncfusion.EJ2.Blazor;
    
    namespace WebApplication1
    {
        public class Startup
        {
            public void ConfigureServices(IServiceCollection services)
            {
                ....
                ....
                services.AddSyncfusionBlazor();
            }
        }
    }
  5. Add the client-side resources through CDN in the <head> element of the ~/Pages/_Host.cshtml page.

    <head>
        ....
        ....
        <link href="https://cdn.syncfusion.com/ej2/17.4.44/material.css" rel="stylesheet" />
        <script src="https://cdn.syncfusion.com/ej2/17.4.44/dist/ej2.min.js"></script>
        <script src="https://cdn.syncfusion.com/ej2/17.4.44/dist/ejs.interop.min.js"></script>
    </head>

    Note: For production purpose and minimal requirement, Syncfusion provides an option to generate scripts and styles of selective control by using the Custom Resource Generator (CRG) web tool. Refer to this help documentation link for more details on CRG.

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

    <EjsCalendar TValue="DateTime"></EjsCalendar>
  7. Run dotnet run command to run the application. The Syncfusion Blazor Calendar component will render in the web browser.

    output