将控制器数据发送到 Reactjs

Question

我需要将员工详细信息保存到数据库。 我的想法是将员工数据从 Controller 以 json 格式发送到 reacjts，reactjs 应该调用 webapi post 方法。 Webapi 负责将数据保存在 sql server 中。

我的 web api 代码：

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

我的控制器：

    [HttpPost]
    public JsonResult CreateNew(Employee model)
    {

        return Json(model);
    }

请提供一些建议，将我的员工模型发送到 reactjs。我是 reactjs 的新手。我试图将数据从控制器传递给 reactjs。

Answer 1

这里是代码

首先，您需要将模型创建为与 .net 中的类相同的 javascript 对象

例如。

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

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

现在您可以将此对象作为参数传递给您的控制器并使用更新的模型调用 api

//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 会通过比较属性名自动绑定模型。

Answer 2

此 api 操作为您执行 SQL 插入。

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

如果您尝试通过此方法注册员工，则您将员工详细信息发布到该方法（来自您提到的反应）。

此函数返回一个函数，ok() 函数。

我不知道ok() 是什么。希望这是一个员工被创建的消息。

如果你想在 react 中显示员工的详细信息，你应该`从数据库中获取员工。

[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);
}

请参阅this question 以获取有关如何调用 API 的参考。无论后端语言如何，调用 api 都是相同的。

另外，here 是一个示例 asp.net-react 应用程序供参考。

希望这能回答您的问题。请评论您的问题。