reactjs - ASP NET Core 3.1 如何发布 FormData

Question

我无法使用 fetch 和 asp.net core 3.1 发布表单数据

我在前端使用 fetch：

    handleSave(event) {        
        event.preventDefault();
        const data = new FormData(event.target);
        fetch('Project/Edit', {
              method: 'POST',
              body: data,
              headers: !token ? {} :
                {
                  'Authorization': `Bearer ${token}`,
                  'Content-Type': 'application/x-www-form-urlencoded',
                }
              }).then((response) => response.json())
    }

我尝试将 Content-Type 设置为 multipart/form-data 并且我也尝试过没有内容类型。
服务器端方法如下所示：

[HttpPost]
public IActionResult Edit([FromForm]Project project)
{

我也试过

[HttpPost]
public IActionResult Edit(Project project)
{

和

[HttpPost]
public IActionResult Edit([FromBody]Project project)
{

和

[HttpPut]
public IActionResult Edit([FromForm]Project project)
{

项目参数永远不会被填充。实际上这种方法永远不会被击中。我收到 405 错误。使用 ASP.NET Core 3.1 将 FormData 发布到服务器的正确方法是什么？

我最终让它与以下内容一起工作：控制器 - 将 Edit 更改为 EditProject 并添加了 Route 装饰器：

[HttpPost]
[Route("EditProject")]
public IActionResult EditProject([FromForm]Project project)
{

我从 fetch 中删除了内容类型：

fetch('Project/EditProject', {
      method: 'POST',
      body: data,
      headers: !this.state.token ? {} :
      {
        'Authorization': `Bearer ${this.state.token}`,
      }
   }).then((response) => response.json())

标签： reactjsasp.net-core

Answer 1

无法使用 fetch 和 asp.net core 3.1 发布表单数据

这是从 React 前端发布表单数据到 API 操作的工作示例，您可以参考它。

constructor(props) {
    super(props);

    this.state = {
        pname: "",
        description: ""
    };

    this.handlePname = this.handlePname.bind(this);
    this.handleDescription = this.handleDescription.bind(this);
    this.handleSave = this.handleSave.bind(this);
}

handlePname(event) {
    this.setState({ pname: event.target.value });
}

handleDescription(event) {
    this.setState({ description: event.target.value });
}

handleSave(event) {
    event.preventDefault();

    const data = new FormData();
    data.append("pname", this.state.pname);
    data.append("description", this.state.description);

    console.log(data);

    fetch("Project/Edit", {
        method: "POST",
        body: data
        // headers: !token
        //   ? {}
        //   : {
        //       Authorization: `Bearer ${token}`,
        //       "Content-Type": "application/x-www-form-urlencoded"
        //     }
    }).then(response => response.json());
}

render() {
    return (
        <form onSubmit={this.handleSave}>
            Project Name:
            <input
                type="text"
                value={this.state.pname}
                onChange={this.handlePname}
            />
            Description:
            <input type="text" value={this.state.description} onChange={this.handleDescription} />
            <input type="submit" value="Submit" />
        </form>
);
}

控制器动作

[HttpPost]
public IActionResult Edit([FromForm]Project project)
{
    //code logic here

项目类

public class Project
{
    public string pname { get; set; }
    public string description { get; set; }
}

测试结果