AngularJS CRUD (Create Read Update Delete) Operation Using MVC

Since we are using EntityFramwork for CRUD operation, so, first, create a table, given below-

Step 1. Create MVC Application

• Open Visual Studio

• File - New - Project…

• Select ASP.NET MVC4/5 Web Application.

• Enter the name of Application as "AngularWithMvc".

• Click OK.

Step 2. Create the Model

As we know, we will use the EntityFramework, so we will use the .edmx model and will use its entity(Table) as a model. So,

1. Right click on the Models folder and go to Add. Select Add New Item, given below-
   
   
   
   

2. Now, select Data tab from Side menu, choose entity data model and type the name of entity data model, as given below-
   
   
   
   

3. Create a controller with the name of “ StudentController”, as given below-
   
   
   

4. This was the process to create an MVC Application and Entity data model integration. Now, we are going to create a model, Controller and Service to perform the CRUD operation. Thus, create a folder at the root with the name of “AngularScript” and add the “angular.min.js” from the link, given below-

5. http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js
   
   Now, create three JavaScript files with the name of “StudentModel”, “StudentService” and “StudentController”, as given below-
   
   
   

Open StudentController.cs (MVC Controller). Create a View with the name of Index and write the code, given below-

Index.cshtml

@{

ViewBag.Title = "Index";

Layout = "~/Views/Shared/_Layout.cshtml";


}



<h2>Student Details :</h2>
<div ng-controller="stuCntr">
    <script src="~/scripts/bootstrap.min.js"></script>
    <script src="~/scripts/jquery-1.10.2.min.js"></script>
    <input type="submit" value="Add Student" ng-click="AddNewStudent()" />
    <div id="dvStudnetDetails">
        <table cellpadding="12" class="table table-bordered table-hover">
            <tr>
                <td>
                    <b>Id</b>
                </td>
                <td>
                    <b>Student Name</b>
                </td>
                <td>
                    <b>Address</b>
                </td>
                <td>
                    <b>Email</b>
                </td>
                <td>
                    <b>Manage</b>
                </td>
            </tr>
            <tr ng-repeat="stu in students">
                <td ng-show="aa">

{{stu.Id}}


</td>
                <td>

{{$index+1}}


</td>
                <td ng-show="a">
                    <input type="text" ng-model="stu.StudentName" />
                </td>
                <td ng-hide="a">

{{stu.StudentName}}


</td>
                <td ng-show="a">
                    <input type="text" ng-model="stu.StudentAddress" />
                </td>
                <td ng-hide="a">

{{stu.StudentAddress}}


</td>
                <td ng-show="a">
                    <input type="text" ng-model="stu.StudentEmail" />
                </td>
                <td ng-hide="a">

{{stu.StudentEmail}}


</td>
                <td>
                    <span ng-hide="a" ng-click="a=!a">Edit</span>
                    <span ng-show="a" ng-click="a=!a">Cancel</span>
                    <span ng-show="a" ng-click="UpdateStudent(stu)">Update</span>
                    <span ng-click="deleteStudent(stu,$index)">Delete</span>
                </td>
            </tr>
        </table>
    </div>
    <div id="dvAddStudnet" ng-show="dvStudent">
        <p class="dvTask">{{Action}} New Student</p>
        <table>
            <tr>
                <td>Name : </td>
                <td>
                    <input type="text" id="txtName" ng-model="student.StudentName" />
                </td>
            </tr>
            <tr>
                <td>Email : </td>
                <td>
                    <input type="text" id="txtEmail" ng-model="student.StudentEmail" />
                </td>
            </tr>
            <tr>
                <td>Address : </td>
                <td>
                    <input type="text" id="txtAddress" ng-model="student.StudentAddress" />
                </td>
            </tr>
        </table>
        <input type="submit" value="Submit" ng-click="AddStudnet(student)" />
    </div>
</div>

In View, given above, I have created HTML table and bound a data field, using AngularJS directives (ng-model, ng-controller, ng-repeat etc.) and there are also a code form to add new student records (See in dvAddStudnet div). This view contains a controller section only. There are no ng-App in this view. We have written the ng-app directives in layout, which renders all the view, as given below-

_Layout.cshtml

<!DOCTYPE html>
<html ng-app="StudnetApp">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Angular Js with MVC Demo</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script> @*Angular liabrary and js used in Application*@
    <script src="~/AngularScricpt/angular.min.js"></script>
    <script src="~/AngularScricpt/StudentModel.js"></script>
    <script src="~/AngularScricpt/StudentService.js"></script>
    <script src="~/AngularScricpt/Studnetcontroller.js"></script>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button> @Html.ActionLink("AngularJs Demo", "Index", "Student", new { area = "" }, new { @class = "navbar-brand" }) </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav"> </ul>
            </div>
        </div>
    </div>
    <div class="container body-content"> @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - AngularJs with MVC demo</p>
        </footer>
    </div>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
  </html>

Now, open StudentModel.js (in AngularScript folder) and assign the app's name, which you have given in layout page. It is very easy, as you need to just open studentmodel.js and type the name of app, given below-

