Web api code :
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/Doorservices")]
public class DoorservicesController : ApiController
{
[Route("Gets")]
[HttpGet]
public IHttpActionResult Gets()
{
try {
using (Database1Entities obj = new Database1Entities())
{
return Ok(obj.EMPs.ToList());
}
}
catch (Exception ex){
return BadRequest(ex.Message);
}
}
[Route("Get/{EID:int}",Name ="EMP")]
[HttpGet]
public IHttpActionResult Get(int EID)
{
try
{
using (Database1Entities obj = new Database1Entities())
{
return Ok(obj.EMPs.SingleOrDefault(e=>e.EID==EID));
}
}
catch (Exception ex)
{
return BadRequest(ex.Message);
}
}
[Route("Save")]
[HttpPost]
public IHttpActionResult Save(EMP emp)
{
try
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(emp).State = EntityState.Added;
obj.SaveChanges();
return Created(new Uri(Url.Link("EMP",new { EID=emp.EID})), "Data Saved.");
}
}
catch (Exception ex)
{
return BadRequest(ex.Message);
}
}
[Route("Update/{EID:int}")]
[HttpPut]
public IHttpActionResult Update([FromUri]int EID,[FromBody]EMP emp)
{
try
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(emp).State = EntityState.Modified;
obj.SaveChanges();
return Ok("Data Updated");
}
}
catch (Exception ex)
{
return BadRequest(ex.Message);
}
}
[Route("Delete/{EID:int}")]
[HttpDelete]
public IHttpActionResult Delete([FromUri]int EID)
{
try
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(obj.EMPs.Find(EID)).State = EntityState.Deleted;
obj.SaveChanges();
return Ok("Data Deleted");
}
}
catch (Exception ex)
{
return BadRequest(ex.Message);
}
}
}
}
angularjs code
Model code;
export class DoorModel {
EID: number;
NAME: string;
}
Service code :
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { DoorModel } from '../door/doormodel';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class DoorServices {
baseUrl = 'http://localhost:2813/api/Doorservices';
constructor(private _http: HttpClient) {
}
Save(emp: DoorModel): Promise<string> {
return this._http.post<string>(`${this.baseUrl}/${'Save'}`, JSON.stringify(emp),
{ headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }).toPromise();
}
Gets(): Promise<DoorModel[]> {
return this._http.get<DoorModel[]>(`${this.baseUrl}/${'Gets'}`).toPromise();
}
Get(eid: number): Promise<DoorModel> {
return this._http.get<DoorModel>(`${this.baseUrl}/${'Get'}/${eid}`)
.toPromise();
}
Update(emp: DoorModel): Promise<string> {
return this._http.put<string>(`${this.baseUrl}/${'Update'}/${emp.EID}`
, JSON.stringify(emp), { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) })
.toPromise();
}
Delete(eid: number): Promise<string> {
return this._http.delete<string>(`${this.baseUrl}/${'Delete'}/${eid}`)
.toPromise();
}
}
Component code :
import { Component, OnInit } from '@angular/core';
import { DoorModel } from '../door/doormodel';
import { DoorServices } from '../door/door.services';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
EMP: DoorModel;
list: DoorModel[];
constructor(private ds: DoorServices) { }
ngOnInit() {
this.CLR();
this.fill();
}
CLR(): void {
this.EMP = {
EID: null,
NAME: null
};
}
save(Isvalid: boolean): void {
if (Isvalid) {
this.ds.Save(this.EMP).then(data => {
alert(data);
this.CLR();
this.fill();
});
}
}
update(Isvalid: boolean): void {
if (Isvalid) {
this.ds.Update(this.EMP).then(data => {
alert(data);
this.CLR();
this.fill();
});
}
}
reset(ngfrm: NgForm): void {
ngfrm.reset();
}
fill(): void {
this.ds.Gets().then(data => this.list = data);
}
Edit(eid: number): void {
this.ds.Get(eid).then(data => this.EMP = data);
}
del(eid: number): void {
if (confirm('Do you want to delete it ?')) {
this.ds.Delete(eid).then(data => {
alert(data);
this.fill();
});
}
}
}
view code :
<form class="form-horizontal" #empform="ngForm">
<div class="form-group " [class.has-error]="EID.invalid && EID.touched" [class.has-success]="EID.valid">
<label class="control-label col-lg-4">EID</label>
<div class="col-lg-4">
<input type="text" class="form-control" [(ngModel)]="EMP.EID" #EID="ngModel" required name="EID" />
</div>
<span class="help-block has-error" *ngIf="EID.invalid && EID.touched">
Eid should not be blank.
</span>
</div>
<div class="form-group " [class.has-error]="NAME.invalid && NAME.touched" [class.has-success]="NAME.valid">
<label class="control-label col-lg-4">NAME</label>
<div class="col-lg-4">
<input type="text" class="form-control" [(ngModel)]="EMP.NAME" #NAME="ngModel" required name="NAME" />
</div>
<span class="help-block has-error" *ngIf="NAME.invalid && NAME.touched">
Name should not be blank.
</span>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-4">
<input type="button" value="Save" (click)="save(empform.valid)" style="width:80px" class="btn btn-primary" />
<input type="button" value="Update" (click)="update(empform.valid)" style="width:80px" class="btn btn-primary" />
<input type="button" value="Reset" (click)="reset(empform)" style="width:80px" class="btn btn-primary" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-4">
<table class="table table-bordered table-condensed table-hover table-responsive table-striped">
<thead class="bg bg-primary">
<tr>
<th>Sl NO.</th>
<th>EID</th>
<th>NAME</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of list;let i=index">
<td>{{i+1}}</td>
<td>{{c.EID}}</td>
<td>{{c.NAME}}</td>
<td>
<a (click)="Edit(c.EID)">Edit</a> |
<a (click)="del(c.EID)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
No comments:
Post a Comment