Unable to send simple string data to Web API from AngularJS

Question

I am trying to get json string from my angular app in web API. I browsed the Internet for the past 6 hours, trying and failing to figure out what I'm doing wrong.

I checked the network console and I see json as form data, but my WEB api DOES NOT get it for some reason. I looked through several other posts, but no one seems to be helping in my specific problem. Any direction would be great. I already tried to use the "transform" fix, but that didn't help.

INPUT ITEMS IN WEB API

[HttpPost] [Route("api/SkeltaInterfaceController/SaveWorkflow")] public bool SaveWorkflow([FromBody] string json) { ... } 

ANGULAR CALL

 $scope.SaveWorkFlow = function () { $http({ headers: {'Content-Type': 'application/x-www-form-urlencoded'}, method: "POST", url: webAPI, data: {'DATA' : 'TEST DATA' } }) } 

EDIT: I changed the angular call to this

 $scope.SaveWorkFlow = function () { $http({ headers: {'Content-Type': 'application/x-www-form-urlencoded'}, method: "POST", url: webAPI, data: {'DATA' : 'TEST DATA'} }) } 

The web API is as follows

 [HttpPost] [Route("api/SkeltaInterfaceController/SaveWorkflow")] public bool SaveWorkflow([FromBody] TestModel json) { ... } 

And model

 public class TestModel { public string DATA { get; set; } } 

I am still getting a null value for DATA, but is something wrong configured?

Answer 1

I think your problem boils down to the WebApi controller method, expecting to get a string, but you pass an object to it. Is this at least a method hit, but is null?

It depends on what you are trying to send to the WebApi controller method, but if you want to send an object, you must create a model that represents this object in your WebApi project and use this method as a parameter.

For example, as you have it right now, you would do something like:

 public class SaveModel { public string DATA {get; set;} } [HttpPost] [Route("api/SkeltaInterfaceController/SaveWorkflow")] public bool SaveWorkflow([FromBody] SaveModel model) { ... 

Answer 2

Although you have a solution, there are several ways to POST simple string data (rather than an object) to the Web API .

Let's say you have a POST API like this (in Test ApiController)

 public void Post([FromBody]string value) { //do something with value } 

From AngularJS you can post this method e.g.

(1) data as JSON (default)

 $scope.Test = function () { $http({ method: "POST", url: "/api/Test", data: JSON.stringify("test") }); }; 

The default is Content-Type: application/json . And the server will process the data as JSON. If you look at the request, you will see that the request body is a simple string, for example

 "test" 

For complex objects, you will see their formatted JSON.

(2) as application/x-www-form-urlencoded (as in your example)

 $scope.Test = function () { $http({ headers: {'Content-Type': 'application/x-www-form-urlencoded'}, method: "POST", url: "/api/Test", data: $.param({ "": "test" }), }); }; 

Here we explicitly specify the content type as application/x-www-form-urlencoded , so we must send data in this format (like the url query string). And here, the blank key in the data simply satisfies the Web API requirements of Web API weird model binding! The received data will be encoded as

 =test 

which we did with $.param({ "": "test" }) . One of the reasons for this, FromBody used primarily to send an object , rather than simple primitive values.

So, the main problem with your code was: you specified the Content Type: application / x-www-form-urlencoded, and you sent the data as JSON!