Posting Json to C# WebApi from React

Question

I have a C# WebAPI action. I'm trying to post a string (but a json stringified string) to it using React.

For some reason I'm getting a 405 Method Not Allowed when the content type is aopplication/json. Urlencoded does get into PostTransaction, but body is always null. What do I need to change to be able to get json in PostTransaction?

WebConfig

<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

WebApiConfig

config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json"));

C# WebApi

[HttpPost]
[ActionName("PostTransaction")]
public string PostTransaction([FromBody] string body, string task, int key, string filters, string options)
{
    // body is null from react when content type is urlencoded, but correct from jquery post
    string returnString = "no data found";
    if (body != null) {
        returnString = body.ToString();
    }

    return returnString;
}

React

var dataToSend = JSON.stringify({ param1: "value1", param2: "value2"});
fetch('http://localhosturl/PostTransaction',
  {
    method: 'post',
    headers: {
      'Accept': 'application/json, text/plain, */*',
      'Content-Type': 'application/json'
    },
    body: dataToSend
  })
  .then(response => {
}

JQuery Post

var dataToSend = JSON.stringify({ param1: "value1", param2: "value2"});
$.post('http://localhosturl/PostTransaction', { '': dataToSend }).done(function (data) {
     console.debug(data); // returned data from Web API
});

Thanks

Why exactly are you using 'Content-Type': 'application/x-www-form-urlencoded'? You are sending JSON not a form — Camilo Terevinto
– Camilo Terevinto, Commented Sep 9, 2018 at 21:44
The reason I'm using urlencoded is because I get a 405 error if using application/json. Maybe that's my main problem. Are these supported mediatypes not enough? config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html")); config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json")); — Richard Whitehouse
– Richard Whitehouse, Commented Sep 9, 2018 at 22:22
never hack around those problem..."hmmm, can't send application/json, oh well, lets send it urlencoded".... is never a good idea and makes it even more confusing when you come to SO :) — Keith Nicholas
– Keith Nicholas, Commented Sep 9, 2018 at 22:30

Richard Whitehouse · Accepted Answer · 2018-09-15 10:08:18Z

1

So the reason for the difference, is that I needed to convert the object in React, to a string, then stringify it again.

My original post did do this, but at the same time I changed it from urlencoded to application/json, if I'd just originally changed it (see history) to application/json without removing the second stringify, it would have worked ok.

body: JSON.stringify(JSON.stringify(dataToSave))

This is so that when it's actually posted, it still has the escaped quotes.

answered Sep 15, 2018 at 10:08

Richard Whitehouse

6913 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Noah Over a year ago

So is that the final answer? If this is right please mark it as answered.

Collectives™ on Stack Overflow

Posting Json to C# WebApi from React

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related