为什么在 Angularjs POST 请求后 Angular Web API 后端控制器中的数据总是空的？答案

【问题标题】：Why is the data in Angular Web API backend controller always empty after Angularjs POST request?为什么在 Angularjs POST 请求后 Angular Web API 后端控制器中的数据总是空的？
【发布时间】：2020-04-20 09:47:31
【问题描述】：

我是 Angular 新手，尝试搜索许多帖子，但没有一个帮助我在 Angular js 发布后以控制器方法接收数据。有谁知道为什么模型对象的参数是空的，即使 angularjs post 发送了数据？

这是我在 chrome 调试器中找到的请求有效负载，所以我认为一切正常。

{Name: "MyName"}
Name: "MyName"

前端：

   <div id="divMain" ng-app="testCtrl">
    <div id="divTblForm" class="border" ng-controller="ButtonsController">
       <input id="btnTest" class="inptSubmit right roundBorder" type="button" value="Test" ng-click="test()" />
    </div>
   </div>

这里是 javascript（我尝试在没有 stringify 的情况下对 objToSearch 中的属性名称进行字符串化，引用，未引用等等......）

function getAngularApp() {
      return angular.module('testCtrl', []);
    }
app.controller('ButtonsController', function ($scope, $http) {
  $scope.test = function () {

    var objToSearch = {
      Name: 'MyName'
    }

    $http.post("TestAngular/Test", JSON.stringify(objToSearch),
      {
        headers: {
          "Content-Type": "application/json"
        }
      }
    ).success(function (response) {
      alert(response)
    })
      .error(function (error) {
        alert(error);
      });
  }
});

后端：我尝试了使用和不使用 FromBody 属性，但都没有成功..

 [RoutePrefix("TestAngular")]
    public class TestAngularController : Controller
    {
        [System.Web.Http.Route("Test")]
        [System.Web.Http.HttpPost]
        public List<Test> Test([System.Web.Http.FromBody]Test test)
        {
//breakpoint here, parameter 'test' values always empty or null..
            return null;
        }
    }

这是模型类

public class Test
{
    public string Name { get; set; }

}

有人可以帮忙吗？我已经花了 4 个多小时搜索类似的主题并尝试。它变得非常令人筋疲力尽。 :(

【问题讨论】：

标签： javascript angularjs post asp.net-core-webapi

【解决方案1】：

我修改了 AngularJS 代码以使用 $http.post 发布数据，它按预期工作。

在 AngularJS 客户端上

<script>
    function getAngularApp() {
        return angular.module('testCtrl', []);
    }

    var app = getAngularApp();

    app.controller('ButtonsController', function ($scope, $http) {
        $scope.test = function () {

        var objToSearch = {
            Name: 'MyName'
        }

        $http.post("/TestAngular/Test", JSON.stringify(objToSearch),
            {
            headers: {
                "Content-Type": "application/json"
            }
            }
        ).then(function successCallback(response) {
            //code logic here
            console.log("success");
        }, function errorCallback(response) {
            console.log("error");
        });
        }
    });
</script>

测试结果

要解决问题，您可以使用邮递员等工具使用相同的测试数据发出请求，并检查您的控制器操作是否可以接收您发送的数据。如果可能，您可以创建新项目来实现相同的功能，然后检查新项目是否可以正常工作。

【讨论】：