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.

classInputValuesextendsReact.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    const data = newFormData();
    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 = newXMLHttpRequest();
    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><formonSubmit={this.handleSubmit}><labelhtmlFor="firstname">First Name </label><br/><inputid="firstname"type="text"placeholder="Enter First Name"ref={(firstName) => this.firstName = firstName} />
          <br/><br/><labelhtmlFor="lastname">Last Name: </label><br/><inputid="lastname"type="text"placeholder="Enter Last Name"ref={(lastname) => this.lastname = lastname} />
          <br/><br/><labelhtmlFor="gender">Gender: </label><br/><inputid="gender"type="text"placeholder="Gender"ref={(gender) => this.gender = gender} />
          <br/><br/><labelhtmlFor="designation">Designation: </label><br/><inputid="designation"type="text"placeholder="Enter Designation"ref={(designation) => this.designation = designation} />
          <br/><br/><labelhtmlFor="salary">Salary: </label><br/><inputid="salary"type="number"placeholder="Enter Salary"ref={(salary) => this.salary = salary} />
          <br/><br/><labelhtmlFor="city">City: </label><br/><inputid="city"type="text"placeholder="Enter City"ref={(city) => this.city = city} />
          <br/><br/><labelhtmlFor="country">Country: </label><br/><inputid="country"type="text"placeholder="Enter Country"ref={(country) => this.country = country} />
          <p><buttontype="submit">Submit</button></p></form></div>
    );
  }
};

Hope that helps!