Single Page Applications with AngularJS in .NET: Part 2

This demo is a continuation of my previous article Single Page Application with AngularJs in .NET.

Please go through the previous demo before going through this.

In the last demo I showed inserting data into and displaying data from a database. In this demo I will show the update and delete functionalities in a SPA using AngularJs. I have provided the source code for CRUD operations to download.

AngularJs Code

The following is the complete AngularJs code.

angular.module('App', ['AngularDemo.EmpAddController',
                       'AngularDemo.AddressController',
                       'AngularDemo.DeleteController'
])

.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.when('/', {
        templateUrl: '/Home/AddEmployee',
        controller: 'EmpAddCtrl',
    });
    $routeProvider.when('/Edit', {
        templateUrl: '/Home/EditEmployee',
        controller: 'EditCtrl'
    });
    $routeProvider.when('/Delete', {
        templateUrl: '/Home/DeleteEmployee',
        controller: 'DeleteCtrl'
    });
    $routeProvider.otherwise({
        redirectTo: '/'
    });
    // Specify HTML5 mode (using the History APIs) or HashBang syntax.
    $locationProvider.html5Mode(false).hashPrefix('!');

}]);

//Add Employee Controller
angular.module('AngularDemo.EmpAddController', ['ngRoute'])
.controller('EmpAddCtrl', function ($scope, $http) {

    $scope.EmpAddressList = {};
    $http.get('/Home/ShowEmpList').success(function (data) {
        $scope.EmpAddressList = data;
    });


    $scope.EmpDetailsModel =
     {
         EmpID: '',
         EmpName: '',
         EmpPhone: ''
     };

    $scope.EmpAddressModel =
    {
        Address1: '',
        Address2: '',
        Address3: ''
    };

    $scope.EmployeeViewModel = {
        empDetailModel: $scope.EmpDetailsModel,
        empAddressModel: $scope.EmpAddressModel
    };

    $scope.AddEmployee = function () {
        //debugger;
        $.ajax({
            url: '/Home/AddEmpDetails',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            traditional: true,
            cache: false,
            data: JSON.stringify({ EmployeeViewModelClient: $scope.EmployeeViewModel }),
            success: function (data) {
                $scope.EmpAddressList.push(data[0]);
                $scope.$apply();
                //$scope.$apply();
                alert("Record is been added");
            }
        });
    };
});

//Address Controller
angular.module('AngularDemo.AddressController', ['ngRoute'])
.controller('EditCtrl', function ($scope, $http) {

    $scope.EmpAddressList = {};
    $http.get('/Home/ShowEmpList').success(function (data) {
        $scope.EmpAddressList = data;

    });
    $scope.EmpDetailsModel =
     {
         EmpID: '',
         EmpName: '',
         EmpPhone: ''
     };

    $scope.EmpAddressModel =
    {
        Address1: '',
        Address2: '',
        Address3: ''
    };

    $scope.EmployeeViewModel = {
        empDetailModel: $scope.EmpDetailsModel,
        empAddressModel: $scope.EmpAddressModel
    };

    $scope.EditEmployee = function (EmployeeID) {
        $.ajax({
            url: '/Home/GetEmployeeById',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            traditional: true,
            data: JSON.stringify({ EmpID: EmployeeID }),
            cache: false,
            success: function (data) {
                $scope.EmpDetailsModel.EmpID = data[0].empDetailModel.EmpID;
                $scope.EmpDetailsModel.EmpName = data[0].empDetailModel.EmpName;
                $scope.EmpDetailsModel.EmpPhone = data[0].empDetailModel.EmpPhone;
                $scope.EmpAddressModel.Address1 = data[0].empAddressModel.Address1
                $scope.EmpAddressModel.Address2 = data[0].empAddressModel.Address2;
                $scope.EmpAddressModel.Address3 = data[0].empAddressModel.Address3;
                $scope.$apply();
            }
        });
    };

    $scope.UpdateEmployee = function () {

        $.ajax({
            url: '/Home/UpdateEmployee',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            traditional: true,
            data: JSON.stringify({ EmployeeViewModelClient: $scope.EmployeeViewModel }),
            cache: false,
            success: function (data) {
                $scope.EmpAddressList = data;
                $scope.$apply();
            }
        });
    };
});

