Manage Data (CRUD Operations) Using MVC4 Web API AngularJS

The following are the highlights of this article:

1. Create a Database. (SchoolManagement).
2. Create a Table (Student).
3. Create a MVC 4 application.
4. Add a WEB API.
5. Use AngularJs to consume WEB API.
6. Perform the CRUD (Create, Read, Update & Delete) operations using Angular with WEB API.

Angular

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS is a JavaScript framework. Its goal is to augment browser-based applications with Model–View–Controller (MVC) capability, in an effort to make both development and testing easier. 

This article shows how to manage Student Data.

The following is my Data Table.


Image 1

The following is the script for my Data Table:

CREATE TABLE [dbo].[Student](
    [StudentID] [int] IDENTITY(1,1) NOT NULL,
    [Name] [varchar](50) NULL,
    [Email] [varchar](500) NULL,
    [Class] [varchar](50) NULL,
    [EnrollYear] [varchar](50) NULL,
    [City] [varchar](50) NULL,
    [Country] [varchar](50) NULL,
 CONSTRAINT [PK_Student] PRIMARY KEY CLUSTERED
(
    [StudentID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

Now open Visual Studio and create a project.


Image 2

Select ASP.NET MVC 4 Web Application then click OK.


Image 3

Now we will add the database. So right-click on the Model then select Add -> ADO.NET Entity Data Model.


Image 4

Provide it a name.


Image 5

Enter your database connection properties.


Image 6


Image 7


Image 8


Image 9


Image 10

Now it is time to add a new Web API controller. So right-click on the Controller then select Add -> Controller.


Image 11

Here select API controller with read/write actions, using Entity Framework in Template option, select Model class and select Data Context Class ->ADD.


Image 12

It will add a StudentAPI controller with the following automatically generated code with methods for GET, PUT, POST and DELETE.

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using MVC4_WEBApi_Angular_CRUD.Models;

namespace MVC4_WEBApi_Angular_CRUD.Controllers
{
    public class StudentsAPIController : ApiController
    {
        private SchoolManagementEntities db = new SchoolManagementEntities();

        // GET api/StudentsAPI
        public IEnumerable<Student> GetStudents()
        {
            return db.Student.AsEnumerable();
        }

        // GET api/StudentsAPI/5
        public Student GetStudent(int id)
        {
            Student student = db.Student.Find(id);
            if (student == null)
            {
                throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
            }

            return student;
        }

        // PUT api/StudentsAPI/5
        public HttpResponseMessage PutStudent(int id, Student student)
        {
            if (ModelState.IsValid && id == student.StudentID)
            {
                db.Entry(student).State = EntityState.Modified;

                try
                {
                    db.SaveChanges();
                }
                catch (DbUpdateConcurrencyException)
                {
                    return Request.CreateResponse(HttpStatusCode.NotFound);
                }

                return Request.CreateResponse(HttpStatusCode.OK);
            }
            else
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest);
            }
        }

        // POST api/StudentsAPI
        public HttpResponseMessage PostStudent(Student student)
        {
            if (ModelState.IsValid)
            {
                db.Student.Add(student);
                db.SaveChanges();

                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, student);
                response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = student.StudentID }));
                return response;
            }
            else
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest);
            }
        }

        // DELETE api/StudentsAPI/5
        public HttpResponseMessage DeleteStudent(int id)
        {
            Student student = db.Student.Find(id);
            if (student == null)
            {
                return Request.CreateResponse(HttpStatusCode.NotFound);
            }

            db.Student.Remove(student);

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                return Request.CreateResponse(HttpStatusCode.NotFound);
            }

            return Request.CreateResponse(HttpStatusCode.OK, student);
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}

Now we will add a new controller by right-clicking on the Controller Folder then selecting Add -> Controller.


Image 13

Select here Empty MVC controller from (Template) Scaffolding options.


Image 14

Code

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

namespace MVC4_WEBApi_Angular_CRUD.Controllers
{
    public class StudentController : Controller
    {
        //
        // GET: /Student/

        public ActionResult Index()
        {
            return View();
        }
    }
}

We will add a View after adding an AngularJs reference so right-click on your project name in Solution Explorer then select Manage NuGet Packages option.


Image 15


Image 16


Image 17

After adding an AngularJs reference now create a new folder in the Script folder then do something with MyAngularjsScripts and 3 the JavaScript files named as below.

1. Module.js
2. Service.js
3. Controller.js

Module.js

var app;
(function () {
    app = angular.module("crudModule", []);
})()

Service.js

app.service('CRUD_OperService', function ($http) {

    //Create new record
    this.post = function (Student) {
        var request = $http({
            method: "post",
            url: "/api/StudentsAPI",
            data: Student
        });
        return request;
    }

    //Get Single Records
    this.get = function (StudentID) {
        return $http.get("/api/StudentsAPI/" + StudentID);
    }

    //Get All Student
    this.getAllStudent = function () {
        return $http.get("/api/StudentsAPI");
    }

    //Update the Record
    this.put = function (StudentID, Student) {
        var request = $http({
            method: "put",
            url: "/api/StudentsAPI/" + StudentID,
            data: Student
        });
        return request;
    }

    //Delete the Record
    this.delete = function (StudentID) {
        var request = $http({
            method: "delete",
            url: "/api/StudentsAPI/" + StudentID
        });
        return request;
    }
});

Controller.js

