Asp.net MVC and Angular

Tuesday 12 March 2019

DataTable

//Setting json from direct ajax request

$.ajax({

url: "/home/EventsNonReproList",

contentType: "application/json",

beforeSend: function () {

success: function (result) {

if (result.length > 0) {

listOfEventsNonRepro = result;

$('#example2').DataTable({

data: result,

deferRender: true,

scrollY: 400,

scrollCollapse: true,

scroller: true,

ordering: false,

//createdRow: function (row, data, index) {

// if (NonReproOnlyEvents.filter(x => x.sno == data.sno).length > 0) {

// $(row).addClass('red ' + data.sno);

// }

//},

search: {

"caseInsensitive": true

columns: [

{ "data": "sno" },

{ "data": "message" }

]

});

$("#example2_filter").hide();

}

});

// For search :

var table = $('#example').DataTable();

table.search($("#searchCriteria").val()).draw();

//Setting json from other ajax and settign to data object in DataTable :

var table2 = $('#example2').DataTable();

table2.data-yourJSON;

table2.draw();

Sunday 3 February 2019

Tuesday 29 January 2019

Part 2 : Basic textbox and javascript button click Event

In this we will see how we construct the page with basic table and basic javascript button event as below :

<html>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function () {
console.log("welcome"); 



$("#btnSave").click(function()
{
console.log("Student Name is : " +$("#txtName").val());
console.log("Student Address is: " +$("#txtAddress").val());
});

});

</script>
<style>

h1{
color: blue;
}

</style>
</head>

<body>

<h1>Student Registeration</h1>

<table>

<tr>
<td>Name : </td>
<td> <input type="text" id="txtName" /></td>
</tr>
<tr>
<td>Address : </td>
<td> <input type="text" id="txtAddress" /></td>
</tr>

</table>

<input type="button" id="btnSave" value="Save"/>

</body>
</html>

GitHub repo : https://github.com/vinodvskp/WebTraining/blob/master/part2.htm

After running the page you need , enter some name and address in the textboxes , click on the save button , press f12 open the developer tools you will see below output :

Friday 25 January 2019

ClientSide Training

Topics :

- Html
- CSS (Cascading style sheet)
- Javascripts

HTML (HyperText markup language)

HTML is markup language which deals with the page construction.
Page Extentions : .htm and .html
Similar to XML syntax's , html tags has beginning tag and ending tag .

Html page can be constructed with the html tags similar to below :

*Note : " " is comments syntax in the html

Demo.html

<html>

<head>

<style>
h1
{
color:blue;
}
</style>

</head>

<body> 
<h1>Main Content of the page goes here </h1>
</body>

</html>

You can just make a trail by copying the above entire html content from <Html> till end and paste in the notepad and save with .htm or .html extention , click on the file which saved ,then open in the browser you can see the below output :

Wednesday 9 January 2019

Angular interceptors sample code

Angular Interceptors :

Interceptors generally used to modify the request before sending the request to the server and modifying the response after receiving the response from the server before passing to the application code .

Here is the sample code for angular interceptors :

DemoInterceptor.ts

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class DemoInterceptor implements HttpInterceptor
{
intercept(req : HttpRequest<any>,next : HttpHandler) : Observable<HttpEvent<any>>
{
let request : HttpRequest<any> = req.clone({
setHeaders :
{
"Authorization" : "customtoken"
}
});
return next.handle(request);
}
}

Once the above code snippet is used then , we need to configure the interceptor in the app.module.ts
providers sections like below :

app.module.ts :

providers: [
{
provide : HTTP_INTERCEPTORS , useClass : DemoInterceptor,multi:true
}

]

After these configurations we can see the request headers for all request contains the "Authorization" in the request header:

Tuesday 8 January 2019

Different ways of Registering service in angular

There are various of registering a class as a dependency in angular.

1. Registering globally to root [This will be available to entire application]:

LocalServicesService .service.ts
@Injectable({
providedIn: 'root'
})

export class LocalServicesService {
getDetails (){}
}

Now if the class is registered as injectable then we can use this class any where in the entire solution as dependency class for ex like this :

HeaderComponent.ts
@Component({
selector: '',
templateUrl: '',
providers: []
})
export class HeaderComponent implements OnInit {
constructor(private service : LocalServicesService) { }
ngOnInit() {
this.service.getDetails().subscribe();
}
}

2. Registering service to specific component

LocalServicesService .service.ts

@Injectable()
export class LocalServicesService {
getDetails (){}
}

HeaderComponent.ts

@Component({
selector: '',
templateUrl: '',
providers: [LocalServicesService]
})
export class HeaderComponent implements OnInit {
constructor(private service : LocalServicesService) { }

ngOnInit() {
this.service.getDetails().subscribe();
}
}

In this scenario the LocalServices class can be injectable to only HeaderComponent

Sunday 6 January 2019

Debugging in Angular with Visual studio code

Setting up debug steps for Visual studio code :

1. In the above screenshot , click on debug menu from the left panel

2. You need to setup the launch.json file with the below code changes :

"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
3. Make sure for chrome you need to install the debug for chrome extension .

4. Run the angular project , put the break point where ever required.