Search results

Getting started with Syncfusion Blazor - WebAssembly App in Visual Studio 2019 Preview

This article provides a step-by-step introduction to configure Syncfusion Blazor setup, build and run a simple Blazor WebAssembly application using Visual Studio 2019 Preview.

Prerequisites

Note: .NET Core 3.1 Preview 3 requires Visual Studio 2019 16.4 Preview 5.

Create a Blazor WebAssembly project in Visual Studio 2019 Preview

  1. Install the essential project templates in the Visual Studio 2019 Preview by running the below command line in the command prompt.

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview3.19555.2
  2. Choose Create a new project from the Visual Studio dashboard.

    new project in aspnetcore blazor

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

    blazor template

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

  5. Choose Blazor WebAssembly App from the dashboard and click Create button to create a new Blazor WebAssembly application. Make sure .NET Core and ASP.NET Core 3.0 are selected at the top.

    select framework

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

Importing Syncfusion Blazor component in the application

  1. Now, install Syncfusion.EJ2.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.EJ2.Blazor keyword in the Browse tab and install Syncfusion.EJ2.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.EJ2.Blazor.

    @using Syncfusion.EJ2.Blazor
    @using Syncfusion.EJ2.Blazor.Calendars
  5. Add the client-side resource through CDN or local npm package 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>
  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></EjsCalendar>
  7. Run the application. The Syncfusion Blazor Calendar component will render in the web browser.

    output