Using the Ignite UI for JavaScript NuGet package in ASP.NET Core MVC projects

NuGet is one of the most popular tools for sharing code. In the following article, we will explain some specifics when using the Ignite UI for JavaScript NuGet package to create an ASP.NET Core application.

Until version 2017.2 of Ignite UI for JavaScript, the NuGet package for ASP.NET Core MVC was distributed under the name “Infragistics.Web.MVC”. In version 2017.2 this package was renamed to “Infragistics.Web.AspNetCore” in order to differentiate it from the packages for MVC4 and MVC5, which are also called "Infragistics.Web.MVC".

Let us go through the steps that are required to add the package to your project and reference the Ignite UI for JavaScript scripts. This example will show you how to use the licensed packages from the Infragistics private packages source. If you do not have an Ignite UI for JavaScript license, you can follow the same steps but instead of https://packages.infragistics.com, you will use https://www.nuget.org as a package's source. This will install the trial versions of the packages.

First, we need to make sure that the Infragistics private NuGet package source is set up.  Open the “Options” dialog in Visual Studio and navigate to the “Package Sources” view of the “NuGet Package Manager” node. There, we should add a new source that points out to https://packages.infragistics.com/nuget/licensed.

After we have the Infragistics private NuGet feed set up, we can continue with creating the ASP.NET Core application. In our case, we are using Visual Studio 2017 and we are targeting .NET Framework 4.7.1.

In the next view, we stick to the defaults – we will create an ASP.NET Core 2.0 application.

After pressing “OK” our new project is created. Let us have a look at what is initially included in the “NuGet” dependency in our project. ASP.NET Core 2.x applications that target .NET Core (this is our app) only require a single NuGetPackage – “Microsoft.AspNetCore.All”. All the features of ASP.NET Core 2.x and Entity Framework are included in this package. Such a smaller application surface area help to improve the security and also improves performance.

After we install the Infragistics.Web.AspNetCore package – it will also be placed under the “NuGet” dependency. We select “Manage NuGet packages…” from the context menu and we see the NuGet Package Manager view is opened. We see that the manager is set up to use all the available package sources. In addition, we see an indicator that “Microsoft.AspNetCore.All” package is already installed.

At this point, you will be asked to provide the credentials for your Infragistics account. Those are required so that you would be able to download the licensed versions of the Infragistics packages. If you do not own a license key for Ignite UI for JavaScript 2017.2 – you will only be able to use the Trial version of the NuGet package that is available on nuget.org.

We need to change the package source to the Infragistics private feed to make sure that the Licensed version will be installed. Then, we search for the ASP.NET Core package. In this example, I demonstrate the difference between the packages in version 2017.1 and in 2017.2. I have licenses for both versions and after browsing for “Infragistics.Web”, I see both the packages. For this example, we will use the 2017.2 version which is the top package.

If you look at the dependencies for this package, you will find “IgniteUI” as a dependency. This means that installing this package will also install the Ignite UI for JavaScript script files. This is an important note as later we will see how to use those scripts in our application.

After the package is installed, we need to include the Ignite UI scripts that are installed by the package to our application. As our project uses PackageReferences, the static script files are not added to the project automatically. They are installed under “%UserProfile%\.nuget\packages” folder. So, you need to copy the files that are needed by your application and place it inside the “wwwroot” folder of the project. Inside your .cshtml pages, you need to reference those scripts from this folder.

As you can see on the following screenshot, I have added the combined .js files that I need under the “js” folder of my application and I have placed the Infragistics .css files that I want to use under the “css” folder.

After the script files are added, we can navigate to the .cshtml page that we want to add our Ignite UI for JavaScript control in. We need to import our namespace like this:

@using Infragistics.Web.Mvc 

Below we need to reference our Ignite UI scripts. In my example they would look like this:

<link href="~/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="~/css/structure/infragistics.css" rel="stylesheet" />
<script src="~/js/infragistics.core.js"></script>
<script src="~/js/infragistics.lob.js"></script> 

Of course, do not forget to reference jQuery and jQuery UI before using the Ignite UI scripts. When this is done, you will be able to create the Ignite UI for JavaScript controls that you need in your scenario. In my example, I will create a numeric editor using the following line:

@(Html.Infragistics().NumericEditor().ID("newEditor").MaxValue(100).Render()) 

When I run my application, the numeric editor will be rendered.

In conclusion, we can say that using the Ignite UI for JavaScript NuGet packages is one of the fastest and easiest ways to boost your productivity when creating your next ASP.NET Core application.