React POST data to ASP.Net

Question

I'm using the React template when creating a new project in Visual Studio. It has something like this for GET request:

  fetch('api/SampleData/WeatherForecasts')
    .then(response => response.json())
    .then(data => {
      this.setState({ forecasts: data, loading: false });
    });

I'm learning how to do a POST request, so I modified the code to:

  const formData = new FormData();
  formData.append('values', this.state.values);

  fetch('api/SampleData/WeatherForecasts', {
      method: 'POST',
      body: formData
  }).then(response => response.json())

But not sure how to retrieve the formData on ASP.Net:

[HttpPost("[action]")]
public string WeatherForecasts()
{
  // How to print out the values from formData here
  // System.Diagnostics.Debug.WriteLine(Request.Form.ToString());

  return "Hello";
}

Edit: I also don't know how to return a Json result from ASP.Net:

[HttpPost("[action]")]
public JsonResult WeatherForecasts()
{
  // How to print out the values from formData here
  // System.Diagnostics.Debug.WriteLine(Request.Form.ToString());

  // How to return a Json here
  // return {hello: 'Hello'};
}

norbitrial · Accepted Answer · 2019-09-20 18:43:07Z

1

My answer presumes that your this.state.values property contains a string for testing purposes only just like the following:

this.setState({
  values: 'testingtext' 
});

I guess you are on the right track, from front-end side I assume the data is being sent. You can additionally check in the browser's network tab how the data has been passed in the HTTP request's body.

I would modify the WeatherForcecasts() action as the following to capture the data on the back-end side:

[HttpPost]
public string WeatherForecasts([FromBody] string values)
{
  // here you can check what has been passed to the values variable

  return values;
}

About [FromBody] why you need to include into the attribute:

By default, Web API tries to get simple types from the request URI. The FromBody attribute tells Web API to read the value from the request body.

Source: Sending Simple Types

If you want to override the action name in your route then you can achieve that by adding into your method the [ActionName("YOUR_NEW_ACTION_NAME")] attribute but it is not a mandatory one:

You can override the action name by using the [ActionName] attribute.

Source: Routing by Action Name

I hope this helps! I guess this gives you an idea how to proceed further.

edited Sep 20, 2019 at 18:43

answered Sep 20, 2019 at 17:03

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

6 Comments

lucahuy Over a year ago

How would I print out the values for testing? I tried System.Diagnostics.Debug.WriteLine(values); but could not see it anywhere.

norbitrial Over a year ago

You can try to change the return statement to give back the input again, maybe that works. Just like return values.Length.ToString(); for testing quickly.

lucahuy Over a year ago

.then(response => response.json()) is giving me error. I think I need to return json or something in WeatherForecasts?

norbitrial Over a year ago

I have changed a bit my answer to have a simple type instead of an array, please check it as well. In your case the returned value is not JSON just a string so try with .then(response => response.text()).

lucahuy Over a year ago

That worked, but if I keep string[] WeatherForecasts([FromBody] string[] values), what type of response to return in .then(response =>?

|

Collectives™ on Stack Overflow

React POST data to ASP.Net

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related