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

JavaScript
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

HostForLIFE ASP.NET Core Hosting

European Best, cheap and reliable ASP.NET hosting with instant activation. HostForLIFE.eu is #1 Recommended Windows and ASP.NET hosting in European Continent. With 99.99% Uptime Guaranteed of Relibility, Stability and Performace. HostForLIFE.eu security team is constantly monitoring the entire network for unusual behaviour. We deliver hosting solution including Shared hosting, Cloud hosting, Reseller hosting, Dedicated Servers, and IT as Service for companies of all size.