Implementing Edit and Update Functionality in React with ASP.NET Core Web API

Introduction

In modern web applications, CRUD operations (Create, Read, Update, Delete) are essential for managing data efficiently. In this article, we will focus on implementing the Edit and Update functionality in a React application that communicates with an ASP.NET Core Web API.

Prerequisites

Before implementing the Edit and Update functionality, ensure that you have:

A working ASP.NET Core Web API
A React application
Basic CRUD operations already implemented
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; }
}

Step 1: Create Update API in ASP.NET Core

To update an employee record, we need to create a PUT endpoint in the Employee Controller.

[HttpPut("{id}")]
public IActionResult UpdateEmployee(int id, Employee employee)
{
    var existingEmployee = _context.Employees.Find(id);

    if (existingEmployee == null)
    {
        return NotFound();
    }

    existingEmployee.Name = employee.Name;
    existingEmployee.Department = employee.Department;

    _context.SaveChanges();

    return Ok(existingEmployee);
}

Explanation

The API receives the employee id and updated data.
It finds the employee record in the database.
Updates the fields.
Saves the changes using Entity Framework Core.

Step 2: Create State Variables in React

In the React component, we store employee data using useState.

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

These states help manage:

Employee list
Selected employee for editing
Updated values

Step 3: Implement Edit Function

When the user clicks the Edit button, we load the employee data into the input fields.

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

What happens here?

The selected employee’s data is stored in state variables.
The input fields automatically display the existing values.
The user can modify them.

Step 4: Implement Update Function

After editing the values, the user clicks Update to send the updated data to the API.

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

};

Explanation

Sends a PUT request to the API.
Updates the employee record in the database.
Refreshes the employee list.

Step 5: Add Edit Button in UI

Each employee row will contain Edit and Delete buttons.

{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>
))}

Step 6: Add Update Button

The user can update the employee details using the Update button.

<button onClick={addEmployee}>Add</button>
<button onClick={updateEmployee}>Update</button>

Final Output

After implementing these steps, the application supports:

Create Employee
View Employees
Delete Employee
Edit Employee
Update Employee

This completes the full CRUD functionality in a React application connected to an ASP.NET Core Web API.

Conclusion

Implementing Edit and Update functionality is an essential step in building a complete CRUD application. By combining React state management with ASP.NET Core Web API, we can efficiently update records and maintain synchronization between the UI and the database.

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