Getting Started with Essential JS 2 for ASP.NET Core and Yeoman tool in Visual Studio Code

This article provides a step-by-step introduction to configure Essential JS 2 setup and build a simple .NET Core web application using the Yeoman tool in Visual Studio Code (VS Code).

Starting with v16.2.0.x, if you reference to Syncfusion assemblies from trial setup or NuGet feed, you should include a license key in your projects. Refer to this link to learn about registering Syncfusion license key in your ASP.NET Core application to use the components.

Getting Started with ASP.NET Core 2.x

Prerequisites

The official prerequisites to create and run an ASP.NET Core 2.x application on Windows environment are described in the .NET Core documentation website.

Create ASP.NET Core web application

  1. Open Command prompt from the desired location and run the following command to install the required npm plugins with global flag.

    npm install -g yo generator-aspnet gulp bower
  2. After installing the Yeoman generator successfully, run the following command to invoke a ASP.NET Core project creation wizard.

    yo aspnet

    aspnetcore2.x vscode yeoman generator

  3. Select Web Application Basic [without Membership and Authorization] option and choose the Bootstrap (3.3.7) framework, and then type the web application name for the new application. For example, a new application is created as EssentialJS2.

    You can navigate the options by using top and bottom arrow keys and then press Enter key to select the option.

    aspnetcore2.x vscode yeoman aspnetcore app installing

  4. Now, a new application is created in a new folder with the provided application name. Open the application in the VS Code and Select View > Integrated Terminal to open the terminal in VS Code.

    aspnetcore2.x vscode integrated terminal

Configure Essential JS 2 in the application

  1. Run the following command in the VS Code terminal to add Syncfusion.EJ2 NuGet package in the project.

    dotnet add package Syncfusion.EJ2

    aspnetcore2.x vscode adding syncfusion package in the project

    Refer to here, to learn more details about dotnet add command line.

  2. Open ~/Views/_ViewImports.cshtml file and import the Syncfusion.EJ2 package.

    @addTagHelper *, Syncfusion.EJ2
  3. Add the client-side resources through CDN or local npm package in the <head> element of ~/Views/Shared/_Layout.cshtml layout page.

    <head>
        ....
        ....
    
        <!-- Syncfusion Essential JS 2 Styles -->
        <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />
    
        <!-- Syncfusion Essential JS 2 Scripts -->
        <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
    </head>
  4. Add the Essential JS 2 Script Manager at the end of <body> element in the ~/Views/Shared/_Layout.cshtml layout page.

    <body>
        ....
        ....
        <!-- Syncfusion Essential JS 2 ScriptManager -->
        <ejs-scripts></ejs-scripts>
    </body>
  5. Add the Syncfusion Essential JS 2 components in any web page (cshtml) in the Views folder.

    For example, the calendar component is added to the ~/Views/Home/Index.cshtml page.

    <div>
        <ejs-calendar id="calendar"></ejs-calendar>
    </div>
  6. Run the application by pressing F5 key. Set Select Environment to .NET Core, if setting required VS Code.

    aspnetcore2.x vscode select environment

    The Essential JS 2 calendar component will render in the web browser.

    aspnetcore2.x calendar component output

Getting Started with ASP.NET Core 1.x

Prerequisites

The official prerequisites to create and run an ASP.NET Core 1.x application on Windows environment are described in the .NET Core documentation website.

Create ASP.NET Core web application

  1. Open Command prompt from the desired location and run the following command to install the required npm plugins with global flag.

    npm install -g yo generator-aspnet@0.2.6 gulp bower

    Ensure the generator-aspnet plugin version as 0.2.6, which supports the ASP.NET Core 1.x version.

  2. After installing the Yeoman generator successfully, run the following command to invoke a ASP.NET Core project creation wizard.

    yo aspnet

    aspnetcore1.x vscode yeoman generator

  3. Select Web Application Basic [without Membership and Authorization] option and choose the Bootstrap (3.3.7) framework, and then type the web application name for the new application. For example, a new application is created as EssentialJS2.

    You can navigate the options by using top and bottom arrow keys and then press Enter key to select the option.

    aspnetcore1.x vscode yeoman aspnetcore app installing

Configure Essential JS 2 in the application

  1. Now, a new application is created in a new folder with the provided application name. Open the application in the VS Code and add Syncfusion.EJ2 assembly reference in the dependencies of project.json file.

    aspnetcore1.x vscode project json

  2. Select View > Integrated Terminal to open the terminal in VS Code.

    aspnetcore1.x vscode integrated terminal

  3. Restore the dependent packages in the application by running the following command line in the VS Code terminal.

    dotnet restore

    aspnetcore1.x vscode dotnet restore

    Refer to here, to know more details about dotnet restore command line.

  4. Open the ~/Views/_ViewImports.cshtml file and import the Syncfusion.EJ2 package.

    @addTagHelper *, Syncfusion.EJ2
  5. Add the client-side resources through CDN or local npm package in the <head> element of ~/Views/Shared/_Layout.cshtml layout page.

    <head>
        ....
        ....
    
        <!-- Syncfusion Essential JS 2 Styles -->
        <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />
    
        <!-- Syncfusion Essential JS 2 Scripts -->
        <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
    </head>
  6. Add the Essential JS 2 Script Manager at the end of <body> element in the ~/Views/Shared/_Layout.cshtml layout page.

    <body>
        ....
        ....
        <!-- Syncfusion Essential JS 2 ScriptManager -->
        <ejs-scripts></ejs-scripts>
    </body>
  7. Add the Syncfusion Essential JS 2 components in any web page (cshtml) in the Views folder.

    For example, the calendar component is added to the ~/Views/Home/Index.cshtml page.

    <div>
        <ejs-calendar id="calendar"></ejs-calendar>
    </div>
  8. Run the application by pressing F5 key. Set Select Environment to .NET Core, if settings required VS Code.

    aspnetcore1.x vscode select environment

    The Essential JS 2 calendar component will render in the web browser.

    aspnetcore1.x calendar component output