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.

  1. angular.module('App', ['AngularDemo.EmpAddController',  
  2.                        'AngularDemo.AddressController',  
  3.                        'AngularDemo.DeleteController'  
  4. ])  
  5.   
  6. .config(['$routeProvider''$locationProvider'function ($routeProvider, $locationProvider) {  
  7.   
  8.     $routeProvider.when('/', {  
  9.         templateUrl: '/Home/AddEmployee',  
  10.         controller: 'EmpAddCtrl',  
  11.     });  
  12.     $routeProvider.when('/Edit', {  
  13.         templateUrl: '/Home/EditEmployee',  
  14.         controller: 'EditCtrl'  
  15.     });  
  16.     $routeProvider.when('/Delete', {  
  17.         templateUrl: '/Home/DeleteEmployee',  
  18.         controller: 'DeleteCtrl'  
  19.     });  
  20.     $routeProvider.otherwise({  
  21.         redirectTo: '/'  
  22.     });  
  23.     // Specify HTML5 mode (using the History APIs) or HashBang syntax.  
  24.     $locationProvider.html5Mode(false).hashPrefix('!');  
  25.   
  26. }]);  
  27.   
  28. //Add Employee Controller  
  29. angular.module('AngularDemo.EmpAddController', ['ngRoute'])  
  30. .controller('EmpAddCtrl'function ($scope, $http) {  
  31.   
  32.     $scope.EmpAddressList = {};  
  33.     $http.get('/Home/ShowEmpList').success(function (data) {  
  34.         $scope.EmpAddressList = data;  
  35.     });  
  36.   
  37.   
  38.     $scope.EmpDetailsModel =  
  39.      {  
  40.          EmpID: '',  
  41.          EmpName: '',  
  42.          EmpPhone: ''  
  43.      };  
  44.   
  45.     $scope.EmpAddressModel =  
  46.     {  
  47.         Address1: '',  
  48.         Address2: '',  
  49.         Address3: ''  
  50.     };  
  51.   
  52.     $scope.EmployeeViewModel = {  
  53.         empDetailModel: $scope.EmpDetailsModel,  
  54.         empAddressModel: $scope.EmpAddressModel  
  55.     };  
  56.   
  57.     $scope.AddEmployee = function () {  
  58.         //debugger;  
  59.         $.ajax({  
  60.             url: '/Home/AddEmpDetails',  
  61.             type: 'POST',  
  62.             dataType: 'json',  
  63.             contentType: 'application/json',  
  64.             traditional: true,  
  65.             cache: false,  
  66.             data: JSON.stringify({ EmployeeViewModelClient: $scope.EmployeeViewModel }),  
  67.             success: function (data) {  
  68.                 $scope.EmpAddressList.push(data[0]);  
  69.                 $scope.$apply();  
  70.                 //$scope.$apply();  
  71.                 alert("Record is been added");  
  72.             }  
  73.         });  
  74.     };  
  75. });  
  76.   
  77. //Address Controller  
  78. angular.module('AngularDemo.AddressController', ['ngRoute'])  
  79. .controller('EditCtrl'function ($scope, $http) {  
  80.   
  81.     $scope.EmpAddressList = {};  
  82.     $http.get('/Home/ShowEmpList').success(function (data) {  
  83.         $scope.EmpAddressList = data;  
  84.   
  85.     });  
  86.     $scope.EmpDetailsModel =  
  87.      {  
  88.          EmpID: '',  
  89.          EmpName: '',  
  90.          EmpPhone: ''  
  91.      };  
  92.   
  93.     $scope.EmpAddressModel =  
  94.     {  
  95.         Address1: '',  
  96.         Address2: '',  
  97.         Address3: ''  
  98.     };  
  99.   
  100.     $scope.EmployeeViewModel = {  
  101.         empDetailModel: $scope.EmpDetailsModel,  
  102.         empAddressModel: $scope.EmpAddressModel  
  103.     };  
  104.   
  105.     $scope.EditEmployee = function (EmployeeID) {  
  106.         $.ajax({  
  107.             url: '/Home/GetEmployeeById',  
  108.             type: 'POST',  
  109.             dataType: 'json',  
  110.             contentType: 'application/json',  
  111.             traditional: true,  
  112.             data: JSON.stringify({ EmpID: EmployeeID }),  
  113.             cache: false,  
  114.             success: function (data) {  
  115.                 $scope.EmpDetailsModel.EmpID = data[0].empDetailModel.EmpID;  
  116.                 $scope.EmpDetailsModel.EmpName = data[0].empDetailModel.EmpName;  
  117.                 $scope.EmpDetailsModel.EmpPhone = data[0].empDetailModel.EmpPhone;  
  118.                 $scope.EmpAddressModel.Address1 = data[0].empAddressModel.Address1  
  119.                 $scope.EmpAddressModel.Address2 = data[0].empAddressModel.Address2;  
  120.                 $scope.EmpAddressModel.Address3 = data[0].empAddressModel.Address3;  
  121.                 $scope.$apply();  
  122.             }  
  123.         });  
  124.     };  
  125.   
  126.     $scope.UpdateEmployee = function () {  
  127.   
  128.         $.ajax({  
  129.             url: '/Home/UpdateEmployee',  
  130.             type: 'POST',  
  131.             dataType: 'json',  
  132.             contentType: 'application/json',  
  133.             traditional: true,  
  134.             data: JSON.stringify({ EmployeeViewModelClient: $scope.EmployeeViewModel }),  
  135.             cache: false,  
  136.             success: function (data) {  
  137.                 $scope.EmpAddressList = data;  
  138.                 $scope.$apply();  
  139.             }  
  140.         });  
  141.     };  
  142. });  
  143.   
  144. angular.module('AngularDemo.DeleteController', ['ngRoute'])  
  145. .controller('DeleteCtrl'function ($scope, $http) {  
  146.     //$scope.Message = "Delete in Part 2 is coming soon";  
  147.   
  148.     $scope.EmpAddressList = {};  
  149.     $http.get('/Home/ShowEmpList').success(function (data) {  
  150.         $scope.EmpAddressList = data;  
  151.     });  
  152.   
  153.     $scope.DeleteByID = function (EmployeeID) {  
  154.   
  155.         $.ajax({  
  156.             url: '/Home/DeleteByID',  
  157.             type: 'POST',  
  158.             dataType: 'json',  
  159.             contentType: 'application/json',  
  160.             traditional: true,  
  161.             cache: false,  
  162.             data: JSON.stringify({ EmpID: EmployeeID }),  
  163.             success: function (data) {  
  164.                 $scope.EmpAddressList = data;  
  165.                 $scope.$apply();  
  166.             }  
  167.         });  
  168.   
  169.     };  
  170. });  
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
  1. angular.module('AngularDemo.AddressController', ['ngRoute'])  
  2. .controller('EditCtrl', function ($scope, $http) {  
  3.   
  4.     $scope.EmpAddressList = {};  
  5.     $http.get('/Home/ShowEmpList').success(function (data) {  
  6.         $scope.EmpAddressList = data;  
  7.   
  8.     });  
  9.     $scope.EmpDetailsModel =  
  10.      {  
  11.          EmpID: '',  
  12.          EmpName: '',  
  13.          EmpPhone: ''  
  14.      };  
  15.   
  16.     $scope.EmpAddressModel =  
  17.     {  
  18.         Address1: '',  
  19.         Address2: '',  
  20.         Address3: ''  
  21.     };  
  22.   
  23.     $scope.EmployeeViewModel = {  
  24.         empDetailModel: $scope.EmpDetailsModel,  
  25.         empAddressModel: $scope.EmpAddressModel  
  26.     };  
  27.   
  28.     $scope.EditEmployee = function (EmployeeID) {  
  29.         $.ajax({  
  30.             url: '/Home/GetEmployeeById',  
  31.             type: 'POST',  
  32.             dataType: 'json',  
  33.             contentType: 'application/json',  
  34.             traditional: true,  
  35.             data: JSON.stringify({ EmpID: EmployeeID }),  
  36.             cache: false,  
  37.             success: function (data) {  
  38.                 $scope.EmpDetailsModel.EmpID = data[0].empDetailModel.EmpID;  
  39.                 $scope.EmpDetailsModel.EmpName = data[0].empDetailModel.EmpName;  
  40.                 $scope.EmpDetailsModel.EmpPhone = data[0].empDetailModel.EmpPhone;  
  41.                 $scope.EmpAddressModel.Address1 = data[0].empAddressModel.Address1  
  42.                 $scope.EmpAddressModel.Address2 = data[0].empAddressModel.Address2;  
  43.                 $scope.EmpAddressModel.Address3 = data[0].empAddressModel.Address3;  
  44.                 $scope.$apply();  
  45.   
  46.             }  
  47.         });  
  48.   
  49.     };  
  50.   
  51.     $scope.UpdateEmployee = function () {  
  52.   
  53.         $.ajax({  
  54.             url: '/Home/UpdateEmployee',  
  55.             type: 'POST',  
  56.             dataType: 'json',  
  57.             contentType: 'application/json',  
  58.             traditional: true,  
  59.             data: JSON.stringify({ EmployeeViewModelClient: $scope.EmployeeViewModel }),  
  60.             cache: false,  
  61.             success: function (data) {  
  62.                 $scope.EmpAddressList = data;  
  63.                 $scope.$apply();  
  64.             }  
  65.         });  
  66.     };  
  67. });  
