javascript - 将 POST 数据 react 到 ASP.Net

Question

我在 Visual Studio 中创建新项目时使用 React 模板。对于 GET 请求，它有类似这样的内容:

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

我正在学习如何执行 POST 请求，因此我将代码修改为:

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

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

但不确定如何在 ASP.Net 上检索 formData:

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

  return "Hello";
}

编辑:我也不知道如何从 ASP.Net 返回 Json 结果:

[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'};
}

Answer 1

我的回答假设您的 this.state.values 属性包含一个仅用于测试目的的字符串，如下所示:

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

我想你是在正确的轨道上，从前端来看，我假设数据正在发送。您还可以在浏览器的网络选项卡中检查数据是如何在 HTTP 请求正文中传递的。

我将修改 WeatherForcecasts() 操作如下，以捕获后端的数据:

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

  return values;
}

关于[FromBody]为什么需要包含到该属性中:

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.

来源:Sending Simple Types

如果您想覆盖路由中的操作名称，则可以通过在方法中添加 [ActionName("YOUR_NEW_ACTION_NAME")] 属性来实现此目的，但这不是强制性的:

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

来源:Routing by Action Name

我希望这有帮助!我想这会让您知道如何进一步进行。