angular.module('AngularDemo.DeleteController', ['ngRoute'])
.controller('DeleteCtrl', function ($scope, $http) {
    //$scope.Message = "Delete in Part 2 is coming soon";

    $scope.EmpAddressList = {};
    $http.get('/Home/ShowEmpList').success(function (data) {
        $scope.EmpAddressList = data;
    });

    $scope.DeleteByID = function (EmployeeID) {

        $.ajax({
            url: '/Home/DeleteByID',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            traditional: true,
            cache: false,
            data: JSON.stringify({ EmpID: EmployeeID }),
            success: function (data) {
                $scope.EmpAddressList = data;
                $scope.$apply();
            }
        });

    };
});

Here I will explain what client-side routing is and some AngularJs directives because I have already done that in my previous demo.

AngularJs Edit controller

angular.module('AngularDemo.AddressController', ['ngRoute'])
.controller('EditCtrl', function ($scope, $http) {

    $scope.EmpAddressList = {};
    $http.get('/Home/ShowEmpList').success(function (data) {
        $scope.EmpAddressList = data;

    });
    $scope.EmpDetailsModel =
     {
         EmpID: '',
         EmpName: '',
         EmpPhone: ''
     };

    $scope.EmpAddressModel =
    {
        Address1: '',
        Address2: '',
        Address3: ''
    };

    $scope.EmployeeViewModel = {
        empDetailModel: $scope.EmpDetailsModel,
        empAddressModel: $scope.EmpAddressModel
    };

    $scope.EditEmployee = function (EmployeeID) {
        $.ajax({
            url: '/Home/GetEmployeeById',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            traditional: true,
            data: JSON.stringify({ EmpID: EmployeeID }),
            cache: false,
            success: function (data) {
                $scope.EmpDetailsModel.EmpID = data[0].empDetailModel.EmpID;
                $scope.EmpDetailsModel.EmpName = data[0].empDetailModel.EmpName;
                $scope.EmpDetailsModel.EmpPhone = data[0].empDetailModel.EmpPhone;
                $scope.EmpAddressModel.Address1 = data[0].empAddressModel.Address1
                $scope.EmpAddressModel.Address2 = data[0].empAddressModel.Address2;
                $scope.EmpAddressModel.Address3 = data[0].empAddressModel.Address3;
                $scope.$apply();

            }
        });

    };

    $scope.UpdateEmployee = function () {

        $.ajax({
            url: '/Home/UpdateEmployee',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            traditional: true,
            data: JSON.stringify({ EmployeeViewModelClient: $scope.EmployeeViewModel }),
            cache: false,
            success: function (data) {
                $scope.EmpAddressList = data;
                $scope.$apply();
            }
        });
    };
});

Edit/Update View HTML

  <div style="width: 50%; margin: 50px auto;">

    <table id="EmployeeDetails">
        <tr>
            <td>
                <strong>Employee Name:</strong>
            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpDetailsModel.EmpName" placeholder="Employee Name"/>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Employee Phone:</strong>

            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpDetailsModel.EmpPhone" placeholder="Employee Phone" />
            </td>
        </tr>
        <tr>
            <td>
                <strong>Address 1:</strong>

            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpAddressModel.Address1" placeholder="Address 1" />
            </td>
        </tr>
        <tr>
            <td>
                <strong>Address 2:</strong>

            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpAddressModel.Address2" placeholder="Address 2" />
            </td>
        </tr>

        <tr>
            <td>
                <strong>Address 3:</strong>

            </td>
            <td>
                <input type="text" class="form-control" ng-model="EmpAddressModel.Address3" placeholder="Address 3" />
            </td>
        </tr>
        <br />
        <tr>
            <td>
            </td>
            <td>
                <button type="button" ng-click="UpdateEmployee();" class="btn btn-primary">Update</button>
            </td>
        </tr>

    </table>
