ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

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

22 Oct 2021 / 8 minutes to read

This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core web application using the 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 5.x

Prerequisites

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

Created ASP.NET Core web application

  1. Create a new folder and open it in the VS Code by File > Open Folder….

aspnetcore5.x vscode open folder

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

aspnetcore5.x vscode integrated terminal

  1. Select View > Integrated Terminal to open the terminal in VS Code.
  2. Run the following command line in the terminal to create a new ASP.NET Core web application.
Copied to clipboard
dotnet new mvc

aspnetcore5.x vscode new web application

Refer to here, to learn more details about dotnet new command line. You can run the command line dotnet new --help, to learn more options available in the .NET CLI.

Configure Essential JS 2 in the application

  1. Run the following command in the VS Code terminal to add Syncfusion.EJ2.AspNet.Core NuGet package in the project.
Copied to clipboard
dotnet add package Syncfusion.EJ2.AspNet.Core

aspnetcore5.x vscode adding syncfusion package in the project

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

  1. Open ~/Views/_ViewImports.cshtml file and import the Syncfusion.EJ2 package.
Copied to clipboard
@addTagHelper *, Syncfusion.EJ2
  1. Add the client-side resources through CDN or local npm package in the <head> element of the ~/Views/Shared/_Layout.cshtml layout page.
Copied to clipboard
<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>
  1. Add the Essential JS 2 Script Manager at the end of <body> element in the ~/Views/Shared/_Layout.cshtml layout page.
Copied to clipboard
<body>
    ....
    ....
    <!-- Syncfusion Essential JS 2 ScriptManager -->
    <ejs-scripts></ejs-scripts>
</body>
  1. Now, you can 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.

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

aspnetcore5.x vscode select environment

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

aspnetcore5.x calendar component output

Getting Started with ASP.NET Core 3.x

Prerequisites

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

Created ASP.NET Core web application

  1. Create a new folder and open it in the VS Code by File > Open Folder….

aspnetcore3.x vscode open folder

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

aspnetcore3.x vscode integrated terminal

  1. Select View > Integrated Terminal to open the terminal in VS Code.
  2. Run the following command line in the terminal to create a new ASP.NET Core web application.
Copied to clipboard
dotnet new mvc

aspnetcore3.x vscode new web application

Refer to here, to learn more details about dotnet new command line. You can run the command line dotnet new --help, to learn more options available in the .NET CLI.

Configure Essential JS 2 in the application

  1. Run the following command in the VS Code terminal to add Syncfusion.EJ2.AspNet.Core NuGet package in the project.
Copied to clipboard
dotnet add package Syncfusion.EJ2.AspNet.Core

aspnetcore3.x vscode adding syncfusion package in the project

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

  1. Open ~/Views/_ViewImports.cshtml file and import the Syncfusion.EJ2 package.
Copied to clipboard
@addTagHelper *, Syncfusion.EJ2
  1. Add the client-side resources through CDN or local npm package in the <head> element of the ~/Views/Shared/_Layout.cshtml layout page.
Copied to clipboard
<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>
  1. Add the Essential JS 2 Script Manager at the end of <body> element in the ~/Views/Shared/_Layout.cshtml layout page.
Copied to clipboard
<body>
    ....
    ....
    <!-- Syncfusion Essential JS 2 ScriptManager -->
    <ejs-scripts></ejs-scripts>
</body>
  1. Now, you can 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.

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

aspnetcore3.x vscode select environment

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

aspnetcore3.x calendar component output

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. Create a new folder and open it in the VS Code by File > Open Folder….

aspnetcore2.x vscode open folder

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

aspnetcore2.x vscode integrated terminal

  1. Run the following command line in the terminal to create a new ASP.NET Core web application.
Copied to clipboard
dotnet new mvc

aspnetcore2.x vscode new web application

Refer to here, to learn more details about dotnet new command line. You can run the command line dotnet new --help, to learn more options available in the .NET CLI.

Configure Essential JS 2 in the application

  1. Run the following command in the VS Code terminal to add Syncfusion.EJ2.AspNet.Core NuGet package in the project.
Copied to clipboard
dotnet add package Syncfusion.EJ2.AspNet.Core

aspnetcore2.x vscode adding syncfusion package in the project

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

  1. Open ~/Views/_ViewImports.cshtml file and import the Syncfusion.EJ2 package.
Copied to clipboard
@addTagHelper *, Syncfusion.EJ2
  1. Add the client-side resources through CDN or local npm package in the <head> element of the ~/Views/Shared/_Layout.cshtml layout page.
Copied to clipboard
<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>
  1. Add the Essential JS 2 Script Manager at the end of <body> element in the ~/Views/Shared/_Layout.cshtml layout page.
Copied to clipboard
<body>
    ....
    ....
    <!-- Syncfusion Essential JS 2 ScriptManager -->
    <ejs-scripts></ejs-scripts>
</body>
  1. Now, you can 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.

Copied to clipboard
<div>
    <ejs-calendar id="calendar"></ejs-calendar>
</div>
  1. Run the application by pressing the F5 key. Set Select Environment to .NET Core, if settings required for 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. Create a new folder and open it in VS Code by File > Open Folder….

aspnetcore1.x vscode open folder

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

aspnetcore1.x vscode integrated terminal

  1. Run the following command line in the VS Code terminal to create a new ASP.NET Core web application.
Copied to clipboard
dotnet new -t web

aspnetcore1.x vscode new web application

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

Configure Essential JS 2 in the application

  1. Add Syncfusion.EJ2 assembly reference in the dependencies of project.json file.

aspnetcore1.x vscode project json

  1. Restore the dependent packages in the application by running the following command line in the VS Code terminal.
Copied to clipboard
dotnet restore

aspnetcore1.x vscode dotnet restore

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

  1. Open ~/Views/_ViewImports.cshtml file and import the Syncfusion.EJ2 package.
Copied to clipboard
@addTagHelper *, Syncfusion.EJ2
  1. Add the client-side resources through CDN or local npm package in the <head> element of ~/Views/Shared/_Layout.cshtml layout page.
Copied to clipboard
<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>
  1. Add the Essential JS 2 Script Manager at the end of <body> element in the ~/Views/Shared/_Layout.cshtml layout page.
Copied to clipboard
<body>
    ....
    ....
    <!-- Syncfusion Essential JS 2 ScriptManager -->
    <ejs-scripts></ejs-scripts>
</body>
  1. Now, you can 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.

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

aspnetcore1.x vscode select environment

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

aspnetcore1.x calendar component output

Previous
Next