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

28 Jul 2021 / 9 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.

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.

Using Visual Studio 2019

Getting Started with ASP.NET Core 5.x

Prerequisites

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

Create ASP.NET Core web application

  1. Open the Visual Studio and click the File menu and select New -> Project option.

new project in aspnetcore5.x razor

  1. Select ASP.NET Core Web Application templates in visual studio 2019.

aspnetcore5.x project template

  1. Change the Application name and then click Create.

aspnetcore5.x project template

  1. Choose .NET Core with ASP.NET Core 5.0 and select ASP.NET Core Web App (Model-View-Controller), and then click Create. The web application project is now created with default ASP.NET Core template.

aspnetcore5.x razor web application template

Configure Essential JS 2 in the application

  1. Add the Syncfusion.EJ2.AspNet.Core NuGet package to the new application by using the Nuget Packge Manager. Right-click the project and select the Manage Nuget Packages….

Refer to this article to learn more details about installing Essential JS 2 NuGet packages in various OS environment.

aspnetcore5.x razor manage nuget packages

  1. Search the Syncfusion.EJ2.AspNet.Core keyword in the Browser tab and install Syncfusion.EJ2.AspNet.Core NuGet package in the application.

aspnetcore5.x razor install nuget packages

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

Note: The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating Syncfusion license key.

  1. Open ~/Views/_ViewImports.cshtml file and import the Syncfusion.EJ2 TagHelper.
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 Home 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. 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.

Create ASP.NET Core web application

  1. Open the Visual Studio and click the File menu and select New -> Project option.

new project in aspnetcore3.x razor

  1. Select ASP.NET Core Web Application templates in visual studio 2019.

aspnetcore3.x project template

  1. Change the Application name and then click Create.

aspnetcore3.x project template

  1. Choose .NET Core with ASP.NET Core 3.1 and select Web Application (Model-View-Controller), and then click Create. The web application project is now created with default ASP.NET Core template.

aspnetcore3.x razor web application template

Configure Essential JS 2 in the application

  1. Add the Syncfusion.EJ2.AspNet.Core NuGet package to the new application by using the Nuget Packge Manager. Right-click the project and select the Manage Nuget Packages….

Refer to this article to learn more details about installing Essential JS 2 NuGet packages in various OS environment.

aspnetcore3.x razor manage nuget packages

  1. Search the Syncfusion.EJ2.AspNet.Core keyword in the Browser tab and install Syncfusion.EJ2.AspNet.Core NuGet package in the application.

aspnetcore3.x razor install nuget packages

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

Note: The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating Syncfusion license key.

  1. Open ~/Views/_ViewImports.cshtml file and import the Syncfusion.EJ2 TagHelper.
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 Home 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. The Essential JS 2 calendar component will render in the web browser.

    aspnetcore3.x calendar component output

Using Visual Studio 2017

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. Choose File > New > Project… in the Visual Studio menu bar.

new project in aspnetcore2.x

  1. Select Installed > Visual C# > .NET Core and choose the required .NET Framework in the drop-down.
  2. Select ASP.NET Core Web Application and change the application name, and then click OK.

The Essential JS 2 supports 4.5+ .NET Framework in the ASP.NET Core application. i.e. The minimum target framework is 4.5 for Syncfusion ASP.NET Core (Essential JS 2).

aspnetcore2.x project template

  1. Choose .NET Core with ASP.NET Core 2.0 and select Web Application(Model-View-Controller), and then click OK. The web application project is now created with default ASP.NET Core template.

aspnetcore2.x web application template

Configure Essential JS 2 in the application

  1. Add the Syncfusion.EJ2.AspNet.Core NuGet package to the new application by using the Nuget Package Manager. Right-click the project and select Manage NuGet Packages….

Refer to this article to learn more details about installing Essential JS 2 NuGet packages in various OS environment.

aspnetcore2.x manage nuget packages

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

aspnetcore2.x install nuget packages

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

Note: The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating Syncfusion license key.

  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, add the Syncfusion Essential JS 2 components in any web page (cshtml) in the Views folder.

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

Copied to clipboard
<div>
    <ejs-calendar id="calendar"></ejs-calendar>
</div>
  1. Run the application. 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. Choose File > New > Project… in the Visual Studio menu bar.

new project in aspnetcore1.x

  1. Select Installed > Visual C# > .NET Core and choose the required .NET Framework in the drop-down.
  2. Select ASP.NET Core Web Application and change the application name and then click OK.

The Essential JS 2 supports 4.5+ .NET Framework in the ASP.NET Core application. i.e. The minimum target framework is 4.5 for Syncfusion ASP.NET Core (Essential JS 2).

aspnetcore1.x project template

  1. Choose .NET Core with ASP.NET Core 1.0 and select Web Application(Model-View-Controller), and then click OK. Now, the web application project is created with default ASP.NET Core template.

aspnetcore1.x web application template

Configure Essential JS 2 in the application

  1. Add the Syncfusion.EJ2.AspNet.Core NuGet package to the new web application by using the Nuget Package Manager. Right-click the project and select Manage NuGet Packages….

Refer to this article to learn more details about installing Essential JS 2 NuGet packages in various OS environment.

aspnetcore1.x manage nuget packages

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

aspnetcore1.x install nuget packages

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

Note: The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating Syncfusion license key.

  1. Open the ~/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, add the Syncfusion Essential JS 2 components in any web page (cshtml) in the Views folder.

For example, add the calendar component in the ~/Views/Home/Index.cshtml page.

Copied to clipboard
<div>
    <ejs-calendar id="calendar"></ejs-calendar>
</div>
  1. Run the application. The Essential JS 2 calendar component will render in the web browser.

aspnetcore1.x calendar component output

Previous
Next