Search results

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

This article provides a step-by-step introduction to configure Syncfusion Blazor for Blazor setup, build and run a simple Blazor WebAssembly application using .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 WebAssembly 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.1.0-preview3.19555.2
  2. Once project templates installed, run the following command line to create a new Blazor WebAssembly application.

        dotnet new blazorwasm -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.3.0.29-beta
        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 resource through CDN in the <head> element of the ~/wwwroot/index.html page.

    <head>
        ....
        ....
        <link href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" />
        <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.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