无法使用 asp.net 核心 mvc 使用 angular js 获取和发布数据

Question

我想在我想要获取记录并添加记录的视图中使用 AngularJs 功能，我正在使用以下代码，但我没有得到预期的结果。

    <div ng-app="MyApp" ng-controller="MyController">
        <table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
            <tr>
                <th style="width:100px">Customer Id</th>
                <th style="width:150px">Name</th>
                <th style="width:150px">Country</th>
                <th style="width:100px"></th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td><span>{{m.CustomerId}}</span></td>
                    <td>
                        <span ng-hide="m.EditMode">{{m.Name}}</span>
                        <input type="text" ng-model="m.Name" ng-show="m.EditMode" />
                    </td>
                    <td>
                        <span ng-hide="m.EditMode">{{m.Country}}</span>
                        <input type="text" ng-model="m.Country" ng-show="m.EditMode" />
                    </td>
                    <td>
                        @*<a class="Edit" href="javascript:;" ng-hide="m.EditMode" ng-click="Edit($index)">Edit</a>
                        <a class="Update" href="javascript:;" ng-show="m.EditMode" ng-click="Update($index)">Update</a>
                        <a class="Cancel" href="javascript:;" ng-show="m.EditMode" ng-click="Cancel($index)">Cancel</a>
                        <a href="javascript:;" ng-hide="m.EditMode" ng-click="Delete(m.CustomerId)">Delete</a>*@
                    </td>
                </tr>
            </tbody>
        </table>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width: 150px">
                    Name<br />
                    <input type="text" ng-model="Name" style="width:140px" />
                </td>
                <td style="width: 150px">
                    Country:<br />
                    <input type="text" ng-model="Country" style="width:140px" />
                </td>
                <td style="width: 200px">
                    <br />
                    <input type="button" value="Add" ng-click="Add()" />
                </td>
            </tr>
        </table>
    </div>
    
    
    
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            //Getting records from database.
            var post = $http({
                method: "GET",
                url: "/Customer/GetCustomers",
                dataType: 'json',
                headers: { "Content-Type": "application/json" }
            });
            post.success(function (data, status) {
                //The received response is saved in Customers array.
                $scope.Customers = data;
            });
    
            //Adding new record to database.
            $scope.Add = function () {
                if (typeof ($scope.Name) == "undefined" || typeof ($scope.Country) == "undefined") {
                    return;
                }
                var post = $http({
                    method: "POST",
                    url: "/Customer/InsertCustomer",
                    data: "{name: '" + $scope.Name + "', country: '" + $scope.Country + "'}",,
                    dataType: 'json',
                    headers: { "Content-Type": "application/json" }
                });
                post.success(function (data, status) {
                    //The newly inserted record is inserted into the Customers array.
                    $scope.Customers.push(data)
                });
                $scope.Name = "";
                $scope.Country = "";
            };
        });
    </script>

这是我在第一种方法中的 controller 代码我在调试模式下获取所有记录我得到所有客户并且在保存方法中我没有得到插入的文本数据。

    public JsonResult GetCustomers()
    {       
        var Customers = db.Query<Customer>("Select * from Customer");
        return Json(Customers);
    }

    [HttpPost]
    public JsonResult InsertCustomer(string name, string country)
    {
        Customer customer = new Customer();
        customer.Name = name;
        customer.Country = country;
        db.Save(customer);
        return Json(customer);
    }

我既没有得到任何记录，也无法插入任何记录。任何人都可以帮我解决问题吗

Answer 1

更新

没有记录可以很好地显示数据？

将m.customerid更改为m.CustomerId
将m.name更改为m.Name
将m.country更改为m.Country

     ...
     <tbody>
        <tr ng-repeat="m in Customers">
            <td><span>{{m.customerid}}</span></td>
            <td>
                <span ng-hide="m.EditMode">{{m.name}}</span>
                <input type="text" ng-model="m.name" ng-show="m.EditMode" />
            </td>
            <td>
                <span ng-hide="m.EditMode">{{m.country}}</span>
                <input type="text" ng-model="m.country" ng-show="m.EditMode" />
            </td>
            <td>
                @*<a class="Edit" href="javascript:;" ng-hide="m.EditMode" ng-click="Edit($index)">Edit</a>
                    <a class="Update" href="javascript:;" ng-show="m.EditMode" ng-click="Update($index)">Update</a>
                    <a class="Cancel" href="javascript:;" ng-show="m.EditMode" ng-click="Cancel($index)">Cancel</a>
                    <a href="javascript:;" ng-hide="m.EditMode" ng-click="Delete(m.CustomerId)">Delete</a>*@
            </td>
        </tr>
    </tbody>
     ...

$http 向 controller 发布数据失败？

您需要使用$.param()将其序列化为数组。 并将标头的Content-Type更改为application/x-www-form-urlencoded 。

            var post = $http({
                method: "POST",
                url: "/Customer/InsertCustomer",
                data: $.param({ name: $scope.Name, country: $scope.Country }),
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

            });

测试截图

---

经过我的测试，主要问题是 angular 的$http无法正确传递值，需要将data更改为params 。

测试截图