Api code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public class EmpserviceController : ApiController
{
[HttpGet]
public List<EMP> Gets()
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.ToList();
}
}
[HttpGet]
public EMP1 Get(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.Select(x => new EMP1 { EID = x.EID, NAME = x.NAME, LPHONEMAP = obj.EMPPHONEMAPs.Where(m => m.EID == x.EID).Select(p => new EMPPHONE {PID= p.PID??0,NUMBER= p.NUMBER, LPHONE = obj.PHONEs.ToList() }).ToList() }).SingleOrDefault(P => P.EID == EID);
}
}
[HttpPost]
public string Post(EMP1 emp1)
{
using (Database1Entities obj = new Database1Entities())
{
obj.EMPs.Add(new EMP { EID=emp1.EID,NAME=emp1.NAME });
obj.SaveChanges();
obj.EMPPHONEMAPs.AddRange(emp1.LPHONEMAP.Select(x => new EMPPHONEMAP{ EID=emp1.EID, PID=x.PID,NUMBER=x.NUMBER }));
obj.SaveChanges();
return "Data Saved.";
}
}
[HttpPut]
public string Put(EMP1 emp1)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp = obj.EMPs.SingleOrDefault(m => m.EID == emp1.EID);
emp.NAME = emp1.NAME;
obj.SaveChanges();
obj.EMPPHONEMAPs.RemoveRange(obj.EMPPHONEMAPs.Where(p => p.EID == emp1.EID));
obj.SaveChanges();
obj.EMPPHONEMAPs.AddRange(emp1.LPHONEMAP.Select(x => new EMPPHONEMAP { EID = emp1.EID, PID = x.PID, NUMBER = x.NUMBER }));
obj.SaveChanges();
return "Data Updated.";
}
}
[HttpDelete]
public string Delete(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
obj.EMPs.Remove(obj.EMPs.SingleOrDefault(m => m.EID == EID));
obj.SaveChanges();
obj.EMPPHONEMAPs.RemoveRange(obj.EMPPHONEMAPs.Where(p => p.EID == EID));
obj.SaveChanges();
obj.SaveChanges();
return "Data Deleted.";
}
}
}
public class EMP1
{
public int EID{get;set;}
public string NAME{get;set;}
public List<EMPPHONE> LPHONEMAP { get; set; }
}
public class EMPPHONE
{
public int PID { get; set; }
public string NUMBER { get; set; }
public List<PHONE> LPHONE { get; set; }
}
}
Angular js 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/jquery-1.9.1.js"></script>
<script src="Scripts/angular.js"></script>
</head>
<body>
<div class="container" ng-app="app" ng-controller="ctrl">
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-4 control-label">EID</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP1.EID" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">NAME</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP1.NAME" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4"></label>
<div class="col-lg-4">
<table style="margin-top:10px">
<tr><td>Phone</td><td><a style="color:green;margin-left:303px" ng-click="add()">+</a></td></tr>
</table>
<table id="tb">
<tr ng-repeat="c in EMP1.LPHONEMAP">
<td><select class="form-control" ng-model="c.PID" ng-options="d.PID as d.PHONETYPE for d in c.LPHONE"></select></td>
<td><input style="margin-left:10px" type="text" class="form-control" ng-model="c.NUMBER" /></td>
<td><a style="color:red;margin-left:20px" ng-click="sub(c)">-</a></td>
</tr>
<tr><td colspan="3"> </td></tr>
</table>
</div>
</div>
<div class="form-group">
<label class="col-lg-4"> </label>
<div class="col-lg-4">
<input type="button" ng-click="save()" class="btn btn-primary" value="Save" style="width:80px" />
<input type="button" ng-click="update()" class="btn btn-primary" value="Update" style="width:80px" />
<input type="button" ng-click="reset()" class="btn btn-primary" value="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>
<td>EID</td>
<td>NAME</td>
<td>ACTION</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in list1">
<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, $http) {
function fill1() {
$http.get('http://localhost:57694/api/Empservice/Gets').then(function (d) {
$scope.list1 = d.data;
});
} fill1();
var n = [{ PID: 1, PHONETYPE: 'Mobile' }, { PID: 2, PHONETYPE: 'Land Line' }];
$scope.add = function ()
{
$scope.EMP1.LPHONEMAP.push({ PID: null, NUMBER: null, LPHONE: n });
}
$scope.sub = function (s)
{
if ($scope.EMP1.LPHONEMAP.length > 1)
$scope.EMP1.LPHONEMAP.splice($scope.EMP1.LPHONEMAP.indexOf(s), 1);
}
function CLR()
{
$scope.EMP1 = new eMP1();
} CLR();
$scope.save = function ()
{
$http.post('http://localhost:57694/api/Empservice/Post', $scope.EMP1).then(function (d) {
alert(d.data);
fill1();
CLR();
});
}
$scope.update = function ()
{
$http.put('http://localhost:57694/api/Empservice/Put', $scope.EMP1).then(function (d) {
alert(d.data);
fill1();
CLR();
});
}
$scope.edit = function (d)
{
$http.get('http://localhost:57694/api/Empservice/Get?EID='+d).then(function (d) {
$scope.EMP1 = d.data;
});
}
$scope.del = function (d)
{
if (confirm('Do you want to delete it ?'))
{
$http.delete('http://localhost:57694/api/Empservice/Delete?EID=' + d).then(function (d) {
alert(d.data);
fill1();
});
}
}
});
function eMP1()
{
return {
EID: null,
NAME: null,
LPHONEMAP: [{
PID: null,
NUMBER: null,
LPHONE:[{ PID: 1, PHONETYPE: 'Mobile' }, { PID: 2, PHONETYPE: 'Land Line' }]
}]
};
}
</script>
