Post
Ask Question

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

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 screenshot 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 screenshots 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 were 1 and after the update, the values were 5.

Database After Update

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 a screenshot of it.

Corresponding delete button

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.

Corresponding records

Database after Record Deleted.

Table

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


Similar Articles