Getting Started with ASP.NET MVC and Syncfusion® Project Template

9 Dec 20245 minutes to read

Syncfusion® provides the Visual Studio Project Templates for the Syncfusion® ASP.NET MVC platform to create the Syncfusion® ASP.NET MVC web application using Essential® JS 2 controls.

NOTE

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 controls.

Getting started with ASP.NET MVC 5

Prerequisites

To get started with ASP.NET MVC 5 application, ensure the following software to be installed on the machine.

Create ASP.NET MVC 5 web application

  1. Choose File > New > Project… in the Visual Studio menu bar.

    new project in aspnetmvc5

  2. Select Installed > Visual C# > Web and choose the required .NET Framework in the drop-down.

  3. Select Syncfusion® ASP.NET MVC (Essential® JS 2) Application and change the application name, and then click OK.

    NOTE

    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).

    aspnetmvc5 syncfusion project template

  4. Choose the options to configure the Syncfusion® ASP.NET Core (Essential® JS 2) application by using the following Project Configuration dialog.

    Target MVC Version: Select the version of ASP.NET MVC project as MVC5.

    Assets From: Load the Syncfusion® Essential® JS 2 assets from ASP.NET MVC project such as NuGet, CDN or installed location.

    NOTE

    Installed location option is available only when the Syncfusion® Essential JavaScript 2 setup has been installed.

    Theme Selection: Choose the required Theme.

    aspnetmvc5 web application syncfusion template

  5. Click Create, the Syncfusion® ASP.NET MVC (Essential® JS 2) application has been created.

    The required Syncfusion® Essential® JS 2 NuGet/NPM packages, Scripts, and CSS have been added to the new project.

    aspnetmvc5 installed ej2 nuget packages

    If you are choosing assets from NuGet or Installed Location, then the styles and scripts will be installed in the Content/ej2 and Scripts/ej2.

    aspnetmvc5 installed ej2 styles
    aspnetmvc5 installed ej2 scripts

  6. Add the Syncfusion® Essential® JS 2 controls directly in any web page (cshtml) in the Views folder and run the application.

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

     <div>
     @Html.EJS().Calendar("calendar").Render()
 </div>

    The final output of Essential® JS 2 calendar control in the web browser is shown as follows.

    aspnetmvc5 calendar control output

Getting Started with ASP.NET MVC 4

Prerequisites

To get started with ASP.NET MVC 4 application, ensure the following software to be installed on the machine.

Create ASP.NET MVC 4 web application

  1. Choose File > New > Project… in the Visual Studio menu bar.

    new project in aspnetmvc4

  2. Select Installed > Visual C# > Web and choose the required .NET Framework in the drop-down and select Syncfusion® ASP.NET MVC (Essential® JS 2) Application. Change the application name and click OK.

    NOTE

    The Syncfusion® ASP.NET MVC UI Controls supports 4.5+ .NET Framework in the ASP.NET MVC application. i.e. The minimum target framework is 4.5.

    aspnetmvc4 syncfusion project template

  3. Choose the options to configure the Syncfusion® ASP.NET Core (Essential® JS 2) application by using the following Project Configuration dialog.

    Target MVC Version: Select the version of ASP.NET MVC Project as MVC4.

    Assets From: Load the Syncfusion® Essential® JS 2 assets to ASP.NET MVC Project, either NuGet, CDN or installed location.

    NOTE

    Installed location option will be available only when the Syncfusion® Essential JavaScript 2 setup has been installed.

    Theme Selection: Choose the required Theme.

    aspnetmvc4 web application syncfusion template

  4. Click Create, the Syncfusion® ASP.NET MVC (Essential® JS 2) application has been created.

  5. Required Syncfusion® Essential® JS 2 NuGet/NPM packages, Scripts, and CSS have been added to the new project.

    aspnetmvc4 installed ej2 nuget packages

    If you are choosing assets from NuGet or Installed Location, then the styles and scripts will be installed in the Content/ej2 and Scripts/ej2.

    aspnetmvc4 installed ej2 styles
    aspnetmvc4 installed ej2 scripts

  6. Add the Syncfusion® ASP.NET MVC UI controls directly in any web page (cshtml) in the Views folder and run the application.

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

     <div>
     @Html.EJS().Calendar("calendar").Render()
 </div>

    The final output of Syncfusion® ASP.NET MVC Calendar UI control in the web browser is shown as follows.

    aspnetmvc4 calendar control output