web api code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication39.Models;
namespace WebApplication39.Controllers
{
public class EmpserviceController : ApiController
{
[HttpGet]
[Route("api/Empservice/")]
public List<EMP> Gets()
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.ToList();
}
}
[HttpGet]
[Route("api/Empservice/Getcountry")]
public List<COUNTRY> Getc()
{
using (Database1Entities obj = new Database1Entities())
{
return obj.COUNTRies.ToList();
}
}
[HttpGet]
[Route("api/Empservice/Getstate/{CID}")]
public List<STATE> Getst(int CID)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.STATEs.Where(m => m.CID == CID).ToList();
}
}
[HttpGet]
[Route("api/Empservice/Get/{EID}")]
public EMP Get(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.Find(EID);
}
}
[HttpPost]
public string Post(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
obj.EMPs.Add(emp);
obj.SaveChanges();
return "Data Saved.";
}
}
[HttpPut]
public string Put(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp1 = obj.EMPs.Find(emp.EID);
emp1.NAME = emp.NAME;
emp1.ADDRESS = emp.ADDRESS;
emp1.PASSWORD = emp.PASSWORD;
emp1.GENDER = emp.GENDER;
emp1.ISMARRIED = emp.ISMARRIED;
emp1.DOB = emp.DOB;
emp1.CID = emp.CID;
emp1.SID = emp.SID;
obj.SaveChanges();
return "Data Updated.";
}
}
[HttpDelete]
[Route("api/Empservice/Delete/{EID}")]
public string Delete(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp = obj.EMPs.Find(EID);
obj.EMPs.Remove(emp);
obj.SaveChanges();
return "Data Deleted.";
}
}
}
}
Angularjs Code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl" style="margin-top:20px">
<div class="container">
<form class="form-horizontal" name="frmEmp" novalidate>
<div class="form-group " ng-class="{'has-error':frmEmp.txtEid.$invalid,'has-success':frmEmp.txtEid.$valid}">
<label class="control-label col-lg-4 ">EID</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP.EID" name="txtEid" required />
</div>
<span class="has-error help-block" ng-show="frmEmp.txtEid.$invalid">
Eid should not be blank.
</span>
</div>
<div class="form-group " ng-class="{'has-error':frmEmp.txtName.$invalid,'has-success':frmEmp.txtName.$valid}">
<label class="control-label col-lg-4 ">NAME</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP.NAME" name="txtName" required />
</div>
<span class="has-error help-block" ng-show="frmEmp.txtName.$invalid">
Name should not be blank.
</span>
</div>
<div class="form-group " ng-class="{'has-error':frmEmp.txtAdd.$invalid,'has-success':frmEmp.txtAdd.$valid}">
<label class="control-label col-lg-4 ">ADDRESS</label>
<div class="col-lg-4">
<textarea class="form-control" ng-model="EMP.ADDRESS" name="txtAdd" required></textarea>
</div>
<span class="has-error help-block" ng-show="frmEmp.txtAdd.$invalid">
Address should not be blank.
</span>
</div>
<div class="form-group " ng-class="{'has-error':frmEmp.txtPwd.$invalid,'has-success':frmEmp.txtPwd.$valid}">
<label class="control-label col-lg-4 ">PASSWORD</label>
<div class="col-lg-4">
<input type="password" class="form-control" ng-model="EMP.PASSWORD" name="txtPwd" required />
</div>
<span class="has-error help-block" ng-show="frmEmp.txtPwd.$invalid">
Password should not be blank.
</span>
</div>
<div class="form-group " ng-class="{'has-error':frmEmp.rb.$invalid,'has-success':frmEmp.rb.$valid}">
<label class="control-label col-lg-4 ">GENDER</label>
<div class="col-lg-4">
<input type="radio" ng-model="EMP.GENDER" name="rb" required value="Male" />Male
<input type="radio" ng-model="EMP.GENDER" name="rb" required value="Female" />Female
</div>
<span class="has-error help-block" ng-show="frmEmp.rb.$invalid">
Please select a gender.
</span>
</div>
<div class="form-group">
<label class="control-label col-lg-4 ">ARE YOU MARRIED ?</label>
<div class="col-lg-4">
<input type="checkbox" ng-model="EMP.ISMARRIED" />
</div>
</div>
<div class="form-group " ng-class="{'has-error':frmEmp.txtDob.$invalid,'has-success':frmEmp.txtDob.$valid}">
<label class="control-label col-lg-4 ">DOB</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP.DOB" name="txtDob" required />
</div>
<span class="has-error help-block" ng-show="frmEmp.txtDob.$invalid">
DOB should not be blank.
</span>
</div>
<div class="form-group " ng-class="{'has-error':frmEmp.ddlCountry.$invalid,'has-success':frmEmp.ddlCountry.$valid}">
<label class="control-label col-lg-4 ">COUNTRY</label>
<div class="col-lg-4">
<select class="form-control" ng-model="EMP.CID" ng-change="fillddl()" name="ddlCountry" ng-options="c.CID as c.CNAME for c in listc" required >
<option value="">Select</option>
</select>
</div>
<span class="has-error help-block" ng-show="frmEmp.ddlCountry.$invalid">
Please select a country.
</span>
</div>
<div class="form-group " ng-class="{'has-error':frmEmp.ddlState.$invalid,'has-success':frmEmp.ddlState.$valid}">
<label class="control-label col-lg-4 ">STATE</label>
<div class="col-lg-4">
<select class="form-control" ng-model="EMP.SID" name="ddlState" ng-options="c.SID as c.SNAME for c in lists" required>
<option value="">Select</option>
</select>
</div>
<span class="has-error help-block" ng-show="frmEmp.ddlState.$invalid">
Please select a state.
</span>
</div>
<div class="form-group">
<label class="control-label col-lg-4 "></label>
<div class="col-lg-4">
<input type="button" value="Save" class="btn btn-primary" ng-click="save(frmEmp.$valid)" style="width:80px" />
<input type="button" value="Update" class="btn btn-primary" ng-click="update(frmEmp.$valid)" style="width:80px" />
<input type="button" value="Reset" class="btn btn-primary" ng-click="reset()" style="width:80px" />
</div>
</div>
<div class="row">
<table class="table table-bordered table-condensed table-hover table-responsive table-striped">
<thead class="bg-primary">
<tr>
<th>EID</th>
<th>NAME</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in liste">
<td>{{c.EID}}</td>
<td>{{c.NAME}}</td>
<td>
<a ng-click="edit(c.EID)">Edit</a>|
<a ng-click="del(c.EID)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
angular.module("app", [])
.controller("ctrl", function ($scope, facEmp) {
function CLR()
{
$scope.EMP = new emp();
} CLR();
function fillCountry()
{
facEmp.Getc().then(function (d) {
$scope.listc = d.data;
});
} fillCountry();
$scope.fillddl = function ()
{
fx($scope.EMP.CID);
}
function fx(s)
{
facEmp.Gets(s).then(function (d) {
$scope.lists = d.data;
});
}
$scope.reset = function ()
{
CLR();
}
$scope.reset = function ()
{
CLR();
}
$scope.save = function (isValid)
{
if (isValid)
{
facEmp.Save($scope.EMP).then(function (d) {
alert(d.data);
fill();
CLR();
});
}
}
function fill()
{
facEmp.Gete().then(function (d) {
$scope.liste = d.data;
});
} fill();
$scope.edit = function (s)
{
facEmp.Get(s).then(function (d) {
fx(d.data.CID);
$scope.EMP = d.data;
var cd = new Date(d.data.DOB);
$scope.EMP.DOB = ((parseInt(cd.getMonth() + 1) < 10 )? '0' + parseInt(cd.getMonth() + 1) : parseInt(cd.getMonth() + 1) )+ '-' +( (cd.getDate() < 10 )? '0' + cd.getDate() : cd.getDate() )+ '-' + cd.getFullYear();
});
}
$scope.update = function (isValid) {
if (isValid) {
facEmp.Update($scope.EMP).then(function (d) {
alert(d.data);
fill();
CLR();
});
}
}
$scope.del = function (s)
{
if (confirm('Do you want to delete it ?'))
{
facEmp.Delete(s).then(function (d) {
alert(d.data);
fill();
});
}
}
})
.factory("facEmp", function ($http)
{
var empobj = {};
empobj.Getc = function ()
{
return $http.get("http://localhost:57695/api/Empservice/Getcountry");
}
empobj.Gets = function (CID) {
return $http.get("http://localhost:57695/api/Empservice/Getstate/"+CID);
}
empobj.Save = function (EMP)
{
return $http.post("http://localhost:57695/api/Empservice/Post", EMP);
}
empobj.Update = function (EMP) {
return $http.put("http://localhost:57695/api/Empservice/Put", EMP);
}
empobj.Gete = function ()
{
return $http.get("http://localhost:57695/api/Empservice");
}
empobj.Get = function (EID) {
return $http.get("http://localhost:57695/api/Empservice/Get/" + EID);
}
empobj.Delete = function (EID) {
return $http.delete("http://localhost:57695/api/Empservice/Delete/" + EID);
}
return empobj;
});
function emp()
{
return{
EID:null,
NAME:null,
ADDRESS:null,
PASSWORD: null,
GENDER:null,
ISMARRIED: true,
DOB: null,
CID: null,
SID:null
}
}
</script>
