This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple ASP.NET MVC web application using Visual Studio 2017.
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 MVC application to use the components.
To get started with ASP.NET MVC 5 application, ensure the following software to be installed on the machine.
Choose File > New > Project… in the Visual Studio menu bar.
Select ASP.NET Web Application (.NET Framework) and change the application name, and then click OK.
The Essential JS 2 supports 4.5+ .NET Framework in the ASP.NET MVC application. i.e. The minimum target framework is 4.5 for Syncfusion ASP.NET MVC (Essential JS 2).
Choose MVC and then click OK. Now, the MVC web application project is created with default ASP.NET MVC template.
Add the Syncfusion.EJ2.MVC5
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.
Search the Syncfusion EJ2 MVC5
keyword in the Browse tab and install Syncfusion.EJ2.MVC5 NuGet package in the application.
The Essential JS 2 MVC5 NuGet package will be included in the project, after the installation process is completed.
Note: The Syncfusion.EJ2.MVC5 NuGet package has dependencies,
Newtonsoft.Json
for JSON serialization andSyncfusion.Licensing
for validating Syncfusion license key.
Open ~/Views/Web.config
file and add the Syncfusion.EJ2
namesapce reference to the <system.web.webPages.razor>
element and Syncfusion.EJ2
assembly reference to <system.web>
element.
<configuration>
....
....
<system.web.webPages.razor>
....
....
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
....
....
<add namespace="Syncfusion.EJ2"/>
</namespaces>
</pages>
</system.web.webPages.razor>
....
....
<system.web>
<compilation>
<assemblies>
....
....
<add assembly="Syncfusion.EJ2, Culture=neutral" />
</assemblies>
</compilation>
</system.web>
</configuration>
Add the client-side resources through CDN 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>
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 -->
@Html.EJS().ScriptManager()
</body>
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>
@Html.EJS().Calendar("calendar").Render()
</div>
Run the application and the Essential JS 2 calendar component will render in the web browser.
To get started with ASP.NET MVC 4 application, ensure the following software to be installed on the machine.
Choose File > New > Project… in the Visual Studio menu bar.
Select ASP.NET MVC 4 Web Application and change the application name and click OK.
The Essential JS 2 supports 4.5+ .NET Framework in the ASP.NET MVC application. i.e. The minimum target framework is 4.5 for Syncfusion ASP.NET MVC (Essential JS 2).
Choose Internet Application and select View engine as Razor, and then click OK. Now, the MVC web application project is created with default ASP.NET MVC 4 template.
Add the Syncfusion.EJ2.MVC4
NuGet package into 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.
Select Online option and search the keyword Syncfusion EJ2 MVC4
in the search text box, and then install Syncfusion.EJ2.MVC4 NuGet package in the application.
The Essential JS 2 MVC4 NuGet package will be included in the project, after the installation process is completed.
Note: The Syncfusion.EJ2.MVC4 NuGet package has dependencies,
Newtonsoft.Json
for JSON serialization andSyncfusion.Licensing
for validating Syncfusion license key.
Open ~/Views/Web.config
file and add the Syncfusion.EJ2
namesapce reference to the <system.web.webPages.razor>
element, and then add Syncfusion.EJ2
assembly reference to the <system.web>
element.
<configuration>
....
....
<system.web.webPages.razor>
....
....
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
....
....
<add namespace="Syncfusion.EJ2"/>
</namespaces>
</pages>
</system.web.webPages.razor>
....
....
<system.web>
....
....
<pages>
<controls>
....
....
<add assembly="Syncfusion.EJ2, Culture=neutral" tagPrefix="mvc"/>
</controls>
</pages>
</system.web>
</configuration>
Add the client-side resources through CDN 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>
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 -->
@Html.EJS().ScriptManager()
</body>
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>
@Html.EJS().Calendar("calendar").Render()
</div>
Run the application and the Essential JS 2 Calendar component will render in the web browser.