Building a web application using React and asp.net core(Part 02)

6 minute read

In the previous article, I have shown you how to create a back end application using asp.net core web api. I have created some api end points for employee profile. In this article, I will design react pages, connect with api end points and perform CRUD operation using react.

Step 1: Install axios to make http request

Go to terminal -> go to the directory -> ClientApp
Run the command npm install axios --save

Step 2: Write class components

Create a “Employee” folder in src->components.
Now create List, Create, Delete and Edit componets in the employee folder as follows

Employee.jsx

import React, {Component} from 'react';
import axios from 'axios';

// export keyword is a new feature in ES6 let export your functions , 
// variables so you can get access to them in other js files

export class Employees extends Component
{
    constructor(props){
        super(props);

        this.OnEmployeeEdit = this.OnEmployeeEdit.bind(this);
        this.OnEmployeeDelete = this.OnEmployeeDelete.bind(this);
        this.onEmployeeCreate = this.onEmployeeCreate.bind(this);

        this.state = {
            employees: [],
            loading: true,
            failed: false,
            error: ''
        }
    }

    /*Lifecycle Method: The componentDidMount() method runs after 
    the component output has been rendered to the DOM.*/

    componentDidMount(){
        this.populateEmployeesData();
    }

    // Event handler for create button
    onEmployeeCreate()
    {
        const {history} = this.props;
        history.push('/create');
    }

    // Event handler for edit button
    OnEmployeeEdit(id){
        const {history} = this.props;
        history.push('/edit/'+id);
    }

    // Event handler for delete button
    OnEmployeeDelete(id){
        const {history} = this.props;
        history.push('/delete/'+id);
    }

    populateEmployeesData(){
        axios.get("api/Employees/GetEmployees").then(result => {
            const response = result.data;
            this.setState({employees: response, loading: false, error: ""});
        }).catch(error => {
            this.setState({employees: [], loading: false, failed: true, error: "Employess could not be loaded!"});
        });
    }

    renderAllEmployeeTable(employees){
        return(
            <table className="table table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Designation</th>
                        <th>Father's Name</th>
                        <th>Mother's Name</th>
                        <th>Date of Birth</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        employees.map(employee => (
                            <tr key={employee.id}>
                                <td>{employee.name}</td>
                                <td>{employee.designation}</td>
                                <td>{employee.fathersName}</td>
                                <td>{employee.mothersName}</td>
                                <td>{ new Date(employee.dateOfBirth).toISOString().slice(0,10)}</td>
                                <td><button onClick={()=> this.OnEmployeeEdit(employee.id)}  className= "btn btn-success">Edit</button> || 
                                <button onClick={()=> this.OnEmployeeDelete(employee.id)} className= "btn btn-danger">Delete</button></td>
                            </tr>
                        ))
                    }
                </tbody>
            </table>
        );
    }

    render(){

        let content = this.state.loading ? (
            <p>
                <em>Loading...</em>
            </p>
        ):(
            this.renderAllEmployeeTable(this.state.employees)
        )

        return(
            <div>
                <h2>Employee</h2>
                <button onClick={()=> this.onEmployeeCreate()} className="btn btn-primary">Create</button>
                {content}
            </div>
        );
    }

}

Create.jsx

import React, { Component } from "react";
import axios from "axios";

export class Create extends Component{

    constructor(props){
        super(props);

        this.onChangeName = this.onChangeName.bind(this);
        this.onChangeDesignation = this.onChangeDesignation.bind(this);
        this.onChangeFathersName = this.onChangeFathersName.bind(this);
        this.onChangeMothersName = this.onChangeMothersName.bind(this);
        this.onChangeDOB = this.onChangeDOB.bind(this);
        this.onSubmit = this.onSubmit.bind(this);


        this.state = {
            name: '',
            designation: '',
            fathersName: '',
            mothersName: '',
            //This is date time object
            dateOfBirth: null 
        }
    }

    onChangeName(e){
        this.setState({
            name: e.target.value
        })
    }

    onChangeDesignation(e){
        this.setState({
            designation: e.target.value
        })
    }

    onChangeFathersName(e){
        this.setState({
            fathersName: e.target.value
        })

    }

    onChangeMothersName(e){
        this.setState({
            mothersName: e.target.value
        })

    }

    onChangeDOB(e){
        this.setState({
            dateOfBirth: e.target.value
        })

    }

    onSubmit(e){
        e.preventDefault();
        const {history} = this.props;

        let employeeObj = {
            name: this.state.name,
            designation: this.state.designation,
            fathersName: this.state.fathersName,
            mothersName: this.state.mothersName,
            dateOfBirth: this.state.dateOfBirth
        }

        axios.post("api/Employees/AddEmployee", employeeObj).then(result => {
            history.push('/employees');
        })
    }

