--- title: "Angular js with MVC Insert,Update, Delete" description: "Angular js with MVC Insert,Update, Delete" author: "Anonymous User" published: 2016-02-19 updated: 2016-02-19 canonical: https://www.mindstick.com/forum/33987/angular-js-with-mvc-insert-update-delete category: "angular js" tags: ["jquery", "bootstrap", "angular js"] reading_time: 5 minutes --- # Angular js with MVC Insert,Update, Delete I want to use [Angularjs](https://www.mindstick.com/forum/33926/use-angularjs-without-scope-in-mvc) in [MVC](https://www.mindstick.com/forum/155803/define-cache-profile-in-mvc) for [Insert](https://www.mindstick.com/blog/173/executing-insert-delete-or-update-query-in-sqlserver-using-ado-dot-net),[Update](https://www.mindstick.com/forum/156353/what-is-hummingbird-update), [Delete](https://www.mindstick.com/forum/33620/how-to-delete-record-from-list-in-mvc-using-ajax) .How to use Angularjs with [database](https://www.mindstick.com/articles/12226/use-of-database-in-sencha-extjs-and-insert-record-from-user-form-using-ajax) please help me. ## Replies ### Reply by Anonymous User Hi Ankit,\ Here , we are choosing Database Model shown is below:\ \ ``` CREATE TABLE Employee(Id int Not Null primary key,name nvarchar(50),email nvarchar(50),mobile_no nvarchar(50)) ``` **Home Controller:\**\ > ``` > using System;using System.Linq;using System.Web.Mvc;namespace ForumMVC.Controllers{    public class HomeController : Controller    { >         public ActionResult Index()        {            return View();        }        public JsonResult getAll()        {            using (Entities dataContext = new Entities())            {                var employeeList = dataContext.Employee.ToList();                return Json(employeeList, JsonRequestBehavior.AllowGet);            }        }        public JsonResult getEmployeeByNo(string EmpNo)        {            using (Entities dataContext = new Entities())            {                int no = Convert.ToInt32(EmpNo);                var employeeList = dataContext.Employee.Find(no);                return Json(employeeList, JsonRequestBehavior.AllowGet);            }        }        public string UpdateEmployee(Employee Emp)        {            if (Emp != null)            {                using (Entities dataContext = new Entities())                {                    int no = Convert.ToInt32(Emp.Id);                    var employeeList = dataContext.Employee.Where                    (x => x.Id == > no).FirstOrDefault();                    employeeList.name = > Emp.name;                    employeeList.mobile_no = > Emp.mobile_no;                    employeeList.email = > Emp.email;                    dataContext.SaveChanges();                    return "Employee Updated";                }            }            else            {                return "Invalid > Employee";            }        }        public string AddEmployee(Employee Emp)        {            if (Emp != null)            {                using (Entities dataContext = new Entities())                { > dataContext.Employee.Add(Emp);                    dataContext.SaveChanges();                    return "Employee > Updated";                }            }            else            {                return "Invalid > Employee";            }        }        public string DeleteEmployee(Employee Emp)        {            if (Emp != null)            {                using (Entities dataContext = new Entities())                {                    int no = Convert.ToInt32(Emp.Id);                    var employeeList = > dataContext.Employee.Where                    (x => x.Id == no).FirstOrDefault();                    dataContext.Employee.Remove(employeeList);                    dataContext.SaveChanges();                    return "Employee Deleted";                }            }            else            {                return "Invalid > Employee";            }        }    }} > ``` **View: Index.cshtml** **\** > ``` >         Index                                   
       
           
               
                   

Employee Details Page

                   
                      
                    
                        
                                     
               
                    
                       

Employee > List

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
IDNameEmailAgeActions
{{employee.Id}}                                {{employee.name}}                                {{employee.email}}                                {{employee.mobile_no}}                                                     Edit               Delete                               
                   
                       
                       
                           
                               

