ASP.NET Core Blazor [Preview]
Search results

Getting Started with Essential JS 2 for Razor Components in .NET Core CLI

This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core Razor Components 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

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

Create a Razor Components in .NET Core CLI

  1. To create the Razor Components application, run the following command.

        dotnet new razorcomponents -o WebApplication1
        cd WebApplication1

Importing Essential JS 2 Razor components in the application

  1. Now, add the Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package to the new application WebApplication1.App and WebApplication1.Server using below command

        dotnet add package Syncfusion.EJ2.AspNet.Core.RazorComponents -v 17.1.0.34-*
        dotnet restore
  2. The Essential JS 2 package will be included in the project, after the installation process is completed.

  3. Open ~/Components/_ViewImports.cshtml file and import the Syncfusion.EJ2.RazorComponents.

    @addTagHelper *, Syncfusion.EJ2.RazorComponents
  4. Add the client-side resources through CDN or local npm package in the <head> element of the ~/Pages/Index.cshtml 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

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

    <EjsCalendar Id="test"></EjsCalendar>
  6. Run dotnet run command to run the application. The Essential JS 2 calendar component will render in the web browser.

    output