Блог

Так что я очень новичок в AngularJS и AJAX, но недавно я получил эту задачу, и мне нужно просмотреть фреймворк MVC с помощью AngularJS/AJAX. Но, просмотрев несколько ссылок в Интернете, я не смог найти ни одного нужного мне ресурса, связанного с использованием AngularJS/AJAX в рамках MVC.

Поэтому я должен выполнить работу в контроллере, и теперь я сделал это и могу представить данные во внешнем интерфейсе, но я не уверен, как выполнить внешний интерфейс в AngularJS/AJAX и представить данные, которые я получаю от контроллера. Есть ли какой-нибудь веб-сайт или ссылка, по которой я могу перейти? Большое спасибо

     @model IEnumerable<WebApplication4.Models.PDAStatus>

@{
    var result = (List<PDAStatus>)ViewData["MyData"];
}

<div class="row justify-content-center">
    <div class="col-md-12">
        <h2>View Outstanding PDA</h2>
        <div class="panel">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-12">
                        <a href="#" class="btn btn-sm btn-primary pull-left"><i class="fa fa- 
   plus-circle"></i>Add New</a>
                    </div>
                </div>
            </div>
            <div class="panel-body table-responsive">
                <div><table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Action</th>
                            <th scope="col">Employee CardNo</th>
                            <th scope="col">Employee Name</th>
                            <th scope="col">PDA Barcode</th>
                            <th scope="col">Withdraw Date</th>
                            <th scope="col">Return Date</th>
                            <th scope="col">Due In</th>

                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            @if (item.IsReturn == false)
                            {
                                <tr>
                                    <td>
                                        <ul class="action-list">
                                            <li><a asp-action="Update" asp-route-id="@item.Id" 
class="btn btn-primary"><i class="fa fa-pencil"></i></a></li>
                                            <li><a asp-action="Delete" asp-route-id="@item.Id" 
class="btn btn-danger"><i class="fa fa-times"></i></a></li>
                                        </ul>
                                    </td>
                                    <td>@item.EmployeeCardNo</td>
                                    <td>@item.EmployeeName</td>
                                    <td>@item.PDABarcode</td>
                                    <td>@item.WithdrawDate</td>
                                    <td>@item.ReturnDate</td>
                                    <td>@(((int)(item.ReturnDate - DateTime.Now).TotalDays)) 
Days</td>
                                </tr>
                            }
                        }
                    </tbody>
                </table></div>
            </div>
        </div>
    </div>
</div>
 

Представление внутренних данных с помощью AngularJS/AJAX в представлении MVC

В представлении MVC для представления справочных данных с помощью angularjs вы можете обратиться к следующему коду:

Страница Index.csthml:

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

Способ действия контроллера изделия:

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

Результат, как показано ниже:

Более подробную информацию об использовании AngularJS вы можете найти в этом руководстве и использовать метод AngularJS $http или Ajax для вызова метода действия и выполнения операций CRUD.