Performing CRUD Operations Using AngularJS In MVC

Introduction

AngularJS is a Superheroic JavaScript MVW (Model-View-Whatever) /Binding Framework that is used for making rich and extensible web applications. It is especially used for Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. The AngularJS is open source.

Note -  "AngularJS helps us binding HTML elements to JavaScript objects."

Data Binding

AngularJS uses two-way data-binding. Data-binding is an automatic process of updating the View whenever a Model changes, as well as updating the Model whenever a View changes.


Figure 1: AngularJS Binding

Controller

AngularJS defines Controller using ng-controller directive. AngularJS creates a new instance object internally and binds it. Controller is attached to the DOM via the ng-controller directive. $scope is a special JavaScript object which plays the role of joining Controller to the Views. $scope refers to the application which is desired to use the Controller object.

Services

Services are JavaScript functions and are responsible to perform specific tasks only. AngularJS services are:

1. Lazily instantiated
   AngularJS only instantiates a service when an application component depends on it.
   
   
2. Singletons
   Each component dependent on a service gets a reference to the single instance generated by the service factory.

$scope is Angular service for Angular scope management. $scope is defined as parameter. Angular will automatically come and inject the $scope. This term is call Dependency Injection (DI). AngularJS provides many in-built services. For example, $https:, $route, $window, $location etc. Each service is responsible for a specific task - $https is used to make AJAX call to get the server data; $route is used to define the routing information and so on. Inbuilt services are always prefixed with $ symbol.

Let's code

We are creating a sample web application in C# along with AngularJS, using Visual Studio 2017. This application will have the following features.

1. Binding the data and showing in table list.
2. Create, Edit and Update user.
3. Create a Controller, services, and modules.

First of all, we will create a new web application in VS2017. We will install AngularJS using nuGet package, as shown below.

Figure 2: Nuget for AngularJS

We need to create UserViewModel class in C#.

var userApp = angular.module("userApp", []);
We Create UserServices.js file
userApp.service("userService", function ($http) {
    var $this = this;
    $this.AddEdit = function (user) {
        var request = $http({
            method: 'POST',
            url: Domain + 'AddEditUser',
            data: JSON.stringify(user),
            dataType: "json"
        });
        return request;
    }

    $this.Delete = function (id) {
        var request = $http({
            method: 'POST',
            url: Domain + 'DeleteUser',
            data: "{ id:" + id + " }",
            dataType: "json"
        });
        return request;
    }

    $this.GetAll = function () {
        var request = $http({
            method: 'GET',
            url: Domain + 'GetAllUsers',
        });
        return request;
    }

    $this.GetUser = function (id) {
        var request = $http({
            method: 'GET',
            url: Domain + 'GetUser/' + id,
        });
        return request;
    }
});

Create UserController.js file 

userApp.controller("userController", function ($scope, userService) {

    GetUsers();

    $scope.SaveUser = function () {
        var UserModel = {
            Id: $scope.id,
            Email: $scope.email,
            FirstName: $scope.firstName,
            LastName: $scope.lastName,
            Phone: $scope.phone
        };
        if (!CheckIsValid()) {
            alert('Please fill the detail!');
            return false;
        }
        var requestResponse = userService.AddEdit(UserModel);
        Message(requestResponse);
    };

    $scope.editUser = function (id) {
        var getData = userService.GetUser(id);
        getData.then(function (user) {
            var userData = user.data;
            $scope.id = userData.Id;
            $scope.email = userData.Email;
            $scope.phone = userData.Phone;
        },
            function () {
                alert('Error in getting records');
            });
    }

    $scope.DeleteUser = function (id) {
        var requestResponse = userService.Delete(id);
        Message(requestResponse);
    };

    function GetUsers() {
        var requestResponse = userService.GetAll();
        requestResponse.then(function (response) {
            $scope.employees = response.data;
        }, function () {

        })
    };

    function Message(requestResponse) {
        requestResponse.then(function successCallback(response) {
            GetUsers();
            $('#addEditUser').modal('hide');
            // this callback will be called asynchronously
            // when the response is available
        }, function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });
    }

    function CheckIsValid() {
        var isValid = true;
        if ($('#email').val() === '' || $('#phone').val() === '' || $('#email').val() === '' || $('#phone').val() === '') {
            isValid = false;
        }
        return isValid;
    }
});

