How to Create ASP.NET MVC Web Application with NodeJS?
This document explains how to create a sample in ASP.NET MVC with NodeJS.
Step 1: Create an ASP.NET MVC web application by referring to this getting started documentation.
Step 2: Include the package.json file in root of the web application and add required component packages in dependencies section along with webpack packages.
Step 3: Include a TS file in App folder.
Step 4: You can start adding Essential JS 2 component to the application. To get started, add the grid component in app.ts file using the following code.
import { Grid, Page, Selection } from '@syncfusion/ej2-grids';
import { orderData } from './datasource';
Grid.Inject(Page, Selection);
/**
* Local Data sample
*/
let grid: Grid = new Grid(
{
dataSource: orderData,
allowPaging: true,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
{ field: 'CustomerName', headerText: 'Customer Name', width: 150 },
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
{ field: 'ShippedDate', headerText: 'Shipped Date', width: 130, format: 'yMd', textAlign: 'Right' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
],
pageSettings: { pageCount: 5 }
});
grid.appendTo('#grid');
Documentation link: https://ej2.syncfusion.com/documentation/getting-started/
Step 5: Include webpack.config.js file to generated bundled script file and ship bundled file in script folder.
const path = require('path');
const webpack = require('webpack');
const ROOT = path.resolve(__dirname, 'app');
const DESTINATION = path.resolve(__dirname, 'Scripts');
module.exports = {
context: ROOT,
entry: {
'index': './index.js'
},
output: {
filename: '[name].bundle.js',
path: DESTINATION
}
};
Step 6: Refer to the bundled.js file in index.cshtml file.
<script src="~/Scripts/index.bundle.js"></script>
Step 7: Added bundle task scripts section of package.json file
"scripts": {
"build": "tsc && webpack --config webpack.config.js"
},
Step 8: You should add the <Target Name="BeforeBuild"> </ Target > tag in application ‘csproj’ file. Refer to the following code snippet.
<Target Name="BeforeBuild"> <Exec Command="npm install" /> <Exec Command="npm run build" /> </Target> <Target Name="BeforeResolveReference"> <Exec Command="npm install" /> </Target>
Sample link: https://www.syncfusion.com/downloads/support/directtrac/234451/7z/ASPNETMVC-WITH-TYPESCRIPT-748629251.7z
