How to post form data to ASP.NET web api controller in reactjs

Question

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 am not able to post the data from form to database. It will be very helpful if you some one could provide me a detailed jsx code to post data from form to controller. And also controller side code to save data to database. Please find my code below.

This is my model (used entity framework):

public partial class EmployeeTable
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Gender { get; set; }
        public string Designation { get; set; }
        public long Salary { get; set; }
        public string City { get; set; }
        public string Country { get; set; }
    }

Controller:

namespace ReactModelApp.Controllers
{
    [RoutePrefix("api/Employee")]
    public class EmployeeController : ApiController
    {
        EmployeeEntities db = new EmployeeEntities();

        [Route("GetEmployeeList")]
        public IQueryable<EmployeeTable> GetEmployeeList()
        {
            return db.EmployeeTables.AsQueryable();
        }

        [Route("InputEmployee")]

        public HttpResponseMessage InputEmployee([FromBody]EmployeeTable Employee)
        {
            try
            {
                using (EmployeeEntities entities = new EmployeeEntities())
                {
                    entities.EmployeeTables.Add(Employee);
                    entities.SaveChanges();
                    var message = Request.CreateResponse(HttpStatusCode.Created, Employee);
                    message.Headers.Location = new Uri(Request.RequestUri + Employee.EmployeeID.ToString());
                    return message;
                }
            }
            catch (Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex);
            }
        }
    }
}

React.jsx code for displaying data from database:

var EmployeeRow = React.createClass({

      render: function () {
          return(
              <tr>
                  <td>{this.props.item.EmployeeID}</td>
                  <td>{this.props.item.FirstName}</td>
                  <td>{this.props.item.LastName}</td>
                  <td>{this.props.item.Gender}</td>
                  <td>{this.props.item.Designation}</td>
                  <td>{this.props.item.Salary}</td>
                  <td>{this.props.item.City}</td>
                  <td>{this.props.item.Country}</td>
              </tr>

              );
      }
  });

  var EmployeeTable = React.createClass({

      getInitialState: function(){

          return{
              result:[]
          }
      },
      componentWillMount: function(){

          var xhr = new XMLHttpRequest();
          xhr.open('get', this.props.url, true);
          xhr.onload = function () {
              var response = JSON.parse(xhr.responseText);

              this.setState({ result: response });

          }.bind(this);
          xhr.send();
      },
      render: function(){
          var rows = [];
          this.state.result.forEach(function (item) {
              rows.push(<EmployeeRow key={item.EmployeeID} item={item} />);
      });
  return (<table className="table">
     <thead>
         <tr>
            <th>EmployeeID</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Gender</th>
            <th>Designation</th>
            <th>Salary</th>
            <th>City</th>
            <th>Country</th>
         </tr>
     </thead>

      <tbody>
          {rows}
      </tbody>

  </table>);
  }

  });

  ReactDOM.render(<EmployeeTable url="api/Employee/GetEmployeeList" />,
          document.getElementById('grid')) 

Form React jsx code:

var InputValues=React.createClass({
  handleClick:function(){


},

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

Answer 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!