Remove From My Forums

hard to understand . how can I make a simplest code

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

Asked by:

hard to understand . how can I make a simplest code

Question

All replies