Http.post from Angular 2 to ASP.NET ApiController

Question

ASP.NET

[HttpPost]
[Route("apitest")]
public string apitest([FromBody]string str)
{
   Console.Writeline(str); // str is always null
   return null;
}

Angular 2:

var creds = "str='testst'" ;
var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

http.post('http://localhost:18937/apitest', creds, {
            headers: headers
        })
        .map(res => res.json())
        .subscribe(
            (res2) => {
                console.log('subsribe %o', res2)
            }
        );

I also tried creds = {"str":"test"}; without headers JSON.stringify() etc. without success. How do I Post data to ASP.NET?

Possible duplicate of [Angularjs $http.post, asp.net mvc controller gets null](http://stackoverflow.com/questions/19243405/angularjs-http-post-asp-net-mvc-controller-gets-null) — villecoder, Nov 16 '15 at 16:11
Are you getting any errors or is it hitting the endpoint but `str` being null? — Marc Harry, Nov 16 '15 at 16:12
Angular 2 does only allow posting strings btw? At least Typescript says so. — daniel, Nov 16 '15 at 16:19
Try `creds = {"str":"test"}` and then `JSON.stringify(creds)` in the http.post and changing the content-type in the headers to: `application/json`. — Marc Harry, Nov 16 '15 at 16:25
Has the `JsonMediaTypeFormatter` been removed in any of the config files in the `App_Start` directory or in the `Global.asax`? — Marc Harry, Nov 16 '15 at 16:38
no it is not removed. I use CORS btw. which works with http.get — daniel, Nov 16 '15 at 16:45

score 0 · Answer 1 · edited May 23 '17 at 12:25

This is probably an issue with the way that ASP.NET and MVC handle data POSTS.

[HttpPost]
public ActionResult Index(int? id)
{
    Stream req = Request.InputStream;
    req.Seek(0, System.IO.SeekOrigin.Begin);
    string json = new StreamReader(req).ReadToEnd();

    InputClass input = null;
    try
    {
        // assuming JSON.net/Newtonsoft library from http://json.codeplex.com/
        input = JsonConvert.DeserializeObject<InputClass>(json)
    }

    catch (Exception ex)
    {
        // Try and handle malformed POST body
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }

    //do stuff

}

You can refer to my answer here and the referenced links as to a potential cause of the issue. There are quite a few server side web frameworks that inappropriately handle data POSTS and by default doesn't add the data to your request object.

You shouldn't [have to] try and change the behavior of your angular post, and modify headers to pretend your data post is a form post.

Correct but you wont be able to get the JSON data from `FromBody` — Sean Larkin, Nov 16 '15 at 16:50

score 0 · Accepted Answer · answered Nov 16 '15 at 21:21

0

var creds = {
   str: 'testst'
};

$http.post('http://localhost:18937/apitest', JSON.stringify(creds));

No changes in Web API controller and it should work.

answered Nov 16 '15 at 21:21

Maciej Wojsław

403
2
10

I get `ExceptionMessage: "No MediaTypeFormatter is available to read an object of type 'String' from content with media type 'text/plain'." ExceptionType: "System.Net.Http.UnsupportedMediaTypeException"` – daniel Nov 17 '15 at 09:40
I added this solution: https://myadventuresincoding.wordpress.com/2012/06/19/c-supporting-textplain-in-an-mvc-4-rc-web-api-application/ – daniel Nov 17 '15 at 09:59
Try add content-type header = "application/json" to ajax request – Maciej Wojsław Nov 17 '15 at 10:31

Http.post from Angular 2 to ASP.NET ApiController

2 Answers2