Button with ng-click attribute in child view not working

28 views
Skip to first unread message

Amruta Kamat

unread,
Sep 22, 2019, 2:11:13 PM9/22/19
to Angular and AngularJS discussion
Hi All,
I am trying SPA in MVC  with angular for simple CRUD operation.My Index view  has two links which redirect to child view 

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

 

<!DOCTYPE html>

<html ng-app="ApplicationModule">

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

    <script src="~/MyScripts/DisplayAllEmployeesController.js"></script>

    <script src="~/MyScripts/CreateEmployeeController.js"></script>

    <script src="~/MyScripts/Module.js"></script>

    <script src="~/MyScripts/Service.js"></script>

</head>

<body>

  

    <h2>Index</h2>

               <div>

                    <div>

                        <table>

                            <tr>

                                <td><a href="displayemployees"> View Employee </a></td>

                                <td>|</td>

                                <td><a href="createemployee"> Add Employee </a></td>

                            </tr>

                        </table>

 

                    </div>

                    <div>

                        <div ng-view></div>

                    </div>

                </div>

         

</body>

 

</html>

 


Modul.js contains code for redirecting to child view. Here EmployeeInfo is controller in which all the action methods are 

given

 var app = angular.module("ApplicationModule", []);

    app.factory("ShareData", function () {

        return { value: 0 }

    });

 

    //Defining Routing

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

        $routeProvider.when('/displayemployees',

            {

                templateUrl: 'EmployeeInfo/DisplayAllEmployees',

                controller: 'DisplayAllEmployeesController'

            });

        $routeProvider.when('/createemployee',

            {

                templateUrl: 'EmployeeInfo/CreateEmployee',

                controller: 'CreateEmployeeController'

            });

        $routeProvider.when("/editemployee",

            {

                templateUrl: 'EmployeeInfo/EditEmployee',

                controller: 'EditEmployeeController'

            });

        $routeProvider.when('/deleteemployee',

            {

                templateUrl: 'EmployeeInfo/DeleteEmployee',

                controller: 'DeleteEmployeeController'

            });

        $routeProvider.otherwise(

            {

                redirectTo: '/'

            });

        // $locationProvider.html5Mode(true);

        $locationProvider.html5Mode(true).hashPrefix('!')

    }]);

 

Service.js contains code for angular service, service is used to call WEB API for communicating with database
 
 var app = angular.module("ApplicationModule", []);
app.service("SinglePageCRUDService", function ($http) {

        //Function to Read All Employees
        this.getEmployees = function () {
            return $http.get("/api/EmployeeInfoes");
        };

        //Fundction to Read Employee based upon id
        this.getEmployee = function (id) {
            return $http.get("/api/EmployeeInfoes/" + id);
        };

        //Function to create new Employee
        this.post = function (Employee) {
            var request = $http({
                method: "post",
                url: "/api/EmployeeInfoes",
                data: Employee
            });
            return request;
        };

        //Function  to Edit Employee based upon id 
        this.put = function (id, Employee) {
            var request = $http({
                method: "put",
                url: "/api/EmployeeInfoes/" + id,
                data: Employee
            });
            return request;
        };

        //Function to Delete Employee based upon id
        this.delete = function (id) {
            var request = $http({
                method: "delete",
                url: "/api/EmployeeInfoes/" + id
            });
            return request;
        };
    });

CreateEmployeeController.js contains code for controller associated with child view for creating new employee.

 var app = angular.module("ApplicationModule", []);

app.controller('AddEmployeeController', function ($scope, SinglePageCRUDService) {

    $scope.EmpNo = 0;

    //The Save scope method used to define the Employee object and 

    //post the Employee information to the server by making call to the Service

    $scope.save = function () {

        var Employee = {

            EmpNo: $scope.EmpNo,

            EmpName: $scope.EmpName,

            Salary: $scope.Salary,

            DeptName: $scope.DeptName,

            Designation: $scope.Designation

        };

 

        var promisePost = SinglePageCRUDService.post(Employee);

 

 

        promisePost.then(function (pl) {

            $scope.EmpNo = pl.data.EmpNo;

            alert("EmpNo " + pl.data.EmpNo);

        },

            function (errorPl) {

                $scope.error = 'failure loading Employee', errorPl;

            });

 

    };

});

CreateEmployeeController.cshtml  contains view associated with above controller

@{

    ViewBag.Title = "CreateEmployee";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>New Employee</h2>

    <div  ng-controller="CreateEmployeeController">

       

            <div>

                <table>

                    <tr>

                        <td>EmpNo</td>

                        <td><input type="text" ng-model="EmpNo" />  </td>

                    </tr>

                    <tr>

                        <td>EmpName</td>

                        <td><input type="text" ng-model="EmpName" />  </td>

                    </tr>

                    <tr>

                        <td>Salary</td>

                        <td><input type="text" ng-model="Salary" />  </td>

                    </tr>

                    <tr>

                        <td>DeptName</td>

                        <td><input type="text" ng-model="DeptName" />  </td>

                    </tr>

                    <tr>

                        <td>Designation</td>

                        <td><input type="text" ng-model="Designation" />  </td>

                    </tr>

 

                </table>

 

            </div>

   

        <input type="button" ng-click="click()" value="Click">

    </div>

 

 

Amruta Kamat

unread,
Sep 22, 2019, 2:11:13 PM9/22/19
to Angular and AngularJS discussion

Hi All,

I am trying SPA in MVC with angular for simple CRUD operation. My Index view  has two links which redirect to child view 

Modul.js contains code for redirecting to child view from Index view of EmployeeInfo controller. Here EmployeeInfo is controller in which all the action methods are given

Amruta Kamat

unread,
Sep 22, 2019, 2:11:13 PM9/22/19
to Angular and AngularJS discussion
Hi All,
I am trying SPA in MVC  with angular for simple CRUD operation.My Index view  has two links which redirect to child view 
Modul.js contains code for redirecting to child view. Here EmployeeInfo is controller in which all the action methods are 

Amruta Kamat

unread,
Sep 22, 2019, 2:11:13 PM9/22/19
to Angular and AngularJS discussion

Amruta Kamat

unread,
Sep 22, 2019, 2:11:13 PM9/22/19
to Angular and AngularJS discussion

Hi All,

I am trying SPA in MVC with angular for simple CRUD operation. My Index view  has two links which redirect to child view 

Modul.js contains code for redirecting to child view from Index view of EmployeeInfo controller. Here EmployeeInfo is controller in which all the action methods are given

Amruta Kamat

unread,
Sep 22, 2019, 2:11:14 PM9/22/19
to Angular and AngularJS discussion

Amruta Kamat

unread,
Sep 22, 2019, 2:11:14 PM9/22/19
to Angular and AngularJS discussion
Reply all
Reply to author
Forward
0 new messages