API Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using MvcApplication5.Models;
namespace MvcApplication5.Controllers
{
public class EmpServiceController : ApiController
{
[HttpGet]
public List<EMP> Gets()
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.ToList();
}
}
[HttpGet]
public EMP Get(int Id)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.SingleOrDefault(m => m.Id == Id);
}
}
[HttpPost]
public string Post(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
try
{
obj.EMPs.Add(emp);
obj.SaveChanges();
return "Data Saved.";
}
catch (Exception ex)
{
return ex.Message;
}
}
}
[HttpPut]
public string Put(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
try
{
EMP emp1 = obj.EMPs.SingleOrDefault(m => m.Id == emp.Id);
emp1.EID = emp.EID;
emp1.NAME = emp.NAME;
obj.SaveChanges();
return "Data Updated.";
}
catch (Exception ex)
{
return ex.Message;
}
}
}
[HttpDelete]
public string Delete(int Id)
{
using (Database1Entities obj = new Database1Entities())
{
try
{
EMP emp1 = obj.EMPs.SingleOrDefault(m => m.Id == Id);
obj.EMPs.Remove(emp1);
obj.SaveChanges();
return "Data Deleted.";
}
catch (Exception ex)
{
return ex.Message;
}
}
}
}
}
Modal Page :
<div class="modal-header">
<button type="button" ng-click="cancel()" class="close" data-dismiss="modal">×</button>
<h4>Emplyee Details</h4>
</div>
<div class="modal-body">
<form class="form-horizontal form-width" role="form">
<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" />
</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>
</form>
</div>
<div class="modal-footer">
<div class="form-group">
<input type="button" class="btn btn-primary" value="Save" ng-click="save()" style="width:80px">
<input type="button" class="btn btn-primary" value="Cancel" ng-click="cancel()" style="width:80px">
</div>
</div>
Index page :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
</head>
<body ng-controller="ctrl"><br /><br />
<div class="container">
<form class="form-horizontal " role="form">
<div class="form-group">
<div class="col-lg-4">
<input type="button" class="btn btn-primary" value="Add New" style="width:80px" ng-click="addNew()" />
</div>
<label class="control-label col-lg-4"></label>
</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-primary">
<tr>
<th>EID</th>
<th>NAME</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in list">
<td>{{c.EID}}</td>
<td>{{c.NAME}}</td>
<td>
<a ng-click="edit(c.Id)">Edit</a>|
<a ng-click="del(c.Id)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
angular.module("app", ['ui.bootstrap'])
.controller("ctrl", function ($scope, $http, $uibModal) {
function CLR()
{
$scope.EMP = new emp();
} CLR();
function fill()
{
$http.get("http://localhost:61521/api/EmpService").then(function (d) {
$scope.list = d.data;
});
} fill();
$scope.addNew = function ()
{
$uibModal.open({
templateUrl: 'AddorEdit.html',
controller: saveController,
resolve: {
Id: 0
}
});
}
$scope.edit = function (s)
{
$uibModal.open({
templateUrl: 'AddorEdit.html',
controller: saveController,
size: 'lg',
resolve: {
Id:s
}
});
}
$scope.del = function (s)
{
if (confirm('Do you want to delete it ?'))
{
$http.delete("http://localhost:61521/api/EmpService/Delete?Id=" + s).then(function (d) {
alert(d.data);
fill();
});
}
}
var saveController = function ($scope, $http, $uibModalInstance,Id) {
if (Id > 0)
{
$http.get("http://localhost:61521/api/EmpService/Get?Id="+Id).then(function (d) {
$scope.EMP = d.data;
});
}
$scope.cancel = function ()
{
$uibModalInstance.dismiss();
}
$scope.save = function ()
{
if (Id == 0) {
$http.post("http://localhost:61521/api/EmpService/Post", $scope.EMP).then(function (d) {
alert(d.data);
fill();
$uibModalInstance.close();
});
}
else {
$http.put("http://localhost:61521/api/EmpService/Put", $scope.EMP).then(function (d) {
alert(d.data);
fill();
$uibModalInstance.close();
});
}
}
}
});
function emp()
{
return {
Id: null,
EID: null,
NAME:null
}
}
</script>
