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