How to Integrate JavaScript Components as Frontend in ASP.NET Core?
Ton.Overview
This article explains about how to integrate Syncfusion JavaScript ES6 components into an ASP.NET Core application as front end.
Perquisite
- .NET Core SDK
- Node
Creating ASP.NET Core application
You can create the application as directed in the following Microsoft documentation.
Initializing “package.json”
- Open the “Development Command Prompt” by navigating to the “Tools” tab in the toolbar.
- Run the following command to initialize the “package.json” file.
npm init
Installing NPM Packages
Install the following list of NPM packages using the command following the list.
- Babel Loader
- CSS Loader
- Style Loader
- Sass Loader
- Sass
- Webpack
- Webpack CLI
- Required Syncfusion Packages
npm install webpack webpack-cli css-loader style-loader bable-loader @babel/core @babel/preset-env sass sass-loader terser-webpack-plugin @syncfusion/ej2-grids --save
Configuring Webpack
You can configure the webpack bundling properly as shown in the following code snippet.
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'development',
entry: path.join(__dirname, '/Scripts/app.js'),
output: {
filename: 'bundle.js',
path: __dirname + '/wwwroot/js'
},
devtool: false,
optimization: {
minimize: false,
minimizer: [new TerserPlugin(
{ parallel: true, }
)],
usedExports: true,
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
},
},
{
test: /\.(css|scss|sass)$/i,
use: [
'style-loader',
'css-loader',
{
loader: "sass-loader",
options: {
implementation: require("sass"),
sassOptions: {
includePaths: ["node_modules/@syncfusion/"],
},
}
}
],
}
]
},
resolve: {
extensions: [".js"]
},
};
Including JavaScript ES6 Code
Create a JavaScript file under new directory in the application root namely “scripts/app.js”.
import { Grid, Group, Filter, Page, Sort } from '@syncfusion/ej2-grids';
import { data } from './datasource.js';
Grid.Inject(Group, Filter, Page, Sort);
import './app.scss';
let grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' }
],
height: 175,
allowGrouping: true,
allowPaging: true,
allowSorting: true,
allowFiltering: true
});
grid.appendTo('#Grid');
Automating NPM commands in build automation
You can configure the NPM commands in “BeforeTargets” every time you build the application. For automation, you need to include the following configuration in the “.csproj” file.
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp3.1</TargetFramework> </PropertyGroup> <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build"> <Exec Command="npm install" /> <Exec Command="webpack" /> </Target> </Project>
Including the compiled ES6
Whenever you build the application, the “scripts/app.js” file will be compiled, and the result will be copied in “wwwroot/js/bundle.js”. The “wwwroot/js/app.js” will be included in “Views/Shared/_Layout.cshtml”.
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/js/bundle.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
Including HTML Tag for EJ2
To keep it simple, you can add a div element in “Views/Home/index.cshtml” with an “ID” as shown in the following code example.
@{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<div id="Grid" ></div>
Conclusion
The EJ2 Grid will be rendered as shown in the following image.
Conclusion
I hope you enjoyed learning about how to integrate JavaScript ES6 components as frontend in ASP.NET Core application.
You can refer to our JavaScript UI Controls Library page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Demos JavaScript UI Controls example to understand how to create and manipulate data in the ASP.NET Core.
For current customers, you can check out our Document processing libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our JavaScript Controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, orfeedback portal. We are always happy to assist you!
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionES6WithCore-1175308856
