After De-Activating row from my data table, I am refreshing my table.I pass the load function after deactivate function but problem is that i have to click twice and sometimes it goes with one click.
I am using MVC5. I put the debug on my C# file and everytime i click Deactivate debugger going to load function.
Below is my code :
<div style="margin-top:60px">
<h1 style="float:left">All Machines</h1>
<button (click)="OnSave()" style="float:right;background-color:aqua;color:black" class="md-button md-primary md-raised">
Add New Machine
</button>
<table class="table" style="width:100%; background-color:#E0F2F1">
<thead>
<tr>
<th style="text-align:center">
Id
</th>
<th style="text-align:center">
Machine Number
</th>
<th style="text-align:center">
Manufacturer
</th>
<th style="text-align:center">
Model#
</th>
<th style="text-align:center">
Serial#
</th>
<th style="text-align:center">
Tonnage
</th>
<th style="text-align:center">
Shot Weight
</th>
<th style="text-align:center">
De-Activate
</th>
</tr>
<tr></tr>
</thead>
<tbody>
<tr *ngFor="let MyMachine of MyMachines">
<td style="text-align:center">{{MyMachine.t_id}}</td>
<td style="text-align:center">{{MyMachine.t_Machine}}</td>
<td style="text-align:center">{{MyMachine.t_manufacturer}}</td>
<td style="text-align:center">{{MyMachine.t_model}}</td>
<td style="text-align:center">{{MyMachine.t_Serial}}</td>
<td style="text-align:center">{{MyMachine.t_ClampingForce}}</td>
<td style="text-align:center">{{MyMachine.t_ShotWt}}</td>
<td><button (click)="OnDeactivate(MyMachine.t_id)" style="float:right;background-color:aqua;color:black" class="md-button md-primary md-raised">De-Activate</button></td>
</tr>
</tbody>
</table>
</div>
2) Component
import { Component, OnInit } from '@angular/core';
import { AllMachines } from './app.service'
@Component({
selector: 'my-app',
templateUrl: './MachineList.html'
})
export class AppComponent implements OnInit {
MyMachines: any = [];
constructor(private _AllMachines: AllMachines) {
}
ngOnInit() {
this.LoadData();
}
OnSave() {
this._AllMachines.AddNewMachine('bbb', 'bbb', 'bbb');
}
OnDeactivate(id: string) {
this._AllMachines.DeActivateMachine(id);
this.LoadData();
}
LoadData() {
this._AllMachines.getAllMachines()
.subscribe(resmachineData => this.MyMachines = resmachineData);
}
}
3) Service
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class AllMachines {
private configUrl: string = "/Home/GetAllMachines";
private AddUrl: string = "/Home/AddNewMachine";
private UpdateUrl: string = "/Home/UpdateMachine";
private DeActivateUrl: string = "/Home/DeActivateMachine";
constructor(private http: Http) { }
headers = new Headers({
'Content-Type': 'application/json'
});
getAllMachines() {
return this.http.get(this.configUrl)
.map((response: Response) => response.json());
}
AddNewMachine(_MachineNum: string, _Manufatured: string, _MachineModel: string) {
let body = JSON.stringify({ MachineNum: _MachineNum, Manufatured: _Manufatured, MachineModel: _MachineModel });
let headers = new Headers({ 'content-type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post(this.AddUrl, body, options).subscribe(
data => console.log(data),
err => console.log(err.json().message),
() => console.log('Authentication Complete')
);
}
UpdateMachine(_MachineId: string, _MachineNum: string, _Manufacturer: string, _Model: string, _Serial: string, _Tonnage: string, _ShotWt: string) {
let body = JSON.stringify({ MachineId: _MachineId, MachineNum: _MachineNum, Manufacturer: _Manufacturer, Model: _Model, Serial: _Serial, Tonnage: _Tonnage, ShotWt: _ShotWt });
let headers = new Headers({ 'content-type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post(this.UpdateUrl, body, options)
.subscribe(
data => console.log(data),
err => console.log(err.json().message),
() => console.log('Authentication Complete')
);
}
DeActivateMachine(_MachineId: string) {
let body = JSON.stringify({ MachineId: _MachineId });
let headers = new Headers({ 'content-type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post(this.DeActivateUrl, body, options)
.subscribe(
data => console.log(data),
err => console.log(err.json().message),
() => console.log('Authentication Complete')
);
}
}
I am using MVC5. I put the debug on my C# file and everytime i click Deactivate debugger going to load function.