How to Post data to ASP.NET WEB API

In this article, we will understand how do we Create a New Employee using React, how do we Post this data to the Asp.Net Web API and insert this data into the DB.

In this Demonstration, We will use Sql Server as Our Database server, I will Open the Sql Server installed in my local machine. We will use ReactAppDB as our Database and in this database we have a table called as EmployeeInfo. When we create a New Employee from our React Application, this is the table into which the data should be stored.

Lets Open the Web API Project we have created in our Last Video. We will create a New Post Method which will receive employee Object and this object data we will insert into our DB Table. We will return Boolean value which indicates the status of the new record insertion. We use ADO.NET to do this.

public bool Post(Employee employee)
        {
            SqlConnection conn = new SqlConnection(@"server=DESKTOP-89HQ4RL\SQLEXPRESS;database=ReactAppDB;integrated security=true");
            string query = "insert into EmployeeInfo values(@Id,@Name,@Loc,@Sal)";
            SqlCommand cmd = new SqlCommand(query, conn);
            cmd.Parameters.Add(new SqlParameter("@Id", employee.Id));
            cmd.Parameters.Add(new SqlParameter("@Name", employee.Name));
            cmd.Parameters.Add(new SqlParameter("@Loc", employee.Location));
            cmd.Parameters.Add(new SqlParameter("@Sal", employee.Salary));
            conn.Open();
            int noOfRowsAffected = cmd.ExecuteNonQuery();
            conn.Close();
            return noOfRowsAffected > 0 ? true : false;
        }

With this we are done with Creating the required Post Method in Rest API. Lets run this Project using Ctrl + F5. 

Lets Open Index.js file from our demo Project using Visual Studio Code. Lets create a class EmployeeComponent which extends React.Component Class. We will create a Constructor which accepts props as the parameter and lets pass this props to the baseclass constructor. Lets create state object, add a property message and initialize it to empty single quotes.

class EmployeeComponent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      message: ‘’
    };
  }
}

Now we will implement render method. From this render method, we will return a div container. In this div, we will create all the input elements which are required to create a New Employee like Employee Id, Name, Location and Salary. We assign a reference to each input element using which we can read the value of that input.

render(){
    return(
      <div>
        <h2>Please Enter Employee Details...</h2>
        <p>
          <label>Employee ID : <input type="text"  ref="Id"></input></label>
        </p>
        <p>
          <label>Employee Name : <input type="text" ref="Name"></input></label>
        </p>
        <p>
          <label>Employee Location : <input type="text" ref="Location"></input></label>
        </p>
        <p>
          <label>Employee Salary : <input type="text" ref="Salary"></input></label>
        </p>
              </div>
    )
  }

Lets Place a button, give the Text as Create and call a function on the click of this button.

<button onClick={this.onCreateEmployee}>Create</button>

Lets go and implement this onCreateEmployee function. Lets create an object which contains Id, Name, Location and Salary properties, assign them the values by reading the values from our input elements. This is something We have already discussed this in our previous sessions.

onCreateEmployee=()=>{
let empInfo={
      Id:this.refs.Id.value,
      Name:this.refs.Name.value,
      Location:this.refs.Location.value,
      Salary:this.refs.Salary.value

    };
}

Now we have to send this object to our Web API through a Post request, so that this object details can be inserted into the Database. We call fetch method, we will pass the Url of Web API. 

Next we will pass an object using which we specify the method type as POST and pass the employee object through the body property. Most importantly we should not miss to pass the content-type through the headers. We will pass application/json as the content-type.

We call the Promise method using then, convert the response into JSON object, and then set the message property of the state object using setState method upon receiving true from our Web API.

fetch('https://localhost:44306/api/Employee',{
      method: 'POST',
      headers:{'Content-type':'application/json'},
        body: empInfo
    }).then(r=>r.json()).then(res=>{
      if(res){
        this.setState({message:'New Employee is Created Successfully'});
      }
    });

Lets display this message in a paragraph tag inside our Employee Component. Now we will call this component and render it to our root container. Lets save these changes, navigate to the browser.

Provide the Employee Details, Click on Create button. One can see a message that New Employee is Created Successfully.

For Video Reference