DOTNET POINT: March 2019

Web api :

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication5.Models;

namespace WebApplication5.Controllers
{
[RoutePrefix("api/Pgs")]
public class PgsController : ApiController
{
[HttpGet]
[Route("Countries")]
public IHttpActionResult Countries()
{
try
{
using (Database1Entities obj = new Database1Entities())
{
return Ok(obj.COUNTRies.ToList());
}
}
catch(Exception ex)
{
return InternalServerError(ex);
}
}
[HttpGet]
[Route("State/{CID:int}")]
public IHttpActionResult State(int CID)
{
try
{
using (Database1Entities obj = new Database1Entities())
{
return Ok(obj.STATEs.Where(m=>m.CID==CID).ToList());
}
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}
[HttpGet]
[Route("PGS")]
public IHttpActionResult PGS()
{
try
{
using (Database1Entities obj = new Database1Entities())
{
return Ok(obj.PGS1.ToList());
}
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}
[HttpGet]
[Route("Gets/{EID:int}")]
public IHttpActionResult Gets(int EID)
{
try
{
using (Database1Entities obj = new Database1Entities())
{
return Ok(obj.PGS1.Find(EID));
}
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}
[HttpGet]
[Route("Get/{EID:int}",Name ="PG1")]
public IHttpActionResult Get(int EID)
{
try
{
using (Database1Entities obj = new Database1Entities())
{
return Ok(obj.PGS1.Find(EID));
}
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}
[HttpPost]
[Route("Save")]
public IHttpActionResult Save(PG1 vm)
{
try
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(vm).State = EntityState.Added;
obj.SaveChanges();
return Created(Url.Link("PG1", new { EID = vm.EID }),"Data Saved.");
}
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}
[HttpPut]
[Route("Update")]
public IHttpActionResult Update(PG1 vm)
{
try
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(vm).State = EntityState.Modified;
obj.SaveChanges();
return Ok("Data Updated.");
}
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}
[HttpDelete]
[Route("Delete/{EID:int}")]
public IHttpActionResult Delete(int EID)
{
try
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(obj.PGS1.Find(EID)).State = EntityState.Deleted;
obj.SaveChanges();
return Ok("Data Deleted.");
}
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}

}
}

First you install ngx-bootstrap for modal popup & datepicker using below command

npm install ngx-bootstrap@2.0.5 --save
or
npm install ngx-bootstrap@3.0.1 --save

After that you inject in app.module file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CreateempComponent } from './emp/createemp.component';
import { FormsModule } from '@angular/forms';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { ModalModule } from 'ngx-bootstrap';
import { EmpServices } from './emp/emp.services';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [
AppComponent,
CreateempComponent
],
imports: [
BrowserModule,
FormsModule,
BsDatepickerModule.forRoot(),
ModalModule.forRoot(),
HttpClientModule
],
providers: [EmpServices],
bootstrap: [AppComponent]
})
export class AppModule { }

Angular Model :

export class COUNTRY {

CID: number;

CNAME: string;

}

export class STATE {

SID: number;

SNAME: string;

CID: number;

}

export class IPGS {

EID: number;

NAME: string;

DOJ: Date;

CID: number;

SID: number;

}

Angular Service:

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { IPGS, COUNTRY, STATE } from './emp.model';

import 'rxjs/add/operator/toPromise';

@Injectable()

