Search results

Getting Started with Syncfusion Blazor for Server-Side in .NET Core CLI

This article provides a step-by-step introduction to configure Syncfusion Blazor setup, build and run a simple Blazor server-side web application using the .NET Core CLI.

Blazor is an unsupported, experimental web framework that shouldn’t be used for production workloads at this time.

Prerequisites

Create a Blazor server-side project using .NET Core CLI

  1. Install the Blazor project templates by using below command line in the command prompt:

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview6.19307.2
  2. Once project templates installed, run the following command line to create a new Blazor server-side application.

        dotnet new blazorserverside -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
        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. 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.2.34/material.css" rel="stylesheet" />
        <script src="https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js"></script>
        <script src="https://cdn.syncfusion.com/ej2/17.2.34/dist/ejs.interop.min.js"></script>
    </head>
  5. 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></EjsCalendar>
  6. Run dotnet run command to run the application. The Syncfusion Blazor Calendar component will render in the web browser.

    output