locked
hard to understand . how can I make a simplest code RRS feed

  • Question

  • User-1045082127 posted

    hi every body

    accroding to the title I was look up a way to make a simple code for interaction between a mvc  action and razor . see snipped code:

    var PersonApp = angular.module('PersonApp', []);
    
    PersonApp.controller('PersonController', function ($scope, PersonService) {
        window.setInterval(function () {
            getPersons();
        }, 2000);
        
        function getPersons() {
            PersonService.getPersons()
                .success(function (studs) {
                    $scope.students = studs;
                })
                .error(function (error) {
                    $scope.status = 'Unable to load customer data: ' + error.message;
                    console.log($scope.status);
                });
        }
    });
    PersonApp.factory('PersonService', ['$http', function ($http) {
        var PersonService = {};
        PersonService.getPersons = function () {
            return $http.get('/Home/GetData');
        };
        return PersonService;
    
    
    
    }]);

    tnx and regards

    Thursday, September 27, 2018 8:52 AM

All replies

  • User61956409 posted

    Hi aminsoraya,

    It seems that you'd like to use AngularJS $http service to make request to your controller action and bind the returned data in your view. The following sample code work for me, you can refer to it.

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="PersonApp" ng-controller="PersonController">
            <h1>Student List</h1>
            <br />
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="stud in students">
                        <td>{{stud.Id}}</td>
                        <td>{{stud.Name}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>
    <script>
        var PersonApp = angular.module('PersonApp', []);
    
        PersonApp.controller('PersonController', function ($scope, PersonService) {
            window.setInterval(function () {
                getPersons();
            }, 5000);
    
            function getPersons() {
                PersonService.getPersons().then(function (studs) {
                    $scope.students = studs;
                });
               
            }
        });
        PersonApp.factory('PersonService', ['$http', function ($http) {
            var PersonService = {};
            PersonService.getPersons = function () {
                return $http.get('/Home/GetData').then(function mySuccess(response) {
                    return response.data;
                }, function myError(response) {
                    return response.statusText;
                });
            };
            return PersonService;
        }]);
    </script>
    

    Test Result:

    With Regards,

    Fei Han

    Friday, September 28, 2018 6:42 AM