Reference Scripts in ASP.NET Core Application
26 Jun 202614 minutes to read
This section explains the available approaches for referencing client-side scripts and stylesheets for Syncfusion® ASP.NET Core controls. You can reference scripts via CDN, Static Web Assets (served directly from NuGet packages), NPM Packages, or the Custom Resource Generator (CRG).
Static Web Assets
Static web assets allow you to reference Syncfusion® scripts and stylesheets directly from the installed NuGet packages no CDN, no manual file copying. The ASP.NET Core framework serves these files automatically at the path _content/{PackageName}/, making them the most reliable and version-consistent way to reference scripts in production.
Enable Static Web Assets
To serve static web assets, call UseStaticFiles in the app’s ~/Program.cs file.
var app = builder.Build();
app.UseStaticFiles();Reference scripts from Static Web Assets
The combined script for all Syncfusion® ASP.NET Core controls is available in the Syncfusion.AspNetCore.Base package. Add the reference in the <head> element of ~/Pages/Shared/_Layout.cshtml.
<head>
<!-- Syncfusion ASP.NET Core controls scripts -->
<script src="_content/Syncfusion.AspNetCore.Base/scripts/ej2.min.js"></script>
</head>Note: Syncfusion® does not recommend referencing the combined
ej2.min.jsin production applications because it includes all controls, which increases page load time. For production, use individual control script references as described below.
Individual control script references
For production use, reference only the scripts for the controls your application actually uses. This reduces the JavaScript payload significantly. Install the relevant NuGet package for each control group, then reference its static web asset files.
The script path follows this pattern:
_content/{NuGetPackageName}/scripts/{script-file-name}
The following table lists each NuGet package, the controls it covers, and the individual script files it provides.
| NuGet Package | Controls | Script Files |
|---|---|---|
| Syncfusion.AspNetCore.Charts | AccumulationChart |
|
| Syncfusion.AspNetCore.BarcodeGenerator | Barcode Generator, DataMatrix, QR Code |
|
| Syncfusion.AspNetCore.BlockEditor | Block Editor |
|
| Syncfusion.AspNetCore.BulletChart | Bullet Chart |
|
| Syncfusion.AspNetCore.Buttons | Button, CheckBox, Chips, FloatingActionButton, RadioButton, SpeedDial, Switch |
|
| Syncfusion.AspNetCore.Calendars | Calendar, DatePicker, DateRangePicker, DateTimePicker, TimePicker |
|
| Syncfusion.AspNetCore.Charts | Chart |
|
| Syncfusion.AspNetCore.Chart3D | 3D Chart |
|
| Syncfusion.AspNetCore.CircularChart3D | 3D Circular Chart |
|
| Syncfusion.AspNetCore.CircularGauge | Circular Gauge |
|
| Syncfusion.AspNetCore.Diagram | Diagram |
|
| Syncfusion.AspNetCore.DocumentEditor | Document Editor, Document Editor Container |
|
| Syncfusion.AspNetCore.DropDowns | AutoComplete, ComboBox, DropDownList, DropDownTree, ListBox, Mention, MultiSelect |
|
| Syncfusion.AspNetCore.FileManager | File Manager |
|
| Syncfusion.AspNetCore.Gantt | Gantt |
|
| Syncfusion.AspNetCore.Grid | Grid |
|
| Syncfusion.AspNetCore.HeatMap | HeatMap |
|
| Syncfusion.AspNetCore.ImageEditor | Image Editor |
|
| Syncfusion.AspNetCore.InPlaceEditor | In-place Editor |
|
| Syncfusion.AspNetCore.Inputs | ColorPicker, MaskedTextBox, NumericTextBox, OTP Input, Rating, Signature, Slider, SpeechToText, TextArea, TextBox, Uploader |
|
| Syncfusion.AspNetCore.InteractiveChat | AI AssistView, Chat UI, Inline AI Assist |
|
| Syncfusion.AspNetCore.Kanban | Kanban |
|
| Syncfusion.AspNetCore.Layouts | Dashboard Layout, Splitter, Timeline |
|
| Syncfusion.AspNetCore.LinearGauge | Linear Gauge |
|
| Syncfusion.AspNetCore.Lists | ListView |
|
| Syncfusion.AspNetCore.Maps | Maps |
|
| Syncfusion.AspNetCore.MultiColumnComboBox | MultiColumn ComboBox |
|
| Syncfusion.AspNetCore.Navigations | Accordion, AppBar, Breadcrumb, Carousel, ContextMenu, Menu, Sidebar, Stepper, Tabs, Toolbar, TreeView |
|
| Syncfusion.AspNetCore.Notifications | Message, Skeleton, Toast |
|
| Syncfusion.AspNetCore.PdfViewer | PDF Viewer |
|
| Syncfusion.AspNetCore.PivotView | Pivot Table, Pivot Field List |
|
| Syncfusion.AspNetCore.Popups | Dialog, Spinner, Tooltip |
|
| Syncfusion.AspNetCore.ProgressBar | Progress Bar |
|
| Syncfusion.AspNetCore.QueryBuilder | Query Builder |
|
| Syncfusion.AspNetCore.RangeNavigator | Range Navigator |
|
| Syncfusion.AspNetCore.Ribbon | Ribbon |
|
| Syncfusion.AspNetCore.RichTextEditor | Rich Text Editor |
|
| Syncfusion.AspNetCore.Sankey | Sankey |
|
| Syncfusion.AspNetCore.Schedule | Schedule |
|
| Syncfusion.AspNetCore.Smithchart | Smith Chart |
|
| Syncfusion.AspNetCore.Sparkline | Sparkline |
|
| Syncfusion.AspNetCore.SplitButtons | DropDownButton, ProgressButton, SplitButton |
|
| Syncfusion.AspNetCore.Spreadsheet | Spreadsheet |
|
| Syncfusion.AspNetCore.StockChart | Stock Chart |
|
| Syncfusion.AspNetCore.TreeGrid | Tree Grid |
|
| Syncfusion.AspNetCore.TreeMap | TreeMap |
|
Node Package Manager (NPM)
A package in Node.js consists of a set of files needed for a JavaScript module which can be included in any web application. NPM is the popular package manager for both public and private packages.
Syncfusion® NPM packages
Scripts and style sheets of Syncfusion® ASP.NET Core controls can be included in an ASP.NET Core web application using NPM packages, since Syncfusion® publishes its ASP.NET Core controls as the scoped package in NPM.
Installing NPM packages in ASP.NET Core Web Application
1.Open the Source Explorer and right click the application name. Then, select “Add New Item” menu item to open the “Add New Item” window.
2.Select “Web” on the left side Tree View and select “npm configuration File” in “Add New Item” window which will include and configure “package.json” file in root folder of the ASP.NET Core web application.
3.Open the Source Explorer and right click on the application name. Then, select “Open Folder in File Explorer”.
4.Open the Command Prompt for this location and install the required Syncfusion® packages using “npm install @syncfusion/{PACKAGE_NAME} –save”
npm install @syncfusion/ej2-calendars --save5.Installed packages with all its dependencies can be found under the “node_modules” folder as shown in the following image.
From Installed Packages
Scripts and style sheets of Syncfusion® ASP.NET Core controls from locally-installed packages can be included in an ASP.NET Core web application using the following two methods.
NOTE
Files in the wwwroot folder can be accessed only in client-side, hence Syncfusion® scripts and style sheets should be copied from node_modules to wwwroot.
By using either one of the following methods, Client-Side Resource can be loaded in ASP.NET Core web application:
- Copying scripts and styles using gulp
- Generating scripts and styles using CRG (Custom Resource Generator)
Copying by Gulp
Install required Syncfusion® ASP.NET Core control packages as mentioned in “Installing NPM Packages in ASP.NET Core Web Application”.
1.In addition to Syncfusion® ASP.NET Core packages, install gulp and glob packages using below commands.
NOTE
Gulp Installation - npm install gulp –save
npm install gulp@latest --saveNOTE
Glob Installation - npm install glob –save
npm install glob@latest --save2.To set up the server, open Dependencies -> Manage NuGet Packages -> Browse. Then, search and install “Microsoft.AspNetCore.StaticFiles -V2.2.0” and “Microsoft.TypeScript.MSBuild -V3.8.3” packages.
Open up your “Startup.cs” file and edit your Configure function to looks like the below code snippet.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseDefaultFiles();
app.UseStaticFiles();
}Restart Visual Studio for the red squiggly lines below “UseDefaultFiles” and “UseStaticFiles” to disappear.
3.Open the Source Explorer and right click on the application name. Then, select “Add New Item” menu item to open the “Add New Item” window.
4.Select “ASP.NET Core” on the left side Tree View and select “JavaScript File” in the “Add New Item” window. It will include a js file in the root folder of the ASP.NET Core web application. Rename the js file as “gulpfile.js”.
5.Copy the following code snippet and paste it in gulpfile.js for automatically copying the script and styles from “node_modules” to “wwwroot” while building the web application.
/// <binding BeforeBuild='copy-client-resource'/>
// nodejs requiring statement for importing and using the package in this js file
var gulp = require('gulp');
var glob = require('glob');
// gulp task for copying file form “node_modules” to “wwwroot” directory
gulp.task("copy-client-resource", function (done) {
let packagePath = './node_modules/@syncfusion/';
let destCommonPath = 'wwwroot/syncfusion'
let installedPackages = glob.sync(`${packagePath}*`);
for (let insPackage of installedPackages) {
let packagename = insPackage.replace(packagePath, '');
gulp.src(`${insPackage}/dist/global/**/*`)
.pipe(gulp.dest(`${destCommonPath}/${packagename}/`));
gulp.src(`${insPackage}/styles/**/*.css`)
.pipe(gulp.dest(`${destCommonPath}/${packagename}/styles/`));
}
done();
});6.Build the ASP.NET Core web application and notice that a new folder named “Syncfusion” is created in “wwwroot” folder.
7.Add the client-side resource in the <head> element of the ~/Views/Shared/_Layout.cshtml. Here, scripts and styles of Syncfusion® ASP.NET Core Calendar has been loaded for example.
<head>
<!-- Syncfusion ASP.NET Core controls styles -->
<link rel="stylesheet" href="~/syncfusion/ej2-calendars/styles/calendar/material.css" />
<link rel="stylesheet" href="~/syncfusion/ej2-base/styles/material.css" />
<link rel="stylesheet" href="~/syncfusion/ej2-buttons/styles/button/material.css" />
<!-- Syncfusion ASP.NET Core controls scripts -->
<script src="~/syncfusion/ej2-base/ej2-base.min.js"></script>
<script src="~/syncfusion/ej2-calendars/ej2-calendars.min.js"></script>
</head>CDN Reference
Syncfusion® hosts every ASP.NET Core control package on CDN, from which scripts and stylesheets can be loaded. For detailed CDN URLs, individual control CDN references, and CDN fallback configuration, refer to the CDN Reference page.
Custom Resource Generator
The Syncfusion® ASP.NET Core provides an option to generate a control’s scripts using the Custom Resource Generator (CRG) tool. Refer here for details.