Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR JAVASCRIPT

Presenting backend data using AngularJS/AJAX in MVC VIEW

@*Use a table to display the data.*@
<div ng-app="myApp" ng-controller="myCtrl">
    <table class="table">
        <thead>
            <tr>
                <th>
                     Id
                </th>
                <th>
                    Name
                </th>
                <th>
                     SelectedState
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="x in articles">
                <td>{{ x.id }}</td>
                <td>{{ x.name }}</td>
                <td>{{ x.selectedState }}</td>
                <td>button</td>
            </tr>
        </tbody>
    </table>
</div>

@section Scripts{
     @*add the angularjs reference*@
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            //call the action method to get all data, then assign the response data to the model.
            $http.get("/Article/GetAllArticles").then(function (response) {
                $scope.articles = response.data;
            }); 
        });  
    </script>
}
 
PREVIOUS NEXT
Tagged: #Presenting #backend #data #MVC #VIEW
ADD COMMENT
Topic
Name
3+3 =