在MVCVIEW中使用AngularJS/AJAX呈現后端資料

所以我對 AngularJS 和 AJAX 很陌生，但最近我收到了這個任務，我必須使用 AngularJS/AJAX 做 MVC 框架的 VIEW。但是在網上瀏覽了幾個鏈接后，我找不到任何與在 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>

uj5u.com熱心網友回復：

在 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的詳細資訊，可以參考本教程，使用AngularJS的$http或Ajax方法呼叫action方法，進行CRUD操作。

標籤：C＃ angularjs 阿贾克斯 asp.net-core-mvc

上一篇：無法向資料透視表添加計算欄位

下一篇：SeChartjs水平