Unable to post simple string data to Web API from AngularJS

Question

I am trying to get a json string from my angular app to a Web API. I have looked all over the internet the past 6 hours trying and failing miserably to figure out what I am doing wrong.

I have checked the network console and I can see the json as form data, but my WEB api for some reason is NOT getting it. I have looked at several other posts but none seem to help with my particular issue. Any direction would be great. I already tried using the "transform" fix, but that didn't help.

ENTRY POINTS TO 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 looks like this

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

And the model

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

I am still getting a null value for DATA though, something I setup wrong?

Answer 1

Though you have got an solution, there are some ways to POST simple string data (not an object) to a Web API service.

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 to this method like

(1) data as JSON (default)

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

This will use Content-Type: application/json by default. And server will treat the data as JSON. If you look at the request, you'll see the request body is a simple string, like

"test"

For complex objects, you'd see them JSON formatted.

(2) data 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 are explicitly specifying the content type to be application/x-www-form-urlencoded, so we have to send data in that format (much like url query string). And, here, the empty key in data is just to satisfy Web API's strange model binding requirement! The resulting data will be encoded like

=test

which we'have done with $.param({ "": "test" }). One reason for this, FromBody is used mainly to send object, not simple primitive values.

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

Answer 2

I think your issue comes down to the WebApi controller method expecting to receive a string, but you are passing it an object. Is it at least hitting the method but receiving null?

It depends what you are trying to send to the WebApi controller method, but if you mean to send an object, you should create a model that represents that object in your WebApi project and have the method take an object as the parameter.

For example, the way 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)
{ ...