export class EmpServices {

baseUrl = 'http://localhost:2813/api/Pgs';

constructor(private http: HttpClient) {

}

Getc(): Promise<COUNTRY[]> {

return this.http.get<COUNTRY[]>(`${this.baseUrl}/${'Countries'}`)

.toPromise();

}

Gets(cid: number): Promise<STATE[]> {

return this.http.get<STATE[]>(`${this.baseUrl}/${'State'}/${cid}`)

.toPromise();

}

Get(eid: number): Promise<IPGS> {

return this.http.get<IPGS>(`${this.baseUrl}/${'Gets'}/${eid}`)

.toPromise();

}

Getp(): Promise<IPGS[]> {

return this.http.get<IPGS[]>(`${this.baseUrl}/${'PGS'}`)

.toPromise();

}

Save(vm: IPGS): Promise<string> {

return this.http.post<string>(`${this.baseUrl}/${'Save'}`

, JSON.stringify(vm)

, { headers : new HttpHeaders({'Content-Type': 'application/json' })}

).toPromise();

}

Update(vm: IPGS): Promise<string> {

return this.http.put<string>(`${this.baseUrl}/${'Update'}`

, JSON.stringify(vm)

, { headers : new HttpHeaders({'Content-Type': 'application/json' })}

).toPromise();

}

Delete(eid: number): Promise<string> {

return this.http.delete<string>(`${this.baseUrl}/${'Delete'}/${eid}`

, { headers : new HttpHeaders({'Content-Type': 'application/json' })}

).toPromise();

}

Angular Component :

import { Component, OnInit, TemplateRef } from '@angular/core';

import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

import {IPGS, COUNTRY, STATE} from './emp.model';

import { EmpServices } from './emp.services';

import { NgForm } from '@angular/forms';

@Component({

selector: 'app-createemp',

templateUrl: './createemp.component.html',

styleUrls: ['./createemp.component.css']

})

export class CreateempComponent implements OnInit {

modalRef: BsModalRef;

PGS: IPGS;

listc: COUNTRY[];

lists: STATE[];

list: IPGS[];

eid: number;

header: string;

constructor(private modalService: BsModalService, private es: EmpServices) { }

ngOnInit() {

this.CLR();

this.es.Getc().then(data => this.listc = data);

this.fill();

}

openModal(template: TemplateRef<any>) {

this.header = 'Add New';

this.CLR();

this.modalRef = this.modalService.show(template);

}

fillddl(): void {

this.fx(this.PGS.CID);

}

fx(cid: number): void {

this.es.Gets(cid).then(data => {

this.lists = data;

});

}

save(isValid: boolean): void {

if (isValid === false) {

if (this.eid === undefined) {

this.es.Save(this.PGS).then(data => {

alert(data);

this.fill();

this.modalService.hide(1);

});

} else {

this.es.Update(this.PGS).then(data => {

alert(data);

this.fill();

});

}

this.modalService.hide(1);

}

edit(id: number, template: TemplateRef<any>): void {

this.header = 'Edit';

this.eid = id;

this.es.Get(id).then(data => {

this.PGS = data;

const dt = new Date(this.PGS.DOJ);

const dt1 = (dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear();

this.PGS.DOJ = new Date(dt1);

this.fx(this.PGS.CID);

});

this.modalRef = this.modalService.show(template);

}

del(id: number, template1: TemplateRef<any>): void {

this.eid = id;

this.modalRef = this.modalService.show(template1);

}

yes(): void {

this.es.Delete(this.eid).then(data => {

alert(data);

this.fill();

this.modalService.hide(1);

});

}

fill(): void {

this.es.Getp().then(data => this.list = data);

}

reset(): void {

this.CLR();

}

CLR(): void {

this.PGS = {

EID: null,

NAME: null,

DOJ: null,

CID: null,

SID: null

};

this.eid = undefined;

}

Angular Html :

</div><br>

<tr>

<th>ACTION</th>

</tr>

</thead>

<tbody>

<td>

<button type="button" style="width:70px" class="btn btn-primary" (click)="edit(c.EID,template)">Edit</button> |

<button type="button" (click)="del(c.EID,template1)" style="width:70px" class="btn btn-primary" >Delete</button>

</td>

</tr>

</tbody>

</table>

</div>

<ng-template #template>

<h4 class="modal-title pull-left">{{header}}</h4>

</button>

</div>

</div>

<span class="help-block" *ngIf="EID.invalid && EID.touched">Eid should not be blank.</span>

</div>

</div>

<span class="help-block" *ngIf="NAME.invalid && NAME.touched">Name should not be blank.</span>

</div>

</div>

<span class="help-block" *ngIf="DOB.invalid && DOB.touched">Name should not be blank.</span>

</div>

<label class="control-label col-lg-2">COUNTRY</label>

<option [ngValue]="null">Select</option>

<option *ngFor="let c of listc" [value]="c.CID">{{c.CNAME}}</option>

</select>

</div>

<span class="help-block" *ngIf="CID.invalid && CID.touched">Please select a country.</span>

</div>

<label class="control-label col-lg-2">STATE</label>

<option [ngValue]="null">Select</option>

<option *ngFor="let c of lists" [value]="c.SID">{{c.SNAME}}</option>

</select>

</div>

<span class="help-block" *ngIf="SID.invalid && SID.touched">Please select a state.</span>

</div>

</form>

</div>

</div>

</ng-template>

<ng-template #template1>

<h4 class="modal-title pull-left">Alert Message</h4>

</button>

</div>

<h2>Do you want to delete it ?</h2>

</div>

</div>

</ng-template>

DOTNET POINT

Monday 4 March 2019

CRUD operation using webapi2, angular6 & ngx-bootstrap modal & datepicker