How to perfrom WEBAPI Post call from react Js?

Question

Its already asked question. But still i didnt clear. I have to call POST Method of WEBAPI in reactjs. But i have created model in webapi. So i want to know how to pass the model data to post call in reactjs.

Model :

public class EmployeeModels
{
    public int Id { get; set; }
    public string name { get; set; }
    public string mobile { get; set; }
    public string email { get; set; }
    public string dept { get; set; }
    public string erole { get; set; }
}

My WEBAPI Post Method :

   //Insert new Employee
    public IHttpActionResult CreateNewEmployee(EmployeeModels emp)
    {
        using (var ctx = new Employee())
        {
            ctx.tempemp.Add(new tempemp()
            {
                Id = emp.Id,
                name = emp.name,
                mobile = emp.mobile,
                erole = emp.erole,
                dept = emp.dept,
                email = emp.email
            });
            ctx.SaveChanges();
        }
        return Ok();
    }

Now i should want to post Employeemodel from reactjs. Kindly give any suggestions.

Piyush Dhamecha · Accepted Answer · 2017-07-28T12:19:03.330

4

I have already given answer:

let employee={
    Id:1,
    name:'abc',
    mobile:123456,
    email:'abc@abc.com',
    dept:'IT',
    role:'Developer'
}

fetch('https://mywebsite.com/CreateNewEmployee/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(employee)
})
.then(function(resp){
    // your response
})

edited Jul 28 '17 at 12:19

answered Jul 28 '17 at 11:59

Piyush Dhamecha

1,485
1
13
22

great. but i should want to get data from user inputs. not as hardcoded. could u provide example for that? – Karthikeyan Jul 28 '17 at 12:07
1

`fetch` is **not a React keyword**. It's a Javascript API. Similar to XHR. [Read Here](https://developer.mozilla.org/en/docs/Web/API/Fetch_API) – Giri Jul 28 '17 at 12:07
check out this [link](http://jamesknelson.com/learn-raw-react-ridiculously-simple-forms/) – Piyush Dhamecha Jul 28 '17 at 12:18
@PiyushDhamecha no problem! – Giri Jul 28 '17 at 12:25
@Karthikeyan check out this sample code also : [link](https://github.com/mikepro4/react-signup-form) – Piyush Dhamecha Jul 28 '17 at 12:35
Failed to load resource: the server responded with a status of 500 (Internal Server Error) – Karthikeyan Jul 31 '17 at 06:13
@Karthikeyan check your api with `postman`, whether its working or not..:) – Piyush Dhamecha Jul 31 '17 at 06:33
dont have access to install extensions. is there any other way. i tried the same way that u posted. – Karthikeyan Jul 31 '17 at 07:03
you can test you api with command line also. [link](https://stackoverflow.com/questions/11834238/curl-post-command-line-on-windows-restful-service) – Piyush Dhamecha Jul 31 '17 at 07:11

score 0 · Answer 2 · answered Jul 28 '17 at 12:12

You can use axios library.

npm install axios --save

and then:

axios.post('/CreateNewEmployee/', {
    Id:1,
    name:'abc',
    mobile:123456,
    email:'abc@abc.com',
    dept:'IT',
    role:'Developer'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

How to perfrom WEBAPI Post call from react Js?

2 Answers2