mvc asp.net의 reactjs에서 컨트롤러로 양식 데이터를 게시하는 방법

Question

나는 React를 처음 사용하고 있습니다. 반응이있는 asp.net에서 양식을 작성하려고합니다. mvc asp.net에서 reactjs에서 컨트롤러로 양식 데이터를 게시 할 때 데이터가 전달되지 않습니다. 아래 코드를 공유했습니다. 작동하게하기 위해 내가해야 할 변경 사항을 알려주십시오.

컨트롤러 :

[Route("InputEmployee")] 

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

Reactjs 코드 :

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')) 

값을 전달하기 없습니다 :

:

APPEND에 변경 한 후에 또한

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

을 나는 웹을 보내기위한 기본 Fetch API를 사용하는 것이 좋습니다 것입니다 : 당신이 등을 사용할 필요가 있으므로

Answer 1

당신은 제대로 FormData 객체를 구축하지 않는, append는 기능입니다 원시 XHR 요청으로 작업하는 것보다 훨씬 깔끔한 요청입니다. 아직 100 % 크로스 브라우저가 아니지만 polyfill로 사용할 수있는 다양한 라이브러리가 있습니다. whatwg-fetch