    render(){
        return(
            <div className="row">
                <div className="col-md-4">
                <h3>Add new employee</h3>
                <form onSubmit={this.onSubmit}>
                    <div className="form-group">
                        <label className="control-label">Name: </label>
                        <input className="form-control" type="text" value = {this.state.name} onChange={this.onChangeName}></input>
                    </div>

                    <div className="form-group">
                        <label className="control-label">Designation: </label>
                       <input className="form-control" type="text" value = {this.state.designation} onChange={this.onChangeDesignation}></input>
                    </div>

                    <div className="form-group">
                        <label className="control-label">Father's Name: </label>
                        <input className="form-control" type="text" value = {this.state.fathersName} onChange={this.onChangeFathersName}></input>
                    </div>

                    <div className="form-group">
                        <label className="control-label">Mother's Name: </label>
                        <input className="form-control" type="text" value = {this.state.mothersName} onChange={this.onChangeMothersName}></input>
                    </div>

                    <div className="form-group">
                        <label className="control-label">Date of Birth: </label>
                        <input className="form-control" type="date" value = {this.state.dateOfBirth} onChange={this.onChangeDOB}></input>
                    </div>

                    <div className="form-group">
                        <input type="submit" value = "Add Employee" className="btn btn-primary"></input>
                    </div>

                </form>

                </div>
            </div>
        )
    }

}

_Edit.jsx

import axios from "axios";
import React, { Component } from "react";

export class Edit extends Component {
    constructor(props) {
        super(props);

        this.onChangeName = this.onChangeName.bind(this);
        this.onChangeDesignation = this.onChangeDesignation.bind(this);
        this.onChangeFathersName = this.onChangeFathersName.bind(this);
        this.onChangeMothersName = this.onChangeMothersName.bind(this);
        this.onChangeDOB = this.onChangeDOB.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            id : '',
            name: '',
            designation: '',
            fathersName: '',
            mothersName: '',
            //This is date time object
            dateOfBirth: null 
        }
    }

    componentDidMount(){
        const {id} = this.props.match.params;
        axios.get("api/Employees/Employee/" + id).then(employee =>{
            const response = employee.data;
            this.setState({
                id : response.id,
                name: response.name,
                designation: response.designation,
                fathersName: response.fathersName,
                mothersName: response.mothersName,
                dateOfBirth: new Date(response.dateOfBirth).toISOString().slice(0,10)
            })
        })
        //alert(id);
    }

    onChangeName(e) {
        this.setState({
            name: e.target.value
        });
    }

    onChangeDesignation(e) {
        this.setState({
            designation: e.target.value
        });
    }

    onChangeFathersName(e) {
        this.setState({
            fathersName: e.target.value
        });

    }

    onChangeMothersName(e) {
        this.setState({
            mothersName: e.target.value
        });

    }

    onChangeDOB(e) {
        this.setState({
            dateOfBirth: e.target.value
        });
    }


    onUpdateCancel(){
        const {history} = this.props;
        history.push('/employees');
    }

    onSubmit(e){
       
        e.preventDefault();
        const {history} = this.props;
        const {id} = this.props.match.params;
        let employeeObj = {
            id: this.state.id,
            name: this.state.name,
            designation: this.state.designation,
            fathersName: this.state.fathersName,
            mothersName: this.state.mothersName,
            dateOfBirth: new Date(this.state.dateOfBirth).toISOString()
        }

        axios.put("api/Employees/EditEmployee/"+id, employeeObj).then(result => {
            history.push('/employees');
        })
    }

    render() {
        return (
            <div className="row">
                <div className="col-md-4">
                    <h3>Edit Employee</h3>
                    <form onSubmit={this.onSubmit}>
                        <div className="form-group">
                            <label className="control-label">Name: </label>
                            <input className="form-control" type="text" value={this.state.name} onChange={this.onChangeName}></input>
                        </div>

                        <div className="form-group">
                            <label className="control-label">Designation: </label>
                            <input className="form-control" type="text" value={this.state.designation} onChange={this.onChangeDesignation}></input>
                        </div>

                        <div className="form-group">
                            <label className="control-label">Father's Name: </label>
                            <input className="form-control" type="text" value={this.state.fathersName} onChange={this.onChangeFathersName}></input>
                        </div>

                        <div className="form-group">
                            <label className="control-label">Mother's Name: </label>
                            <input className="form-control" type="text" value={this.state.mothersName} onChange={this.onChangeMothersName}></input>
                        </div>

                        <div className="form-group">
                            <label className="control-label">Date of Birth: </label>
                            <input className="form-control" type="date" value={this.state.dateOfBirth} onChange={this.onChangeDOB}></input>
                        </div>

                        <div className="form-group">
                            <button onClick={this.onUpdateCancel} className="btn btn-default">Cancel</button>
                            <input type="submit" value="Edit" className="btn btn-primary"></input>
                        </div>

                    </form>

                </div>
            </div>
        )
    }
}

Delete.jsx

import axios from "axios";
import React, { Component } from "react";

