将 JSON 对象传递给 WebApi

Question

我正在尝试将数据从我的网页发布到我的 RegistrationController Api。我在提交表单时看到了它，但是当我在 WebApi 上命中断点时，参数“pilot”为空。有人能告诉我我需要做什么才能将数据从网页传递到 Registration ApiController 吗？

我看到了这个post，但它似乎对我不起作用。这个post，接近我的问题，提到模型需要注释，但仍然不适合我。

cshtml页面上的按钮：

<button id="submitRegistration" class="btn btn-lg btn-primary btn-block"  
    type="submit">Submit</button>

角度注册控制器：

<script type="text/javascript">
'use strict';

var sampleApp = angular.module('RegistrationApp', []);

sampleApp.controller('RegistrationController', function ($scope, $http) {
    var registrationData = {
        "firstname": $scope.firstname,
        "lastname": $scope.lastname,
        "faaNumber": $scope.faaNumber
    };

    $('#submitRegistration').click(function () {

        registrationData = {
            FirstName: $scope.firstname,
            LastName: $scope.lastname,
            FAANumber: $scope.faaNumber
        };

       // When I hit this debugger, the data is good.
       debugger;
        $.post("api/registration",
                JSON.stringify(registrationData),
                function (value) {
                $('#registrationMessage').append(value);
                },
                "json"
        );
    });
});
</script>

WebApi RegistrationController 类：

public class RegistrationController : ApiController
{
// *********** Pilot is null when the breakpoint hits here ************
public HttpResponseMessage Post([FromBody]PilotModel pilot)     
{
    this.RegisterPilot(pilot);

    var response = Request.CreateResponse<PilotModel>(HttpStatusCode.Created, pilot);

    return response;
}

private string RegisterPilot(PilotModel pilot)
{
    var result = string.Empty;

    ...

    return result;
}
}

试点模型：

[DataContract]
public class PilotModel
{
    [DataMember]
    public string FirstName { get; set; }

    [DataMember]
    public string LastName { get; set; }

    [DataMember]
    public string FAANumber { get; set; }
}

Answer 1

由于您想通过 Angular 代码发布数据，因此您应该使用 $http 服务，该服务将根据需要设置正确的内容类型。看起来您已经将 $http 服务注入到您的控制器中。

var model = { FirstName: "Shyju",
              LastName: "Happy"
              FAANumber: "3454353"  };

$.http("api/registration",model)
  .then(function(response) {
      var result=response.data;
      console.log(result);
  }, function(response) {
      //error happened. Inform the user
  });

理想情况下，您应该将 http 调用移至数据服务并将该数据服务注入您的角度控制器。

如果您仍然想使用 jQuery ajax（我不推荐），您可以将您的对象转换为 json 字符串并将contentType 属性指定为"application/json"。即使您的模型具有复杂的导航属性，这种方法也可以工作。

$.ajax({
        type: "POST",
        data :JSON.stringify(model),
        url: "api/registration",
        contentType: "application/json"
    });

看看this answer，它几乎涵盖了使用 ajax 向 web api 发送数据的所有用例。

Answer 2

只需一分钟，试一试：

$.post("api/registration",
                registrationData,
                function (value) {
                $('#registrationMessage').append(value);
                },
                "json"
        );