在 MVC VIEW 中使用 AngularJS/AJAX 呈现后端数据

Posted 2023-03-31

【中文标题】在 MVC VIEW 中使用 AngularJS/AJAX 呈现后端数据

【英文标题】：Presenting backend data using AngularJS/AJAX in MVC VIEW

【发布时间】：2021-10-18 03:01:24

【问题描述】：

所以我对 AngularJS 和 AJAX 很陌生，但是最近我收到了这个任务，我必须使用 AngularJS/AJAX 来查看 MVC 框架。但是在网上浏览了几个链接后，我找不到任何与在 MVC 框架中使用 AngularJS/AJAX 相关的资源。

所以我必须在控制器中执行 CRUD，现在我已经完成并且能够在前端呈现数据，但我不确定如何在 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>

【参考方案1】：

在 MVC VIEW 中使用 AngularJS/AJAX 呈现后端数据

在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使用的详细信息，你可以参考this tutorial，并使用AngularJS $http或Ajax method来调用action方法并进行CRUD操作。