How to post data with asp.net core/react

Question

I used the template in Visual Studio 2017 for asp.net core 2.0/react.js but could not manage to post data in the body.

The id from the url is filled correctly, but the string from the body is null. I'm using IIS Express if it matters.

My code so far:

Server part:

[Produces("application/json")]
[Route("api/Parts")]
public class PartsController : Controller
{



    // POST: api/Parts
    [HttpPost("{id}")]
    public void Post(int id, [FromBody]string value)
    {
        // breakpoint is hit.
        // id is set.
        // if I change "string value" to "dynamic value" I get an JObject.
    }
}

Client part:

private sendUpdates() {

    var payload = { "value": "2"}


    fetch('api/Parts/5',
        {
            method: 'POST',
            headers: {
                 'Accept': 'application/json',
                 'Content-Type': 'application/json'
            },
            body: JSON.stringify(payload)
        });

}

The request looks fine in the browser debug:

I'm not completely sure, but shouldn't you map the payload you send from the client to a type in your web-api? {property: value} from your client becomes a class Something { public string Property { get; set } }? — user2236165
– user2236165, Commented Jan 15, 2018 at 10:12
@user2236165 I do this for stuff from server to client. I don't think I'll have to do that for arguments. But I'm also not sure... — Onur
– Onur, Commented Jan 15, 2018 at 10:26
@user2236165 You we're right. At least introducing a class for the parameters worked. Thanks. — Onur
– Onur, Commented Jan 15, 2018 at 11:52

Tim A · Accepted Answer · 2019-08-31 20:35:30Z

1

Core API controller

[Route("api/[controller]")]
    public class TestingController : Controller
    {
        [HttpPost("test")]
        public IActionResult Test(string pl)
        {
            if (pl == null)
            {
                return Ok();
            }
            PL plobj = JsonConvert.DeserializeObject<PL>(pl);
            return Ok($"Test Test a=={plobj.a} b=={plobj.b}");
        }
    }

C# Class to serialize

 public class PL
    {
      public string a { get; set; }
      public  string b { get; set; }
    }

ReactJs Part

 constructor(props) {
        super(props);
        this.state = { text: "", loading: true};

        var PL = {
            a: 1,
            b: 2
        };
        var data = new FormData();
        data.append("PoLos", JSON.stringify(PL));

        fetch('api/Testing/test',
            {
                method: "POST",
                body: data
            }).
            then(response => response.text())
            .then(data => {
                this.setState({ text: data, loading: false });
            });

    }

I have to Note: Name in appending data in React part must be same AS name of variable in Core controller (ignoring case)

edited Aug 31, 2019 at 20:35

answered Aug 31, 2019 at 17:08

Tim A

431 silver badge6 bronze badges

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

3 Comments

James Poulose Over a year ago

Can you please explain what PoLos is in data.append("PoLos"...?

Tim A Over a year ago

It just a Nameing, it can be any.

Mojmir Over a year ago

You have an error in your example. PoLos vs ps. JS and C# must have the same name of parameter otherwise it doesnt work. Line data.append("PoLos", JSON.stringify(PL)); and public IActionResult Test(string pl) ... if I fix it to public IActionResult Test(string PoLos) it will work.

Collectives™ on Stack Overflow

How to post data with asp.net core/react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related