CRUD Operations in MVC with AngularJs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcApplication3.Models;

using System.Data;

namespace MvcApplication3.Controllers



{

public class HomeController : Controller



{

//

// GET: /Home/

public ActionResult Index()



{

return View();



}

public JsonResult GetAll()



{

using (Database1Entities obj = new Database1Entities())



{

return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);



}

}

public JsonResult GetById(int id)



{

using (Database1Entities obj = new Database1Entities())



{

return Json(obj.EMPs.Single(m => m.EID == id), JsonRequestBehavior.AllowGet);



}

}

public string Add(EMP emp)



{

using (Database1Entities obj = new Database1Entities())



{

obj.Entry(emp).State = EntityState.Added;



obj.SaveChanges();

return "Data Saved.";



}

}

public string Put(EMP emp)



{

using (Database1Entities obj = new Database1Entities())



{

EMP emp1 = obj.EMPs.Single(m => m.EID == emp.EID);



emp1.NAME = emp.NAME;

obj.Entry(emp1).State = EntityState.Modified;



obj.SaveChanges();

return "Data Updated.";



}

}

public string Delete(EMP emp)



{

using (Database1Entities obj = new Database1Entities())



{

EMP emp1 = obj.EMPs.Single(m => m.EID == emp.EID);

obj.Entry(emp1).State = EntityState.Deleted;



obj.SaveChanges();

return "Data Deleted.";



}

}

}

}




1. Module.js : write the following code in it.

var app = angular.module("myApp",[]); Service.js : Write the following code in it. app.service("angularService", function ($http) { //get All Eployee this.getEmployees = function () { return $http.get("/Home/GetAll"); }; this.getEmployee = function (employeeID) { var response = $http({ method: "post", url: "/Home/GetById", params: { id: JSON.stringify(employeeID) } }); return response; } this.AddEmp = function (employee) { var response = $http({ method: "post", cache: false, url: "/Home/Add", data: JSON.stringify(employee), dataType: "json" }); return response; } this.PutEmp = function (employee) { var response = $http({ method: "post", cache: false, url: "/Home/Put", data: JSON.stringify(employee), dataType: "json" }); return response; } this.DelEmp= function (employee) { var response = $http({ method: "post", cache: false, url: "/Home/Delete", data: JSON.stringify(employee), dataType: "json" }); return response; } 　 });  Controller.js : Write the following code . app.controller("myCntrl", function ($scope, angularService) { $scope.divEmployee = false; GetAllEmployee(); function GetAllEmployee() { var getData = angularService.getEmployees(); getData.then(function (emp) { $scope.employees = emp.data; }, function () { alert('Error in getting records'); }); } $scope.edit = function (employee) { var getData = angularService.getEmployee(employee.EID); getData.then(function (emp) { $scope.employee = emp.data; $scope.EID = employee.EID; $scope.NAME = employee.NAME; }, function () { alert('Error in getting records'); }); } $scope.save = function () { var Employee = { EID: $scope.EID, NAME: $scope.NAME }; var getData = angularService.AddEmp(Employee); getData.then(function (msg) { GetAllEmployee(); alert(msg.data); ClearFields(); }, function () { alert('Error in adding record'); }); } $scope.update = function () { var Employee = { EID: $scope.EID, NAME: $scope.NAME }; var getData = angularService.PutEmp(Employee); getData.then(function (msg) { GetAllEmployee(); alert(msg.data); ClearFields(); }, function () { alert('Error in adding record'); }); } $scope.del = function (emp) { if (confirm('Do you want to delete it.')) { var getData = angularService.DelEmp(emp); getData.then(function (msg) { GetAllEmployee(); alert(msg.data); ClearFields(); }, function () { alert('Error in adding record'); }); } } $scope.reset = function () { ClearFields(); } function ClearFields() { $scope.EID = ""; $scope.NAME = ""; } 　 　 }); view @{ ViewBag.Title = "Index"; Layout = null; } <script src="~/Scripts/jquery-1.8.2.js"></script> <script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/Module.js"></script> <script src="~/Scripts/Service.js"></script> <script src="~/Scripts/Controller.js"></script> <html ng-app="myApp"> <body ng-controller="myCntrl"> <table align="center"> <tr><td>EID</td><td><input type="text" ng-model="EID" /></td></tr> <tr><td>NAME</td><td><input type="text" ng-model="NAME" /></td></tr> <tr><td>&nbsp;</td><td> <input type="button" value="Save" ng-click="save()" /> <input type="button" value="Update" ng-click="update()" /> <input type="button" value="Reset" ng-click="reset()" /> </td></tr> <tr> <td>&nbsp;</td> <td> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr><th>EID</th><th>NAME</th><th>UPDATE</th><th>DELETE</th></tr> <tbody ng-repeat="emp in employees"> <tr> <td>{{emp.EID}}</td> <td>{{emp.NAME}}</td> <td><a href="#" ng-click="edit(emp)">Edit</a></td> <td><a href="#" ng-click="del(emp)">Delete</a></td> </tr> </tbody> </table> </td> </tr> </table> </body> </html> <script type="text/javascript"> $(function () { $.ajaxSetup({ cache: false }) }); </script>