StudentModel.js

var app = angular.module("StudnetApp", []);

We are only assigning the module name in this file.

Now, open StudnetController.js and write the code, given below-

StudentController.js

app.controller("stuCntr", function($scope, StudentService) {
    $scope.dvStudent = false;
    GetStudentList();
    $scope.students = [];
    //To Get All Records
    function GetStudentList() {
        StudentService.getAllStudents().success(function(stu) {
            $scope.students = stu;
        }).error(function() {
            alert('Error in getting records');
        });
    }
    // To display Add div
    $scope.AddNewStudent = function() {
            $scope.Action = "Add";
            $scope.dvStudent = true;
        }
        // Adding New student record
    $scope.AddStudnet = function(student) {
            StudentService.AddNewStudent(student).success(function(msg) {
                $scope.students.push(msg)
                $scope.dvAddStudnet = false;
            }, function() {
                alert('Error in adding record');
            });
        }
        // Deleting record.
    $scope.deleteStudent = function(stu, index) {
            var retval = StudentService.deleteStudent(stu.Id).success(function(msg) {
                $scope.students.splice(index, 1);
                // alert('Student has been deleted successfully.');
            }).error(function() {
                alert('Oops! something went wrong.');
            });
        }
        // Updateing Records
    $scope.UpdateStudent = function(tbl_Student) {
        var RetValData = StudentService.UpdateStudent(tbl_Student);
        getData.then(function(tbl_Student) {
            Id: $scope.Id;
            StudentName: $scope.studentName;
            StudentAddress: $scope.StudentAddress;
            StudentEmail: $scope.StudentEmail;
        }, function() {
            alert('Error in getting records');
        });
    }
});

In the code, given above, we create a controller and written all CRUD operation code. We also assigned Services, which will invoke the MVC controller to perform the action, as required. (See the controller, Service and all function in the image, given below)-

Now, open StudentService.js file and write the code, given below. Here, View calls the controller, controller calls the Service and Service calls the MVC controller action.

StudentService.js

app.service("StudentService", function($http) {
    //get All Eployee
    this.getAllStudents = function() {
        return $http.get("Student/GetStudentList");
    };
    // Adding Record
    this.AddNewStudent = function(tbl_Student) {
            return $http({
                method: "post",
                url: "Student/AddStudent",
                data: JSON.stringify(tbl_Student),
                dataType: "json"
            });
        }
        // Updating record
    this.UpdateStudent = function(tbl_Student) {
            return $http({
                method: "post",
                url: "Student/UpdateStudent",
                data: JSON.stringify(tbl_Student),
                dataType: "json"
            });
        }
        // Deleting records
    this.deleteStudent = function(Id) {
        return $http.post('Student/DeleteStudent/' + Id)
    }
});

Now, open StudentController.cs (MVC controller) and write the code, given below. The code, given below, has all the action from CRUD operation-

StudentController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AngularWithMvc.Models;
namespace AngularWithMvc.Controllers
{
    public class StudentController: Controller {
        // GET: Student
        public ActionResult Index() {
                return View();
            }
            [HttpPost]
        public JsonResult AddStudent(tbl_Student stu) {
                if (stu != null) {
                    using(TestDBEntities dbContext = new TestDBEntities()) {
                        dbContext.tbl_Student.Add(stu);
                        dbContext.SaveChanges();
                        return Json(stu, JsonRequestBehavior.AllowGet);
                    }
                } else {
                    return Json("Some Error Occured");
                }
            }
            [HttpPost]
        public string UpdateStudent(tbl_Student stu) {
            if (stu != null) {
                using(TestDBEntities dbContext = new TestDBEntities()) {
                    tbl_Student lstStudent = dbContext.tbl_Student.Where(x => x.Id == stu.Id).FirstOrDefault();
                    lstStudent.StudentName = stu.StudentName;
                    lstStudent.StudentAddress = stu.StudentAddress;
                    lstStudent.StudentEmail = stu.StudentEmail;
                    dbContext.SaveChanges();
                    return "Student Updated";
                }
            } else {
                return "Oops! something went wrong.";
            }
        }
        public JsonResult GetStudentList() {
                using(TestDBEntities dbContext = new TestDBEntities()) {
                    List < tbl_Student > studentList = dbContext.tbl_Student.ToList();
                    return Json(studentList, JsonRequestBehavior.AllowGet);
                }
            }
            [HttpPost]
        public string DeleteStudent(int Id) {
            if (Id != 0) {
                using(TestDBEntities dataContext = new TestDBEntities()) {
                    // int id = Convert.ToInt32(Id);
                    var lstStud = dataContext.tbl_Student.Where(x => x.Id == Id).FirstOrDefault();
                    dataContext.tbl_Student.Remove(lstStud);
                    dataContext.SaveChanges();
                    return "Student has been deleted succhessfully.";
                }
            } else {
                return " Oops! Error occered.";
            }
        }
    }
}

Now, press F5 to run the code. I hope, your Browser will display the screen, as shown below-