Pass JSON object to WebApi

Question

I'm trying to post data from my web page to my RegistrationController Api. I see it when I submit the form, but when I hit my breakpoint on the WebApi, the parameter 'pilot' is null. Can someone tell me what I need to do to get the data to pass from the web page over to the Registration ApiController?

I saw this post, but it did not seem to work for me. This post, which was close to my question, mentioned that the model needed to annotated, but still did not work for me.

Button on cshtml page:

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

Angular RegistrationController:

<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 Class:

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;
}
}

Pilot Model:

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

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

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

score 2 · Answer 1 · edited May 23 '17 at 11:59

Since you want to post the data from your angular code, you should be using $http service, which will take care of setting the proper content type as needed. Looks like you are already injecting the $http service to your controller.

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
  });

Ideally, you should move http calls to a data service and inject that data service to your angular controller.

If you still want to use jQuery ajax (which i would not recommend) ,you can convert your object to a json string and specify the contentType property to "application/json". This approach will work even if your model has complex navigational properties.

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

Take a look at this answer which covers almost all the use cases of sending data to web api using ajax.

Yes, Angular already makes API calls easy. No need to go through jQuery to do it. — Ellesedil, Dec 27 '15 at 04:48
Be aware that not ALL headers you might think are actually set by $http are in fact set. Best to look at the default headers in chrome tools or whatever. There's a couple of gotchas in the new Asp.Net 5 framework in handling AJAX and redirects. — hally9k, Dec 27 '15 at 06:52
@shyju, thank you for the response. I have made changes per your recommendation, which works great. I will also look into moving the http calls into a data service. Just working through a little bit at a time as I try to learn this. — Wannabe, Dec 27 '15 at 14:36

Allen King · Accepted Answer · 2015-12-26T23:28:28.607

1

Will take only one minute, give this a try:

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

edited Dec 26 '15 at 23:28

answered Dec 26 '15 at 23:09

Allen King

2,372
4
34
52

1

Removing the JSON.stringify() did it. I thought I needed that. I also saw that I did not the DataContract or DataMember attributes either. Thank you. – Wannabe Dec 26 '15 at 23:25

Pass JSON object to WebApi

2 Answers2