{{Action}} Employee

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
Id                                                                                Name                                                                                    Email                                                                                    Mobile No                                                                                   
                                                                                                                                
                           
                       
                   
                              
           
       
   
         > ``` > > \ **Model.js**\ > ``` > var app = angular.module("myApp", []); > ``` **Service.js:** > ``` > app.service("myService", function ($http) {    //get > All Eployee    this.getEmployees = function () {        debugger;        return $http.get("Home/GetAll");    };    // get > Employee By Id    this.getEmployee = function (employeeID) {        var response = $http({            method: "post",            url: "Home/getEmployeeByNo",            params: {                id: JSON.stringify(employeeID)            }        });        return response;    }    // > Update Employee    this.updateEmp = function (employee) {        var response = $http({            method: "post",            url: "Home/UpdateEmployee",            data: JSON.stringify(employee),            dataType: "json"        });        return response;    }    // Add > Employee    this.AddEmp = function (employee) {        var response = $http({            method: "post",            url: "Home/AddEmployee",            data: JSON.stringify(employee),            dataType: "json"        });        return response;    }     //Delete > Employee    this.DeleteEmp = function (employee) {        var response = $http({            method: "post",            url: "Home/DeleteEmployee",            dataType: "json",            data: JSON.stringify(employee),        });        return response;    }}); > ``` **Controller.js:** > ``` > app.controller("myCntrl", function ($scope, myService) > {    $scope.divEmployee = false;    GetAllEmployee();    //To Get > All Records     function GetAllEmployee() {        debugger;        var getData = myService.getEmployees();        debugger;        getData.then(function (emp) {            $scope.employees = emp.data;        }, function () {            $('#alertcontent').html('Error in getting > record');            $('#alertmodal').modal("show");                 });    }     $scope.editEmployee = function (employee) {        debugger;        var getData = > myService.getEmployee(employee.Id);        getData.then(function (emp) {            $scope.employee = emp.data;            $scope.employeeId = employee.Id;            $scope.employeeName = > employee.name;            $scope.employeeEmail = > employee.email;            $scope.employeemobile_no = > employee.mobile_no;            $scope.Action = "Update";            $scope.divEmployee = true;        },        function () {            $('#alertcontent').html('Error in getting > record');            $('#alertmodal').modal("show");                  });    }    $scope.AddUpdateEmployee = function () {        debugger;        var Employee = {            Name: $scope.employeeName,            Email: $scope.employeeEmail,            mobile_no: $scope.employeemobile_no,            Id: $scope.employeeId        };        var getAction = $scope.Action;         if (getAction == "Update") {            Employee.Id = $scope.employeeId;            var getData = myService.updateEmp(Employee);            getData.then(function (msg) {                GetAllEmployee();                $('#alertcontent').html(msg.data);                $('#alertmodal').modal("show");                                $scope.divEmployee = false;            }, function () {                $('#alertcontent').html('Error in updating record');                $('#alertmodal').modal("show");                           });        } else {            var getData = myService.AddEmp(Employee);            getData.then(function (msg) {                GetAllEmployee();                $('#alertcontent').html(msg.data);                $('#alertmodal').modal("show");                              $scope.divEmployee = false;            }, function () {                $('#alertcontent').html('Error in adding > record');                $('#alertmodal').modal("show");                       });        }    }    $scope.AddEmployeeDiv = function () {        ClearFields();        $scope.Action = "Add";        $scope.divEmployee = true;    }     $scope.deleteEmployee = function (employee) {        debugger;        var getData = myService.DeleteEmp(employee);        getData.then(function (msg) {            GetAllEmployee();            $('#alertcontent').html('Employee Deleted');            $('#alertmodal').modal("show");                   }, function () {                      $('#alertcontent').html('Error in Deleting > Record');            $('#alertmodal').modal("show");        });    }     $scope.Close = function () {        ClearFields();        $scope.divEmployee = false;    }    function ClearFields() {        $scope.employeeId = "";        $scope.employeeName = "";        $scope.employeeEmail = "";        $scope.employeemobile_no = "";    }}); > ``` **Output:\ ![Angular js with MVC Insert,Update, Delete](https://www.mindstick.com/mindstickforums/a9446c25-be99-4224-bdcb-aad5ab1e1eaf/images/9c2b021a-4196-468e-a54f-33f489f4ad46.png)\** --- Original Source: https://www.mindstick.com/forum/33987/angular-js-with-mvc-insert-update-delete Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.