Building a Complete Employee CRUD Application Using React and ASP.NET Core Web API

Introduction

CRUD operations (Create, Read, Update, Delete) are fundamental in most web applications. In this article, we will build a complete Employee Management application using React and ASP.NET Core Web API.

The React application will communicate with a backend API to perform the following operations:

Create a new employee
Retrieve employee records
Edit employee details
Update employee information
Delete employee records

This approach demonstrates how React can interact with backend APIs to manage data efficiently.

Prerequisites

Before starting, ensure you have:

Node.js installed
React application created
ASP.NET Core Web API running
Basic knowledge of React Hooks
An Employee table in the database

Example Employee Model:

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Department { get; set; }
}

Project Structure

A simple React project structure:

src
 ├── App.js
 ├── EmployeeCRUD.jsx
 └── index.js

The main CRUD logic is implemented inside EmployeeCRUD.jsx.

Managing State in React

React Hooks such as useState are used to store application data.

const [employee,setEmployee]=useState([]);
const [id,setId]=useState(null);
const [name,setEmployeeName]=useState("");
const [department,setDepartmentName]=useState("");

These state variables store:

Employee list
Selected employee ID
Employee name
Employee department

Fetching Employee Data

We use useEffect to load employee data when the component loads.

useEffect(() => {
 fetchEmployees();
}, []);

Function to fetch employees:

const fetchEmployees = () => {
 fetch("http://localhost:5288/api/Employee")
 .then(response => response.json())
 .then(data => setEmployee(data))
 .catch(error => console.log(error));
};

This retrieves employee records from the API and updates the UI.

Adding a New Employee

A POST request is used to add new employees.

const addEmployee = () => {

 const newEmployee = {
   name:name,
   department:department
 };

 fetch("http://localhost:5288/api/Employee",{
   method:"POST",
   headers:{
     "Content-Type":"application/json"
   },
   body:JSON.stringify(newEmployee)
 })
 .then(response => response.json())
 .then(data => {
   setEmployee([...employee,data]);
   setEmployeeName("");
   setDepartmentName("");
 })
 .catch(error => console.log(error));

};

This sends employee data to the API and updates the UI instantly.

Editing an Employee

The Edit button loads employee data into the input fields.

const editEmployee = (emp) => {
 setId(emp.id);
 setEmployeeName(emp.name);
 setDepartmentName(emp.department);
};

This allows users to modify existing records.

Updating Employee Information

A PUT request updates the employee record.

const updateEmployee = () => {

 const updatedEmployee = {
   id:id,
   name:name,
   department:department
 };

 fetch(`http://localhost:5288/api/Employee/${id}`,{
   method:"PUT",
   headers:{
     "Content-Type":"application/json"
   },
   body:JSON.stringify(updatedEmployee)
 })
 .then(()=>{
   fetchEmployees();
   setId(null);
   setEmployeeName("");
   setDepartmentName("");
 })
 .catch(error => console.log(error));

};

This ensures the updated data is saved in the database.

Deleting an Employee

A DELETE request removes employee records.

const deleteEmployee = (id) => {

 fetch(`http://localhost:5288/api/Employee/${id}`,{
   method:"DELETE"
 })
 .then(response=>{
   if(response.ok){
     setEmployee(employee.filter(emp => emp.id !== id));
   }
 })
 .catch(error => console.log(error));

};

Once deleted, the UI updates automatically.

Displaying Employee Data

Employee records are displayed using map().

{employee.map(emp => (
<div key={emp.id}>

{emp.name} - {emp.department}

<button onClick={()=>editEmployee(emp)}>Edit</button>

<button onClick={()=>deleteEmployee(emp.id)}>Delete</button>

</div>
))}

This dynamically renders all employees in the UI.

Final Output

After implementing all features, the application supports:

✔ Create Employee
✔ View Employees
✔ Edit Employee
✔ Update Employee
✔ Delete Employee

This completes a full React CRUD application integrated with ASP.NET Core Web API.

Conclusion

Building a CRUD application is an excellent way to understand how React interacts with backend APIs. By using React Hooks such as useState and useEffect, we can manage state effectively and keep the UI synchronized with backend data.

This architecture is widely used in modern enterprise applications, where React acts as the frontend and ASP.NET Core serves as the backend API.