Send Controller data to Reactjs

Question

I need save employee details to database. My idea is to send employee data from Controller to reacjts as json format and reactjs should call webapi post method . Webapi take care of saving data in sql server.

My web api code:

     //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();
    }

my Controller :

    [HttpPost]
    public JsonResult CreateNew(Employee model)
    {

        return Json(model);
    }

Kindly provide some suggestion to send my employee model to reactjs. Im new to reactjs. im trying to pass the data from controller to reactjs.

I want to save my employee details in sql server. I have created service using webapi and entity framework to save the data to sql. Now i want to call the webapi from reactjs. I got employee information in controller as json format. i jst want to send this json data to reacjts and call the webapi. — Karthikeyan
– Karthikeyan, Commented Jul 28, 2017 at 6:50
Please check this blog.revathskumar.com/2015/07/submit-a-form-with-react.html — Navoneel Talukdar
– Navoneel Talukdar, Commented Jul 28, 2017 at 7:10

Piyush Dhamecha · Accepted Answer · 2017-07-28 07:25:30Z

1

Here is the code

First you need to create model as javascript object same as your class in .net

eg.

class Employee{ //.net class
    public int EmployeeId {get; set;}
    public string EmployeeName {get; set;}
}

let employee={ //js
    EmployeeId:10,
    EmployeeName:"abc"
}

now you can pass this object as param to your controller and call api with updated model

//Call Controller
fetch('https://mywebsite.com/CreateNew/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(employee)
})
.then(function(resp){
    // Call API
    fetch('https://api.com/CreateNewEmployee/', {
      method: 'POST',
     headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(resp)
   })
   .then(function(resp){
       // check resp.status == 200
   })
})

MVC will auto-bind model by comparing property name.

answered Jul 28, 2017 at 7:25

Piyush Dhamecha

1,5151 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Karthikeyan Over a year ago

Where should i want to create JavaScript model? and how the JavaScript model refer in reactjs?

Piyush Dhamecha Over a year ago

create java model before calling controller, you can store that model into component state object.

Piyush Dhamecha Over a year ago

you have not mentioned any reactjs code in you question also.. so how did i understand where to write the code..

Piyush Dhamecha Over a year ago

i think you will have some event like on buttonClick, you can create the model inside event or in state also.. then you will get the model this.state.employee

Piyush Dhamecha Over a year ago

@Karthikeyan have you got it or any question..?

|

Prashanth Benny · Accepted Answer · 2017-07-28 07:37:37Z

1

This api action does the SQL insert for you.

 //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();
}

If you are trying to register an employee through this method, you are posting the employee details to the method (From react as you've mentioned).

This function returns a function, the ok() function.

I have no idea what ok() is. Hope it is a message that the employee is created.

If you want to display the employee details in react, you should `get the employee from the database.

[HttpGet]
public JsonResult GetEmployeeDetails(int EmployeeId)
{
    //here, DatabaseContext.Employees is your DBContext and Employees table.
    var model = DatabaseContext.Employees.SingleOrDefault(x=>x.Id == EmployeeId);
    return Json(model);
}

refer this question for reference on how to call the API. calling api is same, irrespective of back end languages.

Also, here is a sample asp.net-react app for reference.

hope this answers your question. please comment your queries.

edited Jul 28, 2017 at 7:37

answered Jul 28, 2017 at 7:14

Prashanth Benny

1,60723 silver badges38 bronze badges

1 Comment

Karthikeyan Over a year ago

Yes i performed this for display employee records. Now i want to do HTTPPost in reactjs using MVC's Controller data.

Collectives™ on Stack Overflow

Send Controller data to Reactjs

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related