Edit/Update View HTML
  1.   <div style="width: 50%; margin: 50px auto;">  
  2.   
  3.     <table id="EmployeeDetails">  
  4.         <tr>  
  5.             <td>  
  6.                 <strong>Employee Name:</strong>  
  7.             </td>  
  8.             <td>  
  9.                 <input type="text" class="form-control" ng-model="EmpDetailsModel.EmpName" placeholder="Employee Name"/>  
  10.             </td>  
  11.         </tr>  
  12.         <tr>  
  13.             <td>  
  14.                 <strong>Employee Phone:</strong>  
  15.   
  16.             </td>  
  17.             <td>  
  18.                 <input type="text" class="form-control" ng-model="EmpDetailsModel.EmpPhone" placeholder="Employee Phone" />  
  19.             </td>  
  20.         </tr>  
  21.         <tr>  
  22.             <td>  
  23.                 <strong>Address 1:</strong>  
  24.   
  25.             </td>  
  26.             <td>  
  27.                 <input type="text" class="form-control" ng-model="EmpAddressModel.Address1" placeholder="Address 1" />  
  28.             </td>  
  29.         </tr>  
  30.         <tr>  
  31.             <td>  
  32.                 <strong>Address 2:</strong>  
  33.   
  34.             </td>  
  35.             <td>  
  36.                 <input type="text" class="form-control" ng-model="EmpAddressModel.Address2" placeholder="Address 2" />  
  37.             </td>  
  38.         </tr>  
  39.   
  40.         <tr>  
  41.             <td>  
  42.                 <strong>Address 3:</strong>  
  43.   
  44.             </td>  
  45.             <td>  
  46.                 <input type="text" class="form-control" ng-model="EmpAddressModel.Address3" placeholder="Address 3" />  
  47.             </td>  
  48.         </tr>  
  49.         <br />  
  50.         <tr>  
  51.             <td>      
  52.             </td>  
  53.             <td>  
  54.                 <button type="button" ng-click="UpdateEmployee();" class="btn btn-primary">Update</button>  
  55.             </td>  
  56.         </tr>  
  57.   
  58.     </table>  
  59. </div>  
  60.   
  61. <hr style="color: black" />  
  62.   
  63. <div style="width: 50%; margin: 50px auto;">  
  64.     <div class="panel panel-default">  
  65.         <!-- Default panel contents -->  
  66.         <div class="panel-heading"><b>Employee Details </b></div>  
  67.         <div class="table-responsive">  
  68.             <table id="EmployeeTable" class="table table-striped table-bordered table-hover table-condensed">  
  69.                 <thead>  
  70.                     <tr>  
  71.                         <th>Employee ID</th>  
  72.                         <th>Employee Name</th>  
  73.                         <th>Employee Phone</th>  
  74.                         <th>Employee Address1</th>  
  75.                         <th>Employee Address2</th>  
  76.                         <th>Employee Address3</th>  
  77.                     </tr>  
  78.                 </thead>  
  79.                 <tbody>  
  80.                     <tr data-ng-repeat="Emp in EmpAddressList">  
  81.   
  82.                         <td>{{Emp.empDetailModel.EmpID}}</td>  
  83.                         <td>{{Emp.empDetailModel.EmpName}}</td>  
  84.                         <td>{{Emp.empDetailModel.EmpPhone}}</td>  
  85.                         <td>{{Emp.empAddressModel.Address1}}</td>  
  86.                         <td>{{Emp.empAddressModel.Address2}}</td>  
  87.                         <td>{{Emp.empAddressModel.Address3}}</td>  
  88.                         <td><span ng-click="EditEmployee(Emp.empDetailModel.EmpID)" class="btn btn-primary">Edit</span></td>  
  89.                     </tr>  
  90.   
  91.                     @*<tr ng-if="states.NewRow">*@  
  92.                     <tr ng-if="EmpAddressList.length == 0">  
  93.                         <td class="text-center" colspan="4">There are no Employee details to display  
  94.                         </td>  
  95.                     </tr>  
  96.                 </tbody>  
  97.             </table>  
  98.   
  99.         </div>  
  100.     </div>  
  101. </div>  
