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>
}

Presenting backend data using AngularJS/AJAX in MVC VIEW

public IActionResult GetAllArticles()
    {   //query database to get all article with state.
        var articles = new List<Article>(){
            new Article() { Id = 1, Name = "A", SelectedState = "Open" },
            new Article() { Id = 2, Name = "B", SelectedState = "Scheduled" },
             new Article() { Id = 3, Name = "C", SelectedState = "Closed" },
        };
        return Json(articles);
    }