app.controller('CRUD_OperController', function ($scope, CRUD_OperService) {
    $scope.OperType = 1;
    //1 Mean New Entry

    GetAllRecords();
    //To Get All Records
    function GetAllRecords() {
        var promiseGet = CRUD_OperService.getAllStudent();
        promiseGet.then(function (pl) { $scope.Students = pl.data },
              function (errorPl) {
                  $log.error('Some Error in Getting Records.', errorPl);
              });
    }

    //To Clear all input controls.
    function ClearModels() {
        $scope.OperType = 1;
        $scope.StudentID = "";
        $scope.Name = "";
        $scope.Email = "";
        $scope.Class = "";
        $scope.EnrollYear = "";
        $scope.City = "";
        $scope.Country = "";
    }

   //To Create new record and Edit an existing Record.
    $scope.save = function () {
        var Student = {
            Name: $scope.Name,
            Email: $scope.Email,
            Class: $scope.Class,
            EnrollYear: $scope.EnrollYear,
            City: $scope.City,
            Country: $scope.Country
        };
        if ($scope.OperType === 1) {
            var promisePost = CRUD_OperService.post(Student);
            promisePost.then(function (pl) {
                $scope.StudentID = pl.data.StudentID;
                GetAllRecords();
                ClearModels();
            }, function (err) {
                console.log("Err" + err);
            });
        } else {
            //Edit the record
            Student.StudentID = $scope.StudentID;
            var promisePut = CRUD_OperService.put($scope.StudentID, Student);
            promisePut.then(function (pl) {
                $scope.Message = "Student Updated Successfuly";
                GetAllRecords();
                ClearModels();
            }, function (err) {
                console.log("Err" + err);
            });
        }
    };

    //To Delete Record
    $scope.delete = function (Student) {
        var promiseDelete = CRUD_OperService.delete(Student.StudentID);
        promiseDelete.then(function (pl) {
            $scope.Message = "Student Deleted Successfuly";
            GetAllRecords();
            ClearModels();
        }, function (err) {
            console.log("Err" + err);
        });
    }

    //To Get Student Detail on the Base of Student ID
    $scope.get = function (Student) {
        var promiseGetSingle = CRUD_OperService.get(Student.StudentID);

        promiseGetSingle.then(function (pl) {
            var res = pl.data;
            $scope.StudentID = res.StudentID;
            $scope.Name = res.Name;
            $scope.Email = res.Email;
            $scope.Class = res.Class;
            $scope.EnrollYear = res.EnrollYear;
            $scope.City = res.City;
            $scope.Country = res.Country;

            $scope.OperType = 0;
        },
                  function (errorPl) {
                      console.log('Some Error in Getting Details', errorPl);
                  });
    }

    //To Clear all Inputs controls value.
    $scope.clear = function () {
        $scope.OperType = 1;
        $scope.StudentID = "";
        $scope.Name = "";
        $scope.Email = "";
        $scope.Class = "";
        $scope.EnrollYear = "";
        $scope.City = "";
        $scope.Country = "";
    }

});

Now for StudentControler right-click on the Index method then select Add view.


Image 18


Image 19

Our Index.cshtml is:

<html data-ng-app="crudModule">
@{
    ViewBag.Title = "Manage Student Information using AngularJs, WEB API & MVC4";
}

<body>
    <table id="tblContainer" data-ng-controller="CRUD_OperController">
        <tr>
            <td>
                <table style="border: solid 2px Green; padding: 5px;">
                    <tr style="height: 30px; background-color: skyblue; color: maroon;">
                        <th></th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Class</th>
                        <th>Year</th>
                        <th>City</th>
                        <th>Country</th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tbody data-ng-repeat="stud in Students">
                        <tr>
                            <td></td>
                            <td><span>{{stud.StudentID}}</span></td>
                            <td><span>{{stud.Name}}</span></td>
                            <td><span>{{stud.Email}}</span></td>
                            <td><span>{{stud.Class}}</span></td>
                            <td><span>{{stud.EnrollYear}}</span></td>
                            <td><span>{{stud.City}}</span></td>
                            <td><span>{{stud.Country}}</span></td>
                            <td>
                                <input type="button" id="Edit" value="Edit" data-ng-click="get(stud)" /></td>

                            <td>
                                <input type="button" id="Delete" value="Delete" data-ng-click="delete(stud)" /></td>
                        </tr>
                    </tbody>
                </table>

            </td>
        </tr>
        <tr>
            <td>
                <div style="color: red;">{{Message}}</div>
                <table style="border: solid 4px Red; padding: 2px;">
                    <tr>
                        <td></td>
                        <td>
                            <span>Student ID</span>
                        </td>
                        <td>
                            <input type="text" id="StudentID" readonly="readonly" data-ng-model="StudentID" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Student Name</span>
                        </td>
                        <td>
                            <input type="text" id="sName" required data-ng-model="Name" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Email</span>
                        </td>
                        <td>
                            <input type="text" id="sEmail" required data-ng-model="Email" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Class</span>
                        </td>
                        <td>
                            <input type="text" id="sClass" required data-ng-model="Class" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Enrollement Year</span>
                        </td>
                        <td>
                            <input type="text" id="sEnrollYear" required data-ng-model="EnrollYear" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>City</span>
                        </td>
                        <td>
                            <input type="text" id="sCity" required data-ng-model="City" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Country</span>
                        </td>
                        <td>
                            <input type="text" id="sCountry" required data-ng-model="Country" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            <input type="button" id="save" value="Save" data-ng-click="save()" />

                            <input type="button" id="Clear" value="Clear" data-ng-click="clear()" />
                        </td>
                    </tr>
                </table>

            </td>
        </tr>

    </table>
</body>
</html>

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/MyAngularjsScripts/Module.js"></script>
<script src="~/Scripts/MyAngularjsScripts/Service.js"></script>
<script src="~/Scripts/MyAngularjsScripts/Controller.js"></script>

Now run the application. You can set a start-up URI from the Route.config file in the APP_START folder like the following:


Image 20

Run application: See your all records.

From here you can add a new record, edit any record and delete any record.


Image 21


Image 22


Image 23