CRUD operations using AngularJS in ASP.NET MVC application

This article explains how to create ASP.NET MVC application using Angular.js and perform the CRUD create, read, update and delete) operations using Entity Framework.

First, we create an ASP.NET MVC project.

Then, we create Emp DataTable which we will implement CRUD operations on it:

We will use the Entity Framework Data First approach. For this, right click on “Model” folder and click on “New Item. Now, select “ADO.NET Entity Data Model” and name it as “EmpModel”.

After this, we download and install the AngularJS package. Right click on Project Name and select “Manage NuGet Packages” option and download the AngularJS packages.

  Now, we create the Employee Controller. So, right click on Controller Folder and create an empty Controller.

Then, Add the following code into your Employee Controller section. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication3.Models;

namespace WebApplication3.Controllers
{
    public class EmployeeController : Controller
    {
        //
        // GET: /Emp/
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult Get_AllEmployee()
        {
            using (Database1Entities1 Obj = new Database1Entities1())
            {
                List<Emp> Emp = Obj.Emp.ToList();
                return Json(Emp, JsonRequestBehavior.AllowGet);
            }
        }


        public JsonResult Get_EmployeeById(string Id)
        {
            using (Database1Entities1 Obj = new Database1Entities1())
            {
                int EmpId = int.Parse(Id);
                return Json(Obj.Emp.Find(EmpId), JsonRequestBehavior.AllowGet);
            }
        }
        public string Insert_Employee(Emp Employe)
        {
            if (Employe != null)
            {
                using (Database1Entities1 Obj = new Database1Entities1())
                {
                    Obj.Emp.Add(Employe);
                    Obj.SaveChanges();
                    return "Employee Added Successfully";
                }
            }
            else
            {
                return "Employee Not Inserted! Try Again";
            }
        }
          
        public string Delete_Employee(Emp Emp)
        {
            if (Emp != null)
            {
                using (Database1Entities1 Obj = new Database1Entities1())
                {
                    var Emp_ = Obj.Entry(Emp);
                    if (Emp_.State == System.Data.Entity.EntityState.Detached)
                    {
                        Obj.Emp.Attach(Emp);
                        Obj.Emp.Remove(Emp);
                    }
                    Obj.SaveChanges();
                    return "Employee Deleted Successfully";
                }
            }
            else
            {
                return "Employee Not Deleted! Try Again";
            }
        }
          
        public string Update_Employee(Emp Emp)
        {
            if (Emp != null)
            {
                using (Database1Entities1 Obj = new Database1Entities1())
                {
                    var Emp_ = Obj.Entry(Emp);
                    Emp EmpObj = Obj.Emp.Where(x => x.Id == Emp.Id).FirstOrDefault();
                    EmpObj.Name = Emp.Name;
                    EmpObj.Address = Emp.Address;
                    
                    Obj.SaveChanges();
                    return "Employee Updated Successfully";
                }
            }
            else
            {
                return "Employee Not Updated! Try Again";
            }
        }
    }
}

 Now, we create a View. Right click on Emp folder in Views and create an Empty View.

 Add the following code into the Index View:

@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/AngCode.js"></script>

<style>
    .btn-space {
        margin-left: -5%;
        background-color: cornflowerblue;
        font-size: large;
    }
</style>
<h2>Index</h2>
<div ng-app="myApp">
    <div ng-controller="myCtrl" ng-init="GetAllData()" class="divList">
        <p class="divHead">List of Employee</p>
        <table cellpadding="12" class="table table-bordered table-hover">
            <tr>
                <td>
                    <b>ID</b>
                </td>
                <td>
                    <b>Name</b>
                </td>
                <td>
                    <b>Address</b>
                </td>

            </tr>
            <tr ng-repeat="Emp in Emp">
                <td>
                    {{Emp.Id}}
                </td>
                <td>
                    {{Emp.Name}}
                </td>
                <td>
                    {{Emp.Address}}
                </td>

                <td>
                    <input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
                    <input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" />
                </td>
            </tr>
        </table>
        <div class="form-horizontal" role="form">
            <div class="container">
                <div class="row">
                    <h2>
                        <span id="spn">Add New Employee</span>
                    </h2>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Name:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputEmail" placeholder="Name" ng-model="EmpName">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Address:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputPassword" placeholder="Address" ng-model="EmpAddress">
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="row">
                    <div class="col-sm-6 col-lg-4">
                        <input type="button" id="btnSave" class="form-control btn-space" value="Submit" ng-click="InsertData()" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    @Html.Hidden("EmpID_")

</div>

Then, we create a JavaScript file, Right click on Scripts folder and select Add JavaScript file and name it "AngCode", write the code into that file, and implement this file into our Index View.

var app = angular.module("myApp", []);  
    app.controller("myCtrl", function($scope, $http) {  
        debugger;  
        $scope.InsertData = function() {  
            var Action = document.getElementById("btnSave").getAttribute("value");  
            if (Action == "Submit") {  
                $scope.Emp = {};  
                $scope.Emp.Name = $scope.EmpName;  
                $scope.Emp.Address = $scope.EmpAddress;  
                 
                $http({  
                    method: "post",  
                    url: "http://localhost:39209/Employee/Insert_Employee",  
                    datatype: "json",  
                    data: JSON.stringify($scope.Employe)  
                }).then(function(response) {  
                    alert(response.data);  
                    $scope.GetAllData();  
                    $scope.EmpName = "";
                    $scope.EmpAddress = "";
                     
                })  
            } else {  
                $scope.Emp = {};  
                $scope.Emp.Name = $scope.EmpName;  
                $scope.Emp.Address = $scope.EmpAddress;
                
                $scope.Emp.Id = document.getElementById("EmpID_").value;
                $http({  
                    method: "post",  
                    url: "http://localhost:39209/Employee/Update_Employee",  
                    datatype: "json",  
                    data: JSON.stringify($scope.Emp)  
                }).then(function(response) {  
                    alert(response.data);  
                    $scope.GetAllData();  
                    $scope.EmpName = "";  
                    $scope.EmpAddress = "";  
                     
                    document.getElementById("btnSave").setAttribute("value", "Submit");  
                    document.getElementById("btnSave").style.backgroundColor = "cornflowerblue";  
                    document.getElementById("spn").innerHTML = "Add New Employee";  
                })  
            }  
        }  
        $scope.GetAllData = function() {  
            $http({  
                method: "get",  
                url: "http://localhost:39209/Employee/Get_AllEmployee"  
            }).then(function(response) {  
                $scope.Emp = response.data;  
            }, function() {  
                alert("Error Occur");  
            })  
        };  
        $scope.DeleteEmp = function(Emp) {  
            $http({  
                method: "post",  
                url: "http://localhost:39209/Emp/Delete_Employee",  
                datatype: "json",  
                data: JSON.stringify(Emp)  
            }).then(function(response) {  
                alert(response.data);  
                $scope.GetAllData();  
            })  
        };  
        $scope.UpdateEmp = function(Emp) {  
            document.getElementById("EmpID_").value = Emp.Id;  
            $scope.EmpName = Emp.Name;  
            $scope.EmpAddress = Emp.Address;
            $
            document.getElementById("btnSave").setAttribute("value", "Update");  
            document.getElementById("btnSave").style.backgroundColor = "Yellow";  
            document.getElementById("spn").innerHTML = "Update Employee Information";  
        }  
    })

So, let’s run the application. and you can see that following screen will be visible on your browser. And you can add, update and delete employees.