Angular, Bootstrap And ASP.NET MVC - Part Six

In previous articles, we have learnt AngularJS project setup, styling with bootstrap, AngularJS structure, data-binding, routing, and copying of Angular objects when form is saved or cancelled, etc.

Please have a look at my previous articles before going through this article.

• Angular, Bootstrap And ASP.NET MVC - Part One
• Angular, Bootstrap And ASP.NET MVC - Part Two
• Angular, Bootstrap And ASP.NET MVC - Part Three
• Angular, Bootstrap And ASP.NET MVC - Part Four
• Angular, Bootstrap And ASP.NET MVC - Part Five

From the previous articles, we have the following homepage.

When we click on this “Add new student” button, then it will navigate to Student Form as below, where form data is shown.

In this article, we are going to manage the same page for both options, updating the existing data and also inserting new data.

Step 1

In “Home.html”, let's add another button that updates the existing student data when clicked. So, “Home.html” will look like the following.

<input type="button" class="btn btn-primary" value="Add new student" ng-click="addNewStudent()" />
   <br />
   <br/>
<input type="button" class="btn btn-primary" value="Update student" ng-click="updateStudent(1)"/>

For testing purposes, we are passing hard-coded id (1) in “updateStudent” method. In real applications, we get id from the list and pass it like this “ng-click="updateStudent(id)"”.

Step 2

Let’s create respective methods in “HomeController.js”.

studentFormsApp.controller("homeController",
    function ($scope, $location) {
        $scope.addNewStudent = function () {
            $location.path('/newStudentForm');
        };

        $scope.updateStudent = function (id) {
            $location.path('/updateStudentForm/'+ id);  /*Here we are passing id. For 'updateStudentForm' we need to add route in StudentFormsApp.js*/
        };
    })

In “updateStudent” function, we are passing “id”. We are linking path to ‘updateStudentForm’ so we need to set up route in “StudentFormsApp.js”.

Step 3

In “StudentFormsApp.js”, we will add new “.when” method that links to “sfTemplate.html” but with “id” as parameter.

.when("/updateStudentForm/: id", {
        templateUrl: "app/StudentForm/sfTemplate.html",
        controller: "sfController"
    })

Step 4

Please note that we are opening the same “sfTemplate.html” and same Controller “sfController”. But within this Controller, we need to check if the function has “id” as parameter. If “id” is passed then it means the form with previous data should be displayed whereas if “id” is not passed, it means form with empty data should be displayed.

So, in “sfController.js”, lets add “$routeParams” as the service which holds the parameters “id” in this case. So, we check if “$routeParams” has “id” or not.

Final code for “sfController.js” will look like,

studentFormsApp.controller('sfController',
    function sfController($scope, $window, $routeParams, sfService) {

 if ($routeParams.id) {
            $scope.student = sfService.getStudent($routeParams.id);
        }
        else {
            $scope.student = { id: 0 };
        }


        $scope.updatedStudent = angular.copy($scope.student);

        $scope.departments = [
               "Math",
               "Physics",
               "Chemistry",
               "English"
        ];

        $scope.submitForm = function () {
            if ($scope.updatedStudent.id == 0) {
                //insert new student data
                sfService.insertStudent($scope.updatedStudent);
            }
            else {
                //update the student data
                sfService.updateStudent($scope.updatedStudent);
            }

            $scope.student = angular.copy($scope.updatedStudent);
            $window.history.back();
        }
        $scope.cancelForm = function () {
            $window.history.back();
        }
    });

From the above code, if we have passed “id” as parameter then it will retrieve the data from “sfService” as “sfService.getStudent($routeParams.id)”

In the “submitForm”, if we have “id == 0”, this means it is new student’s data so we need to insert this like,

sfService.insertStudent($scope.updatedStudent);

Whereas, if it has “id != 0”, this means we have to update its data so we are updating like,

sfService.updateStudent($scope.updatedStudent);

Step 5

Next, we need to create ‘getStudent’, ‘insertStudent’ and ‘updateStudent’ methods in “sfService.js” so final code snippet of “sfService.js” will look like,

studentFormsApp.factory('sfService',
    function () {
        var getStudent = function (id) {
            if (id == 1) {
                return {
                    id: 1,
                    fullName: "Kishor Bikram Oli",
                    objective: "To become a great software engineer",
                    department: "Physics",
                    hobbiesGaming: true,
                    hobbiesTravel: false,
                    hobbiesPhotography: true,
                    gender: "Male"
                };
            }
            return null;
        };

        var insertStudent = function (newStudent) {
            // Webservice, ajax calls to insert into the database
            return true;
        };

        var updateStudent = function (student) {
            //Webservice, ajax calls to updated into the database
            return true;
        };
        return {
            getStudent: getStudent,
            insertStudent: insertStudent,
            updateStudent: updateStudent,
        };
    });

From the above code, in the “getStudent” method, if the id == 1 then we are returning our data else returning null. This ensures that if “id” is passed then it will return respective data and display this data in the form otherwise, it will display form with empty data.

Step 6

Final code of “StudentFormsApp.js” will look like,

var studentFormsApp = angular.module('studentFormsApp', ["ngRoute"]);

studentFormsApp.config(function ($routeProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "app/Home.html",
            controller: "homeController"
    })
    .when("/newStudentForm", {
        templateUrl: "app/StudentForm/sfTemplate.html",
        controller: "sfController"
    })
    .when("/updateStudentForm/:id", {
        templateUrl: "app/StudentForm/sfTemplate.html",
        controller: "sfController"
    })
    .otherwise({
        redirectTo: "/home"
    })
});

Step 7

Run the application.

When you click on the “Add new student” then it will display form with empty data.

And when you click on “Update Student” button, then it will display the same form but with student data.

Get the complete project from GitHub.

We will learn more in the next articles. I'll keep you posted.

Thanks, Happy coding!