0

I am trying to set up a small ASP.NET Web API projects so I can post data to the database from a small React.JS project. I tried alot of sollutions but the results made no sense and I have no idea how to fix it anymore.

I have this very simple model:

public class Hour { public int WeekID { get; set; } }

And this is my controller

[HttpPost] public IHttpActionResult AddHour(Hour hour) { return Ok(); }

This is the method that I use to POST my data

export const SaveWeek = weekData=> { const headers = new Headers(); headers.append("Content-Type", "application/json"); const Week= { method: "POST", headers, mode: "cors", body: weekData }; console.log("Hours:"); // Returns {"WeekID": 1} console.log(Hours.body); return axios.post("http://localhost:52350/api/REST/AddHour", { Week }); };

The way I call this SaveWeek method in React is:

// The JSON parameter is for testing hard coded to: {"WeekID": 1} handleSave = async json => { const data = await SaveWeek(json); console.log(data); this.closeModal(); };

I know that the axios POST request works, the way I tested that is by changing the method to not use any parameters and looking at the result that where received:

[HttpPost] public IHttpActionResult AddHour(Hour hour) { // This returns a string in which the data that I sent // can be found. string body = Request.Content.ReadAsStringAsync().Result; return Ok(); }

The weird thing is that the body will be filled with data when the method does not contain any parameters, but when I provide the method with the Hour object parameter the body will be an empty string (""). And also the Hour object parameter wont be filled with the values that I provide it.

What am I doing wrong here?

Improve this question
6
  • Could you add code how you call SaveWeek method in js? Commented Feb 15, 2019 at 20:18
  • I added it, the JSON result that it needs is for testing and explanation hard coded to: {"WeekID", 1}. Commented Feb 15, 2019 at 20:26
  • 2
    public class Model ..yet the method signature is Hour hour. What does your Hour class look like? Commented Feb 15, 2019 at 20:28
  • @ADyson Okay that is my bad, I tried to make the code globle to change some stuff, I change the public class Model to Hour. Commented Feb 15, 2019 at 20:33
  • Also I removed some properties from the model, that is why it might not make any sense. Commented Feb 15, 2019 at 20:34

2 Answers 2

Reset to default
2

According to https://github.com/axios/axios#axiosposturl-data-config axios.post has following signature

axios.post(url[, data[, config]])

So you just need to change your request to

export const SaveWeek = weekData => { //headers should be simple object, not Headers const headers = { "Content-Type": "application/json" }; //removed body, because we pass data as second parameter //removed method, because 'axios.post' implies using "post" method const Config = { headers, mode: "cors" }; const url = "http://localhost:52350/api/REST/AddHour"; return axios.post(url, weekData, Config); }
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Small typo...you no longer have a variable named "Week". Did you mean to replace it with "Config" in the post call? Also I don't think it should be wrapped in another object.
@ADyson You're right, I fixed my answer. Thank you.
Thank you, this is the sollution!
2

An incoming request to the ASP.Net Web API pipeline is read as a forward-only stream for super speed. Once it has been read it cannot be read again.

 [HttpPost] public IHttpActionResult AddHour(Hour hour) { // With model binding // use hour.WeekID }

In this first example model binding is already done and once it has been read it cannot be read again. Hence, Request.Content will be empty after that.

 [HttpPost] public IHttpActionResult AddHour() { // Without model binding // use Request.Content }

In second example it does not use model binding therefore still has the Request.Content property populated.

Use one or the other, not both, do not mix with MVC model binding which works differently.

A better explanation is available in this blog post http://www.hackered.co.uk/articles/asp-net-web-api-why-is-the-request-Content-empty-when-the-model-is-populated

Improve this answer

5 Comments

This explains one part of the issue, but doesn't resolve the bit where the question mentions that the 'hour' parameter is not populated in the action method (which I assume was the whole reason that OP was resorting to using request.content in the first place). So this explains some behaviour but doesn't really resolve the underlying problem with the model binding.
OP says he tried a post with {"WeekID": 1} which is valid for the endpoint and it will bind to the model.
Ok...but OP is also saying it isn't binding...so clearly there's another issue which needs resolving. I think Alexander's answer below is on the right lines. I upvoted yours too because it adds to everyone's understanding of the Web API engine, even though it won't directly help the OP to get their code working.
Oh i see, OP was not passing the correct json payload. Not familiar with React, so thought when the post request was harcoded and it still did not work, something was wrong with the API action. Thanks for upvote.
Thank you all for the help! The final sollution was the awnser from Alexander.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.