Javascript 如何在mvc asp.net中将表单数据从reactjs发布到控制器

我是新来的。我正在尝试使用react在asp.net中创建表单。在mvc asp.net中将表单数据从reactjs发布到controller时，数据未被传递。我在下面分享了我的代码。请让我知道我要做什么改变才能让它工作

控制器：

[Route("InputEmployee")]

        public void InputEmployee([FromBody]EmployeeTable Employee)
        {
            db.EmployeeTables.Add(Employee);
                   db.SaveChanges();           
        }

代码：

class InputValues extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();
        const data = new FormData();
        data.append = this.firstName.value;
        data.append = this.lastName.value;
        data.append = this.gender.value;
        data.append = this.designation.value;
        data.append = this.salary.value;
        data.append = this.city.value;
        data.append = this.country.value;
        var xhr = new XMLHttpRequest();
        xhr.open('post', this.props.url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
                // Do something on success
            }
        }
        xhr.send(data);
    }

    render() {
        return(
          <div>       
              <form onSubmit={this.handleSubmit}>
          <label htmlFor="FirstName">First Name </label><br/>
          <input id="FirstName" type="text"  placeholder="Enter First Name" ref={(firstName) => this.firstName = firstName} />
          <br/><br/>
          <label htmlFor="LastName">Last Name: </label><br/>
          <input id="LastName" type="text"  placeholder="Enter Last Name"  ref={(lastName) => this.lastName = lastName} />
          <br/><br/>
          <label htmlFor="Gender">Gender: </label><br/>
          <input id="Gender" type="text"  placeholder="Gender"  ref={(gender) => this.gender = gender} />
          <br/><br/>
          <label htmlFor="Designation">Designation: </label><br/>
          <input id="Designation" type="text"  placeholder="Enter Designation" ref={(designation) => this.designation = designation} />
          <br/><br/>
          <label htmlFor="Salary">Salary: </label><br/>
          <input id="Salary" type="number"  placeholder="Enter Salary" ref={(salary) => this.salary = salary} />
          <br/><br/>
          <label htmlFor="City">City: </label><br/>
          <input id="City" type="text"  placeholder="Enter City" ref={(city) => this.city = city} />
          <br/><br/>
          <label htmlFor="Country">Country: </label><br/>
          <input id="Country" type="text"  placeholder="Enter Country" ref={(country) => this.country = country} />
          <p>
            <button type="submit">Submit</button>
          </p>
        </form>
      </div>
    );
          }
};

ReactDOM.render(<InputValues url="api/Employee/InputEmployee" />,
          document.getElementById('grid1'))   

类InputValues扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（e）{
e、 预防默认值（）；
const data=新表单数据（）；
data.append=this.firstName.value；
data.append=this.lastName.value；
data.append=this.gender.value；
data.append=this.designation.value；
data.append=this.salary.value；
data.append=this.city.value；
data.append=this.country.value；
var xhr=new XMLHttpRequest（）；
xhr.open（'post'，this.props.url，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
xhr.onreadystatechange=函数（）{
if（xhr.readyState==XMLHttpRequest.DONE&&xhr.status==200）{
//为成功做点什么
}
}
发送（数据）；
}
render（）{
返回(
名字

this.firstName=firstName}/>



姓氏：

this.lastName=lastName}/>



性别：

this.gender=gender}/>



名称：

this.designation=designation}/>



薪水：

this.salary=salary}/>



城市：

this.city=city}/>



国家：

this.country=country}/>

提交

);
}
};
ReactDOM.render（，
document.getElementById（'grid1'））

未传递的值：

在append中进行更改后：

---

您没有正确构建

FormData

对象，它是一个函数，因此您需要这样使用它：

data.append = ...; // wrong, overwrites the append function
data.append('key', 'value'); // correct, calls the function

---

此外，我建议使用本机发送web请求，因为它比处理原始XHR请求要整洁得多。它还不是100%跨浏览器，但有多种库可以用作polyfill，例如，

可能与@MarioNikolaus hi重复。非常感谢您修改的代码。你知道为什么数据没有通过吗？不要为同样的问题提出新的问题。正如James指出的，代码在正确使用append函数时存在缺陷，我对其进行了更改，现在应该进行修改good@MarioNikolaus好啊我试过修改过的代码。但是现在根本没有调用控制器函数。在运行代码时，我在控制器函数中添加了数据流的屏幕截图。在开发工具中提供请求的屏幕截图，以准确查看传递到后端服务的内容