将控制器数据发送到Reactjs

时间:2017-07-28 06:33:55

标签: c# asp.net-mvc reactjs asp.net-web-api

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

我的网络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。

2 个答案:

答案 0 :(得分:1)

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

ok()

如果您尝试通过此方法注册员工,则会将员工详细信息发布到方法(来自您提到的反应)。

此函数返回一个函数[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); } 函数。

我不知道ERROR: unterminated CSV quoted field CONTEXT: COPY dimingredient, line 3: "5145|2016-07-01 13:34:25.1001891|1900-01-01 00:00:00.0000000|9999-12-31 23:59:59.9999999|True|93834|..." 是什么。希望这是创建员工的消息。

如果您想在反应中显示员工详细信息,您应该“从数据库中获取员工。”

COPY

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

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

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

答案 1 :(得分: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将通过比较属性名称来自动绑定模型。