CRUD Application using .NET Core and React.js

Overview

This article guides you through creating a simple Employee Management System with CRUD functionality using.

Backend: ASP.NET Core Web API
Frontend: React.js
Database: SQL Server (via Entity Framework Core)

Step 1. Backend Setup - ASP.NET Core Web API

1.1. Create Project

Run this command on bash.

dotnet new webapi -n EmployeeAPI
cd EmployeeAPI

1.2. Add EF Core Packages

dotnet add package Microsoft.EntityFrameworkCore.SqlServer  
dotnet add package Microsoft.EntityFrameworkCore.Tools

1.3. Create Employee Model

// Models/Employee.cs
namespace EmployeeAPI.Models
{
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Department { get; set; }
        public decimal Salary { get; set; }
    }
}

1.4. Create DbContext

// Data/EmployeeContext.cs
using Microsoft.EntityFrameworkCore;
using EmployeeAPI.Models;

namespace EmployeeAPI.Data
{
    public class EmployeeContext : DbContext
    {
        public EmployeeContext(DbContextOptions<EmployeeContext> options) 
            : base(options) 
        { 
        }
        public DbSet<Employee> Employees { get; set; }
    }
}

1.5. Register DbContext in Program.cs

builder.Services.AddDbContext<EmployeeContext>(options =>
    options.UseSqlServer(
        builder.Configuration.GetConnectionString("DefaultConnection")
    )
);

1.6. Add Connection String to appsettings.json

"ConnectionStrings": {
  "DefaultConnection": "Server=YOUR_SERVER;Database=EmployeeDb;Trusted_Connection=True;"
}

using Microsoft.AspNetCore.Mvc;
using EmployeeAPI.Data;
using EmployeeAPI.Models;
using Microsoft.EntityFrameworkCore;

[ApiController]
[Route("api/[controller]")]
public class EmployeesController : ControllerBase
{
    private readonly EmployeeContext _context;

    public EmployeesController(EmployeeContext context) => _context = context;

    [HttpGet]
    public async Task<ActionResult<IEnumerable<Employee>>> GetEmployees() =>
        await _context.Employees.ToListAsync();

    [HttpGet("{id}")]
    public async Task<ActionResult<Employee>> GetEmployee(int id)
    {
        var emp = await _context.Employees.FindAsync(id);
        return emp == null ? NotFound() : emp;
    }

    [HttpPost]
    public async Task<ActionResult<Employee>> CreateEmployee(Employee emp)
    {
        _context.Employees.Add(emp);
        await _context.SaveChangesAsync();
        return CreatedAtAction(nameof(GetEmployee), new { id = emp.Id }, emp);
    }

    [HttpPut("{id}")]
    public async Task<IActionResult> UpdateEmployee(int id, Employee emp)
    {
        if (id != emp.Id)
            return BadRequest();

        _context.Entry(emp).State = EntityState.Modified;
        await _context.SaveChangesAsync();

        return NoContent();
    }

    [HttpDelete("{id}")]
    public async Task<IActionResult> DeleteEmployee(int id)
    {
        var emp = await _context.Employees.FindAsync(id);
        if (emp == null)
            return NotFound();

        _context.Employees.Remove(emp);
        await _context.SaveChangesAsync();

        return NoContent();
    }
}

1.7. Run Migrations

dotnet ef migrations add InitialCreate
dotnet ef database update

Step 2. Frontend Setup - React.js

2.1. Create React App

npx create-react-app employee-ui
cd employee-ui

2.2. Install Axios

npm install axios

2.3. Create API Service

// src/services/employeeService.js

import axios from 'axios';
const API_URL = 'https://localhost:5001/api/employees';
export const getEmployees = () => axios.get(API_URL);
export const getEmployee = (id) =>
  axios.get(`${API_URL}/${id}`);
export const addEmployee = (data) =>
  axios.post(API_URL, data);
export const updateEmployee = (id, data) =>
  axios.put(`${API_URL}/${id}`, data);
export const deleteEmployee = (id) =>
  axios.delete(`${API_URL}/${id}`);

2.4. Main Component Example

// src/App.js
import React, { useEffect, useState } from 'react';
import * as employeeService from './services/employeeService';

function App() {
  const [employees, setEmployees] = useState([]);
  const [form, setForm] = useState({ name: '', department: '', salary: '' });
  const [editId, setEditId] = useState(null);

  const fetchData = async () => {
    const res = await employeeService.getEmployees();
    setEmployees(res.data);
  };

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (editId) {
      await employeeService.updateEmployee(editId, form);
    } else {
      await employeeService.addEmployee(form);
    }
    setForm({ name: '', department: '', salary: '' });
    setEditId(null);
    fetchData();
  };

  const handleEdit = (emp) => {
    setForm(emp);
    setEditId(emp.id);
  };

  const handleDelete = async (id) => {
    await employeeService.deleteEmployee(id);
    fetchData();
  };

  return (
    <div>
      <h2>Employee Management</h2>
      <form onSubmit={handleSubmit}>
        <input
          value={form.name}
          onChange={(e) => setForm({ ...form, name: e.target.value })}
          placeholder="Name"
          required
        />
        <input
          value={form.department}
          onChange={(e) => setForm({ ...form, department: e.target.value })}
          placeholder="Department"
          required
        />
        <input
          value={form.salary}
          onChange={(e) => setForm({ ...form, salary: e.target.value })}
          placeholder="Salary"
          required
          type="number"
        />
        <button type="submit">{editId ? 'Update' : 'Add'}</button>
      </form>

      <ul>
        {employees.map((emp) => (
          <li key={emp.id}>
            {emp.name} ({emp.department}) - ${emp.salary}
            <button onClick={() => handleEdit(emp)}>Edit</button>
            <button onClick={() => handleDelete(emp.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Step 3. Enable CORS in .NET Core

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp", policy =>
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyMethod()
              .AllowAnyHeader());
});

app.UseCors("AllowReactApp");

Step 4. Run the Projects

Run backend

dotnet run

Run frontend

npm start

Output

A simple UI to.

List employees
Add a new employee
Edit existing employee
Delete employee

Summary

This full-stack CRUD project demonstrated how to.

Create and expose RESTful APIs in ASP.NET Core
Connect SQL Server using EF Core
Consume those APIs in React
Use Axios for API calls
Enable CORS between frontend and backend