Service Code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MvcApplication4.Models;
namespace MvcApplication4.Controllers
{
public class ValuesController : ApiController
{
[HttpGet]
public List<COUNTRY> Getc()
{
using (Database1Entities obj = new Database1Entities())
{
return obj.COUNTRies.ToList();
}
}
[HttpGet]
public List<STATE> Gets(int CID)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.STATEs.Where(m => m.CID == CID).ToList();
}
}
[HttpGet]
public List<EMP> Gete(string s)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.ToList();
}
}
[HttpGet]
public EMP Get(int EID,int i)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.SingleOrDefault(m=>m.EID==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.SingleOrDefault(m => m.EID == emp.EID);
emp1.NAME = emp.NAME;
emp1.ADDRESS = emp.ADDRESS;
emp1.PASSWORD = emp.PASSWORD;
emp1.GENDER = emp.GENDER;
emp1.ISMARRIED = emp.ISMARRIED;
emp1.CID = emp.CID;
emp1.SID = emp.SID;
emp1.DOB = emp.DOB;
emp1.SALARY = emp.SALARY;
obj.SaveChanges();
return "Data Updated.";
}
}
[HttpDelete]
public string Delete(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == EID);
obj.EMPs.Remove(emp1);
obj.SaveChanges();
return "Data Deleted.";
}
}
}
}
Angular js code:
/// <reference path="angular.js" />
angular.module("app", [])
.filter("Cfilter", function ()
{
return function (EID)
{
switch (EID)
{
case 1:
return "Jay Jagannath";
case 2:
return "Balram";
case 3:
return "Ram";
default:
return "Balram";
}
}
})
.controller("ctr", function ($scope, EMPService) {
var k;
$('.c').datepicker({ format: 'yyyy-mm-dd' }).on("change", function () {
k = $(this).val();
});
function CLR()
{
$scope.EMP = new emp();
$scope.lists = null;
$scope.caption = null;
$('#tb').focus();
} CLR();
function fill()
{
EMPService.Gete().then(function (d) {
$scope.list = d.data;
});
} fill();
function ddl()
{
EMPService.Getc().then(function (d) {
$scope.listc = d.data;
});
} ddl();
$scope.fillddl = function ()
{
fd($scope.EMP.CID);
}
function fd(s)
{
EMPService.Gets(s).then(function (d) {
$scope.caption = "Select";
$scope.lists = d.data;
});
}
$scope.save = function ()
{
$scope.EMP.DOB = k;
EMPService.Save($scope.EMP).then(function (d) {
alert(d.data);
CLR();
fill();
});
}
$scope.edit = function (t)
{
EMPService.Get(t).then(function (d) {
fd(d.data.CID);
$scope.EMP = d.data;
$scope.EMP.DOB = d.data.DOB.substring(0, 10);
});
}
$scope.update = function () {
if(k!=null)
$scope.EMP.DOB = k;
EMPService.Update($scope.EMP).then(function (d) {
alert(d.data);
CLR();
fill();
});
}
$scope.del = function (u) {
if (confirm('Do you want to delte it ?'))
{
EMPService.Delete(u).then(function (d) {
alert(d.data);
fill();
});
}
}
$scope.reset = function ()
{
CLR();
}
})
.factory("EMPService", function ($http) {
var fac = {};
fac.Getc = function () {
return $http.get('http://localhost:65047/api/Values');
}
fac.Gets = function (CID) {
return $http.get('http://localhost:65047/api/Values/Gets?CID='+CID);
}
fac.Gete = function () {
return $http.get('http://localhost:65047/api/Values/Gete?s='+'S');
}
fac.Get = function (EID) {
return $http.get('http://localhost:65047/api/Values/Get?EID='+EID+'&i='+1);
}
fac.Save = function (EMP) {
return $http.post('http://localhost:65047/api/Values/Post',EMP);
}
fac.Update = function (EMP) {
return $http.put('http://localhost:65047/api/Values/Put', EMP);
}
fac.Delete = function (EID) {
return $http.delete('http://localhost:65047/api/Values/Delete?EID='+EID);
}
return fac;
});
function emp()
{
return {
EID: null,
NAME: null,
ADDRESS: null,
PASSWORD: null,
GENDER: null,
ISMARRIED: true,
CID: null,
SID: null,
DOB: null,
SALARY:null
}
}
View Code :
@{
ViewBag.Title = "Index";
}
<h2>Jay Jagannath...</h2>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/EmpService.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<div class="container" ng-app="app" ng-controller="ctr">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-lg-4">EID</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP.EID" id="tb" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">NAME</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP.NAME" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">ADDRESS</label>
<div class="col-lg-4">
<textarea class="form-control" ng-model="EMP.ADDRESS"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">PASSWORD</label>
<div class="col-lg-4">
<input type="password" class="form-control" ng-model="EMP.PASSWORD" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">GENDER</label>
<div class="col-lg-4">
<input type="radio" value="Male" ng-model="EMP.GENDER" />Male
<input type="radio" value="Female" ng-model="EMP.GENDER" />Female
</div>
</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">
<label class="control-label col-lg-4">COUNTRY</label>
<div class="col-lg-4">
<select ng-model="EMP.CID" class="form-control" ng-options="C.CID as C.CNAME for C in listc" ng-change="fillddl()">
<option value="">Select</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">STATE</label>
<div class="col-lg-4">
<select ng-model="EMP.SID" class="form-control" ng-options="C.SID as C.SNAME for C in lists">
<option value="">{{caption}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">DOB</label>
<div class="col-lg-4">
<input type="text" class="form-control c" ng-model="EMP.DOB" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">SALARY</label>
<div class="col-lg-4">
<input type="text" class="form-control " ng-model="EMP.SALARY" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-4">
<input type="button" class="btn btn-primary" style="width:80px" value="Save" ng-click="save()" />
<input type="button" class="btn btn-primary" style="width:80px" value="Update" ng-click="update()" />
<input type="button" class="btn btn-primary" style="width:80px" value="Reset" ng-click="reset()" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">Select To Show</label>
<div class="col-lg-4">
<select class="form-control" ng-model="row">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">Search</label>
<div class="col-lg-4">
<input type="text" ng-model="search" placeholder="Search" class="form-control"/>
</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>GENDER</th>
<th>DOB</th>
<th>SALARY(Number)</th>
<th>SALARY(Currency)</th>
<th>UPDATE</th>
<th>DELETE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in list|limitTo:row|filter:search|orderBy:NAME:true">
<td>{{c.EID|Cfilter}}</td>
<td>{{c.NAME|uppercase}}</td>
<td>{{c.GENDER|lowercase}}</td>
<td>{{c.DOB|date:"dd-MMM-yyyy"}}</td>
<td>{{c.SALARY|number:2}}</td>
<td>{{c.SALARY|currency:"$":1}}</td>
<td><a ng-click="edit(c.EID)">Edit</a></td>
<td><a ng-click="del(c.EID)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MvcApplication4.Models;
namespace MvcApplication4.Controllers
{
public class ValuesController : ApiController
{
[HttpGet]
public List<COUNTRY> Getc()
{
using (Database1Entities obj = new Database1Entities())
{
return obj.COUNTRies.ToList();
}
}
[HttpGet]
public List<STATE> Gets(int CID)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.STATEs.Where(m => m.CID == CID).ToList();
}
}
[HttpGet]
public List<EMP> Gete(string s)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.ToList();
}
}
[HttpGet]
public EMP Get(int EID,int i)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.SingleOrDefault(m=>m.EID==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.SingleOrDefault(m => m.EID == emp.EID);
emp1.NAME = emp.NAME;
emp1.ADDRESS = emp.ADDRESS;
emp1.PASSWORD = emp.PASSWORD;
emp1.GENDER = emp.GENDER;
emp1.ISMARRIED = emp.ISMARRIED;
emp1.CID = emp.CID;
emp1.SID = emp.SID;
emp1.DOB = emp.DOB;
emp1.SALARY = emp.SALARY;
obj.SaveChanges();
return "Data Updated.";
}
}
[HttpDelete]
public string Delete(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == EID);
obj.EMPs.Remove(emp1);
obj.SaveChanges();
return "Data Deleted.";
}
}
}
}
Angular js code:
/// <reference path="angular.js" />
angular.module("app", [])
.filter("Cfilter", function ()
{
return function (EID)
{
switch (EID)
{
case 1:
return "Jay Jagannath";
case 2:
return "Balram";
case 3:
return "Ram";
default:
return "Balram";
}
}
})
.controller("ctr", function ($scope, EMPService) {
var k;
$('.c').datepicker({ format: 'yyyy-mm-dd' }).on("change", function () {
k = $(this).val();
});
function CLR()
{
$scope.EMP = new emp();
$scope.lists = null;
$scope.caption = null;
$('#tb').focus();
} CLR();
function fill()
{
EMPService.Gete().then(function (d) {
$scope.list = d.data;
});
} fill();
function ddl()
{
EMPService.Getc().then(function (d) {
$scope.listc = d.data;
});
} ddl();
$scope.fillddl = function ()
{
fd($scope.EMP.CID);
}
function fd(s)
{
EMPService.Gets(s).then(function (d) {
$scope.caption = "Select";
$scope.lists = d.data;
});
}
$scope.save = function ()
{
$scope.EMP.DOB = k;
EMPService.Save($scope.EMP).then(function (d) {
alert(d.data);
CLR();
fill();
});
}
$scope.edit = function (t)
{
EMPService.Get(t).then(function (d) {
fd(d.data.CID);
$scope.EMP = d.data;
$scope.EMP.DOB = d.data.DOB.substring(0, 10);
});
}
$scope.update = function () {
if(k!=null)
$scope.EMP.DOB = k;
EMPService.Update($scope.EMP).then(function (d) {
alert(d.data);
CLR();
fill();
});
}
$scope.del = function (u) {
if (confirm('Do you want to delte it ?'))
{
EMPService.Delete(u).then(function (d) {
alert(d.data);
fill();
});
}
}
$scope.reset = function ()
{
CLR();
}
})
.factory("EMPService", function ($http) {
var fac = {};
fac.Getc = function () {
return $http.get('http://localhost:65047/api/Values');
}
fac.Gets = function (CID) {
return $http.get('http://localhost:65047/api/Values/Gets?CID='+CID);
}
fac.Gete = function () {
return $http.get('http://localhost:65047/api/Values/Gete?s='+'S');
}
fac.Get = function (EID) {
return $http.get('http://localhost:65047/api/Values/Get?EID='+EID+'&i='+1);
}
fac.Save = function (EMP) {
return $http.post('http://localhost:65047/api/Values/Post',EMP);
}
fac.Update = function (EMP) {
return $http.put('http://localhost:65047/api/Values/Put', EMP);
}
fac.Delete = function (EID) {
return $http.delete('http://localhost:65047/api/Values/Delete?EID='+EID);
}
return fac;
});
function emp()
{
return {
EID: null,
NAME: null,
ADDRESS: null,
PASSWORD: null,
GENDER: null,
ISMARRIED: true,
CID: null,
SID: null,
DOB: null,
SALARY:null
}
}
View Code :
@{
ViewBag.Title = "Index";
}
<h2>Jay Jagannath...</h2>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/EmpService.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<div class="container" ng-app="app" ng-controller="ctr">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-lg-4">EID</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP.EID" id="tb" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">NAME</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP.NAME" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">ADDRESS</label>
<div class="col-lg-4">
<textarea class="form-control" ng-model="EMP.ADDRESS"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">PASSWORD</label>
<div class="col-lg-4">
<input type="password" class="form-control" ng-model="EMP.PASSWORD" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">GENDER</label>
<div class="col-lg-4">
<input type="radio" value="Male" ng-model="EMP.GENDER" />Male
<input type="radio" value="Female" ng-model="EMP.GENDER" />Female
</div>
</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">
<label class="control-label col-lg-4">COUNTRY</label>
<div class="col-lg-4">
<select ng-model="EMP.CID" class="form-control" ng-options="C.CID as C.CNAME for C in listc" ng-change="fillddl()">
<option value="">Select</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">STATE</label>
<div class="col-lg-4">
<select ng-model="EMP.SID" class="form-control" ng-options="C.SID as C.SNAME for C in lists">
<option value="">{{caption}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">DOB</label>
<div class="col-lg-4">
<input type="text" class="form-control c" ng-model="EMP.DOB" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">SALARY</label>
<div class="col-lg-4">
<input type="text" class="form-control " ng-model="EMP.SALARY" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-4">
<input type="button" class="btn btn-primary" style="width:80px" value="Save" ng-click="save()" />
<input type="button" class="btn btn-primary" style="width:80px" value="Update" ng-click="update()" />
<input type="button" class="btn btn-primary" style="width:80px" value="Reset" ng-click="reset()" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">Select To Show</label>
<div class="col-lg-4">
<select class="form-control" ng-model="row">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">Search</label>
<div class="col-lg-4">
<input type="text" ng-model="search" placeholder="Search" class="form-control"/>
</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>GENDER</th>
<th>DOB</th>
<th>SALARY(Number)</th>
<th>SALARY(Currency)</th>
<th>UPDATE</th>
<th>DELETE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in list|limitTo:row|filter:search|orderBy:NAME:true">
<td>{{c.EID|Cfilter}}</td>
<td>{{c.NAME|uppercase}}</td>
<td>{{c.GENDER|lowercase}}</td>
<td>{{c.DOB|date:"dd-MMM-yyyy"}}</td>
<td>{{c.SALARY|number:2}}</td>
<td>{{c.SALARY|currency:"$":1}}</td>
<td><a ng-click="edit(c.EID)">Edit</a></td>
<td><a ng-click="del(c.EID)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</form>
</div>