export class Delete extends Component{
    constructor(props){
        super(props);

        this.onCancel = this.onCancel.bind(this);
        this.onConfirmation = this.onConfirmation.bind(this);

        this.state = {
            name: '',
            designation: '',
            fathersName: '',
            mothersName: '',
            dateOfBirth: null
        }
    }

    componentDidMount(){
        const {id} = this.props.match.params;
        axios.get("api/Employees/Employee/" + id).then(employee =>{
            const response = employee.data;
            this.setState({
                id : response.id,
                name: response.name,
                designation: response.designation,
                fathersName: response.fathersName,
                mothersName: response.mothersName,
                dateOfBirth: new Date(response.dateOfBirth).toISOString().slice(0,10)
            })
        })
    }

    onCancel() {
        const { history } = this.props;
        history.push('/employees');
    }

    onConfirmation(e){
        e.preventDefault();

        const {id} = this.props.match.params;
        const {history} = this.props;
        
        axios.delete("api/Employees/DeleteEmployee/" + id).then(result => {
            history.push('/employees');
        })

    } 


    render(){
        return(
            <div>
                <h2>Delete</h2>
                <h3>Are you sure you want to delete this?</h3>
                <div>
                <h4>Employee</h4>
                    <dl class="row">
                        <dt class="col-sm-2">
                            Name:
                        </dt>
                        <dd class="col-sm-10">
                            {this.state.name}
                        </dd>
                        <dt class="col-sm-2">
                            Designation:
                        </dt>
                        <dd class="col-sm-10">
                            {this.state.designation}
                        </dd>
                        <dt class="col-sm-2">
                            Father's Name:
                        </dt>
                        <dd class="col-sm-10">
                            {this.state.fathersName}
                        </dd>
                        <dt class="col-sm-2">
                            Mother's Name:
                        </dt>
                        <dd class="col-sm-10">
                            {this.state.mothersName}
                        </dd>

                        <dt class="col-sm-2">
                            Date of Birth:
                        </dt>
                        <dd class="col-sm-10">
                            {this.state.dateOfBirth}
                        </dd>

                    </dl>

                    <form onSubmit={this.onConfirmation}>
                        <input type="hidden" asp-for="Id" />
                        <button type="submit" class="btn btn-danger">Delete</button> |
                        <button onClick={this.onCancel} className="btn btn-primary">Back to List</button>
                    </form>
                </div>
            </div>
        )
    }
}

Step 3: Add Route in App.js

Modify App.js as follows
Here I have define route for employees, create, edit, delete

App.js

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';

import './custom.css'

import {Employees} from './components/Employee/Employees';
import { Create } from './components/Employee/Create';
import { Edit } from './components/Employee/Edit';
import { Delete } from './components/Employee/Delete';

export default class App extends Component {
  static displayName = App.name;

  render () {
    return (
      <Layout>
        <Route exact path='/' component={Home} />
        <Route path='/employees' component={Employees} />
        <Route path='/create' component = {Create}></Route>
        <Route path='/Edit/:id' component = {Edit}></Route>
        <Route path='/Delete/:id' component = {Delete}></Route>
        <Route path='/counter' component={Counter} />
        <Route path='/fetch-data' component={FetchData} />
      </Layout>
    );
  }
}

Step 4: Add Employee in the menu

Add Employee link in the menu
Change NavMenu.js as follows

NavMenu.js

import React, { Component } from 'react';
import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import './NavMenu.css';

export class NavMenu extends Component {
  static displayName = NavMenu.name;

  constructor (props) {
    super(props);

    this.toggleNavbar = this.toggleNavbar.bind(this);
    this.state = {
      collapsed: true
    };
  }

  toggleNavbar () {
    this.setState({
      collapsed: !this.state.collapsed
    });
  }

  render () {
    return (
      <header>
        <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
          <Container>
            <NavbarBrand tag={Link} to="/">HRM</NavbarBrand>
            <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
            <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
              <ul className="navbar-nav flex-grow">
                <NavItem>
                  <NavLink tag={Link} className="text-dark" to="/">Home</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink tag={Link} className="text-dark" to="/employees">Employees</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink tag={Link} className="text-dark" to="/counter">Counter</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
                </NavItem>
              </ul>
            </Collapse>
          </Container>
        </Navbar>
      </header>
    );
  }
}

Step 5: Run and test the application

Go to terminal and type dotnet run to run the application
Now view, insert, update and delete employee information.

Download Source Code

Twitter Facebook LinkedIn

Mahedee Hasan

Building a web application using React and asp.net core(Part 02)

You May Also Enjoy

Step-by-Step Guide: Deploying an ASP.NET Core Application with Azure Kubernetes Services, Azure SQL Server, and Azure Container Registry

Understanding Different Kinds of Kubernetes Resources

How to Configure SSL and HTTPS for RabbitMQ in Docker

Utilizing Bulk Operations with Entity Framework and ASP.NET Core