Now, we will create a Controller for the UI that handles all requests for user (add/edit/delete) and show the user list along with a View HTML template The following is the code snippet for UserController and Views.

using CURD.Code;
using CURD.Models;
using System.Collections.Generic;
using System.Web.Mvc;

namespace CURD.Controllers
{
    public class UserController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult AddEditUser(UserViewModel model)
        {
            if (ModelState.IsValid)
            {
                if (model.Id.HasValue)
                {
                    StaticData.Update(model);
                }
                else
                {
                    StaticData.Save(model);
                }
            }
            string status = model.Id.HasValue ? "updated" : "saved";
            string message = $"User has been { status } successfully!";
            return Json(message, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public JsonResult DeleteUser(int id)
        {
            StaticData.Delete(id);
            string message = $"User has been removed successfully!";
            return Json(message, JsonRequestBehavior.AllowGet);
        }

        [HttpGet]
        public JsonResult GetAllUsers()
        {
            List<UserViewModel> users = StaticData.UserList;
            return Json(users, JsonRequestBehavior.AllowGet);
        }

        [HttpGet]
        public JsonResult GetUser(int id)
        {
            UserViewModel userViewModel = StaticData.Find(id);
            return Json(userViewModel, JsonRequestBehavior.AllowGet);
        }
    }
}

@{
    ViewBag.Title = "CURD with angular!";
}
<div ng-controller="userController">
    <div class="form-group">
        <button type="button" class="btn btn-success" data-target="#addEditUser" data-toggle="modal"><i class="fa fa-plus"> </i> Add New</button>
    </div>
    <table class="table table-bordered table-condensed table-hover table-responsive">
        <thead>
            <tr>
                <td>Id</td>
                <td>Email</td>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Phone</td>
                <td>Created Date</td>
                <td>Action</td>
            </tr>
        </thead>
        <tr ng-repeat="employee in employees">
            <td>{{employee.Id}}</td>
            <td>{{employee.Email}}</td>
            <td>{{employee.FirstName}}</td>
            <td>{{employee.LastName}}</td>
            <td>{{employee.Phone}}</td>
            <td>{{employee.CreatedDate}}</td>
            <td>
                <button class="btn btn-xs btn-default" data-target="#addEditUser" data-toggle="modal" ng-click="editUser(employee.Id)"><i class="fa fa-edit"></i></button>
                <button class="btn btn-xs btn-danger" ng-click="DeleteUser(employee.Id)"><i class="fa fa-trash"></i></button>
            </td>
        </tr>
    </table>
    <div id="addEditUser" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Add Detail</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" class="form-control" ng-model="id">
                    <div class="form-group">
                        <label for="email">Email address:</label>
                        <input type="email" class="form-control" id="email" ng-model="email" maxlength="50">
                    </div>
                    <div class="form-group">
                        <label for="firstName">FirstName:</label>
                        <input type="text" class="form-control" id="firstName" ng-model="firstName" maxlength="100">
                    </div>
                    <div class="form-group">
                        <label for="lastName">LastName:</label>
                        <input type="text" class="form-control" id="lastName" ng-model="lastName" maxlength="100">
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone:</label>
                        <input type="text" class="form-control" id="phone" ng-model="phone" maxlength="10">
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                    <button type="submit" class="btn btn-success" ng-click="SaveUser()"><i class="fa fa-save"></i> Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>

Now, run the application. The starting page shows the user list. Click on "Add New" button. This renders a new modal popup; fill in the details and Save.


Figure 3: User Listing


Figure 4: Add User

Download

We can download the complete source code too.