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:
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.