How To Post Form Data To ASP.NET Web Api Controller In Reactjs

I am new to React and I have been trying to implement a simple 'employee details' crud application. I was able to get the data from database and display it in table format. But I a

Solution 1:

It seems you are using very outdated version of React. You had several issues in your code(I was just looking the InputValues component).

In order for label to work as expected you need to have matching htmlFor attribute on label and id attribute on input.

Handling form submission via click on button will not trigger handler when user submits the form with keyboard, thats why it is better to handle it with onSubmit.

I also updated your React syntax to match the current one, where refs are defined in a whole new way where the string ref was dropped more than a year ago, more details on link https://reactjs.org/docs/refs-and-the-dom.html

I imagine you are following a tutorial, but urge you to find one with newer syntax since you will have a hard time adjusting later on.

Anyway here is the code that will call your backend service and provide it with form data.

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('firstName', this.firstName.value);
    data.append('lastname', this.lastname.value);
    data.append('gender', this.gender.value);
    data.append('designation', this.designation.value);
    data.append('salary', this.salary.value);
    data.append('city', this.city.value);
    data.append('country', 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>
    );
  }
};

Hope that helps!