Skip to main content

Angular 6 Integration With ASP.NET ASPX Page

In this blog, I will explain how to integrate Angular 6 within your existing ASP.NET project where your pages are in .aspx.
 
Setting up Angular 6 to a new machine.
 
Step 1 - Install NodeJS
 
You can install node.js and npm from the below URL.

https://nodejs.org/en/download/

For Angular 6, you have to install Node8.x and after successful installation, you can check version: node -v from command prompt.

Use npm -v to check NPM version. NPM should be 5.X
 
Step 2 - Then, install the Angular CLI globally. 
 
Command to install,

npm install -g @angular/cli
command to check version:
tsc -v
 
Given below is the .aspx code where I am using <app-root name="list-user"></app-root> and added reference of the JS files.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList.aspx.cs" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <base href="/">  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.     <div>  
  13.     <app-root name="list-user"></app-root>  
  14.     <script src="../AngularApp/dist/my-new-angular-app/main.js"></script>  
  15.     <script src="../AngularApp/dist/my-new-angular-app/polyfills.js"></script>  
  16.     <script src="../AngularApp/dist/my-new-angular-app/runtime.js"></script>  
  17.     <script src="../AngularApp/dist/my-new-angular-app/styles.js"></script>  
  18.     <script src="../AngularApp/dist/my-new-angular-app/vendor.js"></script>  
  19.     </div>  
  20.     </form>  
  21. </body>  
  22. </html>  
The app.component.ts file where app-root directive code -
  1. import { Component, Input, ElementRef } from '@angular/core';  
  2. import { Router, ActivatedRoute } from '@angular/router';  
  3.   
  4.  
  5. @Component({  
  6.     
  7. selector: 'app-root',  
  8.     
  9. templateUrl: './app.component.html',  
  10.     
  11. styleUrls: ['./app.component.css']  
  12. })  
  13.   

  15. export class AppComponent {  
  16.     @Input('name') name: string;  
  17.     title = 'app';  
  18.   
  19.     constructor(private router: Router, private route: ActivatedRoute, private eleRef: ElementRef) { }  
  20.   
  21.     ngOnInit(): void {  
  22.         let prop = this.eleRef.nativeElement.getAttribute('name');  
  23.         switch (prop) {  
  24.             case "testmodule":  
  25.                 this.router.navigate(['/testAJ.aspx']);  
  26.                 break;  
  27.             case "list-user":  
  28.                 this.router.navigate(['/UserList.aspx']);  
  29.                 break;  
  30.             default:  
  31.                 this.router.navigate(['/']);  
  32.                 break;  
  33.         }  
  34.     }  
  35. }  
app-routing.modules.ts
Now, create an array of routes where we have defined which component will be called and after that, register this into Root Module. Now, you can output this routing component via the <router-outlet> component.Module.
  1. import { NgModule, ModuleWithProviders  } from '@angular/core';  
  2. import { RouterModule, Routes  } from '@angular/router';  
  3.   
  4. import { ListUserComponent } from './listModule/list-user.component';  
  5.   
  6. const routes: Routes = [  
  7.     { path: 'testAJ.aspx', component: TestModuleComponent },  
  8.     { path: 'UserList.aspx', component: ListUserComponent }  
  9. ];  
  10. export const routing = RouterModule.forRoot(routes);  
Add this in app.component.html,
  1. <router-outlet></router-outlet>  
Model Class
  1. export class State {  
  2.     stateID: string;  
  3.     stateName: string;  
  4. }  
Service Class
  1. import { Injectable } from '@angular/core';  
  2. import { HttpClient, HttpHeaders } from '@angular/common/http';  
  3. import { State } from "../model/state.model";  
  4.   
  5. let httpOptions = {  
  6.     headers: new HttpHeaders({  
  7.         'Content-Type': 'application/json',  
  8.         'Cache-Control': 'no-cache'  
  9.     })  
  10. };  
  11.   
  12. @Injectable()  
  13.   
  14. export class UserService {  
  15.     constructor(private http: HttpClient) { }  
  16.     baseUrl: string = 'put your Api here'  
  17.   
  18.     getSatesByCountryCode(_countryCode: string) {  
  19.         let body = JSON.stringify({ CountryCode: _countryCode });  
  20.         return this.http.post(this.baseUrl + 'GetStatebyCountryId', body, httpOptions);  
  21.     }    
  22. }  
The list-user.component.ts file -
  1. import { Component, OnInit } from '@angular/core';  
  2. import { Router } from "@angular/router";  
  3. import { UserService } from "../service/user.service";  
  4. import { State } from "../model/state.model";  
  5. import { products } from '../model/products';  
  6.   
  7. @Component({  
  8.     selector: 'list-user',  
  9.     templateUrl: './list-user.component.html'  
  10. })  
  11.   
  12. export class ListUserComponent {  
  13.     states: any = [];  
  14.    
  15.     constructor(private router: Router, private userService: UserService) { }  
  16.   
  17.     ngOnInit() {  
  18.         this.userService.getSatesByCountryCode('001')  
  19.             .subscribe(data => {  
  20.                 this.states = data;  
  21.                 this.states = JSON.parse(this.states.d);  
  22.             }, error => {   
  23.                 console.log(error);  
  24.             }  
  25.         );  
  26.     }  
  27. }  
The list-user.component.html file.
  1. <table>  
  2.     <thead>  
  3.         <tr>  
  4.             <th>State ID</th>  
  5.             <th>State Name</th>  
  6.         </tr>  
  7.     </thead>  
  8.     <tbody>  
  9.         <tr *ngFor="let state of states">  
  10.             <td>{{state.StateID}}</td>  
  11.             <td>{{state.StateName}}</td>  
  12.         </tr>  
  13.     </tbody>  
  14. </table>  
  15.   
Conclusion
In this article, I have explained how to call the API from service and bind the data to HTML page with use of Angular 6 and ASP.NET. In my next blog, I will show how to use Kendo UI with Angular 6.

Below is the screenshot of output in the browser.
 
 

Comments

Post a Comment

Popular posts from this blog

How to Impliment pagging in SQL queries using ROW_NUMBER

  Create  PROCEDURE dbo.GetPaggingOnProc (     @startRowIndex int,     @maximumRows int ) AS    select RowRank,Column1,Column2,Column3  FROM    (       select Column1,Column2,Column3  ,               ROW_NUMBER() OVER (ORDER BY SADShiftCtrl) AS RowRank        from tblTestABC     ) AS tblTestABCWithRowNumbers WHERE RowRank > @startRowIndex AND RowRank <= (@startRowIndex + @maximumRows)
Post a Comment
Read more

Kendo UI DropDown With Multiple Check Boxes

In this blog, I will demonstrate how to create a Multiple Selection DropDownList with the help of Kendo UI. This dropdown will allow you to select more than one item and will also show the number of checked items in a dropdown list. Ex. (2 items selected). There is an option to Select all checkboxes to check all items at a time and a  Search filter is also integrated with this dropdown. Background Well, first of all, I am using a hidden field where I can put all the checked value with comma separated. This hidden field is used for managing all checked and unchecked values and keeps the values checked when the user opens the dropdown again. Below is the bunch of code. function  bindddlMultiSkill()   {       $( "#ddlMultiSkill" ).kendoDropDownList({           name:  "skill" ,           dataTextField:...
Post a Comment
Read more

(3).Prepare c# besics and advanced questions

Question 1. What Is Attribute In C#? Answer : An attributes is a declarative tag that is used to convey information about the behaviors of various elements (classes, methods, assemblies, structures, enumerators, etc). it is access at compile time or run-time. Attributes are declare with a square brackets [] which is places above the elements. [Obsolete(“Don’t use Old method, please use New method”, true)] For example consider the bellow class. If we call the old method it will through error message. public class myClass {     [Obsolete("Don't use Old method, please use New method", true)]     public string Old() { return "Old"; }     public string New() { return "New"; } } myClass omyClass = new myClass(); omyClass.Old(); Question 2. Why Attributes Are Used? Answer : In a program the attributes are used for adding metadata, like compiler instruction or other information (comments, description, etc). C#. NET Inter...
Post a Comment
Read more