Edit/Update Output

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.

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.

EmpDetailsModel

EmpAddressModel

Database After Update

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

Database After Update

AngularJs Delete Controller
  1. angular.module('AngularDemo.DeleteController', ['ngRoute'])  
  2. .controller('DeleteCtrl', function ($scope, $http) {  
  3.     //$scope.Message = "Delete in Part 2 is coming soon";  
  4.   
  5.     $scope.EmpAddressList = {};  
  6.     $http.get('/Home/ShowEmpList').success(function (data) {  
  7.         $scope.EmpAddressList = data;  
  8.     });  
  9.   
  10.     $scope.DeleteByID = function (EmployeeID) {  
  11.   
  12.         $.ajax({  
  13.             url: '/Home/DeleteByID',  
  14.             type: 'POST',  
  15.             dataType: 'json',  
  16.             contentType: 'application/json',  
  17.             traditional: true,  
  18.             cache: false,  
  19.             data: JSON.stringify({ EmpID: EmployeeID }),  
  20.             success: function (data) {  
  21.                 $scope.EmpAddressList = data;  
  22.                 $scope.$apply();  
  23.             }  
  24.         });  
  25.     };  
  26. });  
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.

corresponding delete button

Delete View HTML
  1.   <div style="width: 50%; margin: 50px auto;">  
  2.     <div class="panel panel-default">  
  3.         <!-- Default panel contents -->  
  4.         <div class="panel-heading"><b>Employee Details </b></div>  
  5.         <div class="table-responsive">  
  6.             <table id="EmployeeTable" class="table table-striped table-bordered table-hover table-condensed">  
  7.                 <thead>  
  8.                     <tr>  
  9.                         <th>Employee ID</th>  
  10.                         <th>Employee Name</th>  
  11.                         <th>Employee Phone</th>  
  12.                         <th>Employee Address1</th>  
  13.                         <th>Employee Address2</th>  
  14.                         <th>Employee Address3</th>  
  15.                     </tr>  
  16.                 </thead>  
  17.                 <tbody>  
  18.                     <tr data-ng-repeat="Emp in EmpAddressList">  
  19.                         <td>{{Emp.empDetailModel.EmpID}}</td>  
  20.                         <td>{{Emp.empDetailModel.EmpName}}</td>  
  21.                         <td>{{Emp.empDetailModel.EmpPhone}}</td>  
  22.                         <td>{{Emp.empAddressModel.Address1}}</td>  
  23.                         <td>{{Emp.empAddressModel.Address2}}</td>  
  24.                         <td>{{Emp.empAddressModel.Address3}}</td>  
  25.                         <td><button type="button" ng-click="DeleteByID(Emp.empDetailModel.EmpID)" class="btn btn-primary">Delete</button></td>  
  26.                     </tr>  
  27.                     <tr ng-if="EmpAddressList.length == 0">  
  28.                         <td class="text-center" colspan="4">There are no Employee details to display  
  29.                         </td>  
  30.                     </tr>  
  31.                 </tbody>  
  32.             </table>  
  33.   
  34.         </div>  
  35.     </div>  
  36. </div>  
When the user clicks on the delete button the corresponding records are deleted.

corresponding records

Database after Record Deleted:

table

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