I am new to React. I am trying to create a form in asp.net with react. when posting form data from reactjs to controller in mvc asp.net, the data is not getting passed. I have shared my code below. Please let me know what changes I have to make to make it work.
controller:
[Route("InputEmployee")]
public void InputEmployee([FromBody]EmployeeTable Employee)
{
db.EmployeeTables.Add(Employee);
db.SaveChanges();
}
Reactjs code:
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'))
values not getting passed:
after making changes in append:
