How to use Syncfusion EJ2 Angular Components with ASP.NET Web Forms

Overview

This article is about using Syncfusion EJ2 Angular components with ASP.NET Web Forms application as frontend even though Syncfusion Angular components do not have any direct support for ASP.NET Web Forms.

Prerequisite

Node
NPM
TypeScript
Angular CLI

You can find the details to install these software/packages in the following sections.

Installing Node & NPM

Download the LTS (Long Time Support) version windows setup from the following link for installing Node.js on your machine.

https://nodejs.org/en/

NPM (Node Package Manager) will be installed automatically along with Node.js setup.

Installing TypeScript

You can refer to the following TypeScript documentation to install this package globally on your machine.

https://www.typescriptlang.org/download/

Typescript installation

Installing Angular CLI

Follow the details in the below Angular CLI documentation to install it globally on your machine.

https://cli.angular.io/

Angular CLI installation

Creating ASP.NET Web Forms Application

Open the Visual Studio and create an ASP.NET Web Forms application using the “ASP.NET Web Forms Website” template.

Web Forms project creation

Solution Explorer

Creating Angular application in ASP.NET Web Forms Project

Open the Visual Studio Developer Command Prompt by navigating to the Tools sections of the VS Toolbar.

Tools menu in VS Toolbar

Then, navigate to “Command Line à Developer Command Prompt” menu.

Open Command Prompt

Run the “ng new AngularApp” command to Angular application.

ng new AngularApp

Angular App creation

Installing Syncfusion Angular Package

Once the application is created, move to the root directory of the Angular application using the “cd AngularAPP” command.

navigating to angular app

You can refer the following documentation for integrating Syncfusion Angular Components in Angular application.

https://ej2.syncfusion.com/angular/documentation/grid/getting-started/

Angular App in Web Forms

Build & Link Angular Application with Web Forms

Build the Angular application using the following command.

ng build –base-href /AngularApp/dist

build angular app

dist folder

Manually, include the script files in dist folder into “Default.aspx” page as follows.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormsAngular.Default" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AngularApp</title>
    <base href="/AngularApp/dist"/>
    <link rel="stylesheet" href="dist/AngularApp/styles.c31ec2f3a2b30ecd09ea.css" />
</head>
<body>
    <form id="form1" runat="server">
        <app-root></app-root>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"></script>
        <script type="text/javascript" src="dist/AngularApp/main-es5.68ed9c50fc0f0ce3c9de.js"></script>
        <script type="text/javascript" src="dist/AngularApp/polyfills-es5.8e50a9832860f7cf804a.js"></script>
        <script type="text/javascript" src="dist/AngularApp/runtime-es5.c5fa8325f89fc516600b.js"></script>
    </form>
</body>
</html>

Conclusion

Now, build and run the application to render the Syncfusion EJ2 Angular Grid frontend from ASP.NET Web Forms.

grid rendered image

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebFormsAngular-1066882770

Did you find this information helpful?

Yes

Comments (0)