Why is ReactJs data not showing up??

P

Paul Fawkes2019-08-25 19:33:51

ASP.NET

Paul Fawkes, 2019-08-25 19:33:51

Controller

public class EmployeeController : Controller
{
    private IUnitOfWork _dataBase;
    private IMapper<Employee, EmployeeViewModel> _employeeMapper;

    public EmployeeController(IUnitOfWork dataBase, IMapper<Employee, EmployeeViewModel> employeeMapper)
    {
        _dataBase = dataBase;
        _employeeMapper = employeeMapper;
    }

    public ActionResult Index()
    {
        return View();
    }

    public JsonResult Get()
    {
        var employees = _dataBase.Employees.GetAll();
        var employeesVM = new List<EmployeeViewModel>();

        foreach (var employee in employees)
        {
            var employeeVM = _employeeMapper.Map(employee);
            employeesVM.Add(employeeVM);
        }

        return Json(employeesVM, JsonRequestBehavior.AllowGet);
    }
}

jsx

class Employee extends React.Component {

    constructor(props) {
        super(props);
        this.state = { employees: [] };
    }

    render()  {
        return <div>
            <p><b>{this.state.employees.Id}</b></p>
            <p>Цена {this.state.employees.Name}</p>
        </div>;
    }
}



ReactDOM.render(
    <Employee getUrl="/Employee/Get" />,
    document.getElementById("employeeContent")
);

view

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}



    <html>
    <head>
        <title>Employee</title>
    </head>
    <body>
        <div id="employeeContent"></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
        <script src='@Url.Content("~/Scripts/EmployeeIndex.jsx")'></script>
    </body>
    </html>

Why is the view not displaying data?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

E

eRKa, 2019-08-26
@kttotto

And where is your ajax request to get the data? I suspect that passing the url parameter to the component is getUrl="/Employee/Get"not enough. You passed the Url, and then you need to make the load method, in which the data will be pulled by Ajax. And then, when the component is mounted, call this load method.

componentDidMount() {
        this.loadData();
    }

I see that everything is fine here .