</div>

<hr style="color: black" />

<div style="width: 50%; margin: 50px auto;">
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"><b>Employee Details </b></div>
        <div class="table-responsive">
            <table id="EmployeeTable" class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Employee ID</th>
                        <th>Employee Name</th>
                        <th>Employee Phone</th>
                        <th>Employee Address1</th>
                        <th>Employee Address2</th>
                        <th>Employee Address3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="Emp in EmpAddressList">

                        <td>{{Emp.empDetailModel.EmpID}}</td>
                        <td>{{Emp.empDetailModel.EmpName}}</td>
                        <td>{{Emp.empDetailModel.EmpPhone}}</td>
                        <td>{{Emp.empAddressModel.Address1}}</td>
                        <td>{{Emp.empAddressModel.Address2}}</td>
                        <td>{{Emp.empAddressModel.Address3}}</td>
                        <td><span ng-click="EditEmployee(Emp.empDetailModel.EmpID)" class="btn btn-primary">Edit</span></td>
                    </tr>

                    @*<tr ng-if="states.NewRow">*@
                    <tr ng-if="EmpAddressList.length == 0">
                        <td class="text-center" colspan="4">There are no Employee details to display
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>

Edit/Update Output



When the user clicks on Edit/Update, it populates all the records with a corresponding edit button for each row, the preceding is the screen shot of it. When the user clicks the edit button the respective data is populated in text boxes.



After changing the values of the employee and clicking on the update button, values are passed to the controller action, the following are the two screen shots of the two models EmpDetailsModel and EmpAddressModel with data passed to the action.





Database After Update

Before the update all the values for EmpID 177 was 1 and after the update the values are 5.



AngularJs Delete Controller

angular.module('AngularDemo.DeleteController', ['ngRoute'])
.controller('DeleteCtrl', function ($scope, $http) {
    //$scope.Message = "Delete in Part 2 is coming soon";

    $scope.EmpAddressList = {};
    $http.get('/Home/ShowEmpList').success(function (data) {
        $scope.EmpAddressList = data;
    });

    $scope.DeleteByID = function (EmployeeID) {

        $.ajax({
            url: '/Home/DeleteByID',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            traditional: true,
            cache: false,
            data: JSON.stringify({ EmpID: EmployeeID }),
            success: function (data) {
                $scope.EmpAddressList = data;
                $scope.$apply();
            }
        });
    };
});

When the user clicks on delete from the menu, it populates all the records with the corresponding delete button for each row, the following is the screen shot of it.



Delete View HTML

  <div style="width: 50%; margin: 50px auto;">
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"><b>Employee Details </b></div>
        <div class="table-responsive">
            <table id="EmployeeTable" class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Employee ID</th>
                        <th>Employee Name</th>
                        <th>Employee Phone</th>
                        <th>Employee Address1</th>
                        <th>Employee Address2</th>
                        <th>Employee Address3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="Emp in EmpAddressList">
                        <td>{{Emp.empDetailModel.EmpID}}</td>
                        <td>{{Emp.empDetailModel.EmpName}}</td>
                        <td>{{Emp.empDetailModel.EmpPhone}}</td>
                        <td>{{Emp.empAddressModel.Address1}}</td>
                        <td>{{Emp.empAddressModel.Address2}}</td>
                        <td>{{Emp.empAddressModel.Address3}}</td>
                        <td><button type="button" ng-click="DeleteByID(Emp.empDetailModel.EmpID)" class="btn btn-primary">Delete</button></td>
                    </tr>
                    <tr ng-if="EmpAddressList.length == 0">
                        <td class="text-center" colspan="4">There are no Employee details to display
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>

When the user clicks on the delete button the corresponding records are deleted.



Database after Record Deleted:



Please let me know if you have any questions on this demo.