ASP.NET Core Blazor [Preview]
Search results

Getting Started with Essential JS 2 for Blazor in Visual Studio 2019

This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core Blazor web application using the Visual Studio 2019.

Prerequisites

The official prerequisites to create and run the Blazor on Windows environment are described in the .NET Core Blazor documentation website.

Create a Blazor application from VS 2019

  1. Add blazor project template using Blazor Language Services extension.

    (or)

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview4-19216-03
  1. Choose File > New > Project… in the Visual Studio menu bar.

  2. Make sure .NET Core and ASP.NET Core 3.0 are selected at the top.

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

  1. Choose the Blazor template and change the application name, and then click OK.

Importing Essential JS 2 Razor components in the application

  1. Now, add the Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package to the new application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.

    nuget explorer

  2. Search the Syncfusion.EJ2.AspNet.Core.RazorComponents keyword in the Browse tab and install Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package in the application.

    select nuget

  3. The Essential JS 2 package will be included in the project, after the installation process is completed.

  4. Open ~/_Imports.cshtml file and import the Syncfusion.EJ2.RazorComponents.

    @using Syncfusion.EJ2.RazorComponents
    @using Syncfusion.EJ2.RazorComponents.Calendars
  5. Add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.

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

import cdn

  1. Now, add the Syncfusion Essential JS 2 components in any web page (razor) in the Pages folder. For example, the calendar component is added in the ~/Pages/Index.razor page.

    <EjsCalendar ID="test"></EjsCalendar>
  2. Run the application. The Essential JS 2 calendar component will render in the web browser.

    output