$http to .NET Web API - Either Getting 400 (Bad Request) or NULL POST Action Method Parameter
Earl Damron
Here’s a brief (as I can make it) description of my problem, along with all relevant code. (sorry for the double-spacing...pasting from a very long email, and can't seem to avoid it)
I have a .NET Web API, and an AngularJS front end. I have a very simple POST method which accepts a parameter of the ‘Envelope’ type, shown here:
public class Envelope {
public int listingId { get; set; }
public string Description { get; set; }
public override string ToString() {
return listingId.ToString() + "; " + Description;
}
}
The actual POST method on the API appears here:
[EnableCors(origins: "http://simpleapiearl.azurewebsites.net", headers: "*", methods: "*")]
public class EnvelopesController : ApiController {
// POST: api/Envelopes
public string Post(Envelope env) {
return "rval: " + env.ToString() + " (and my addition to env)";
}
}
My front-end AngularJS $http POST looks like this:
$scope.testPOST = function () {
var env = {
listingId:1234,
Description:"some desc"
};
$http({
method: 'POST',
url: 'http://simpleApiEarl.azurewebsites.net/api/envelopes',
data: JSON.stringify(env),
headers: {
'Content-Type': 'application/json'
}
}).
success(function (data, status, headers, config) {
$scope.postStatus = 'success: ' + data;
}).
error(function (data, status, headers, config) {
$scope.postStatus = 'error: ' + status;
});
}
Here are my issues (numbered for easier reference):
1. Using all the code as shown above, I get a “400 (Bad Request)” when I call “testPOST()” from my page. This sounds like a .NET Web API routing issue, but I can’t figure out what it is (see my actual WebApiConfig.cs file at the very bottom of this email.
2. I can avoid the 400 (and in fact get a 200) if I change the ‘Content-Type’ header to ‘application/x-www-form-urlencoded’. HOWEVER, that results in the API seeing the ‘env’ parameter as NULL.
3. I tend to adorn my action method parameter with a ‘[FromBody]’ attribute, but doing so does not fix the problem of ‘env’ being NULL in my API action method.
I have created a simple plunk with my very simple HTML page used to call the API. It can be found here:
http://plnkr.co/edit/hY2OUeg9CRQ1QOz8MGU8?p=info
Thanks very much for any assistance you can provide.