Building a User Registration System with Angular + .NET + SQL Server

A Complete Step-by-Step Guide for Web Developers

A user registration system is one of the most common features in any web application. It allows users to create accounts, log in, and interact with the system. In this guide, we will build a simple but complete user registration flow using:

• Angular as the front-end

• ASP.NET Core Web API as the back-end

• SQL Server as the database

This tutorial uses simple language and shows you how everything connects from UI to API to database.

System Architecture Overview

The registration system will have the following workflow:

1. Angular collects user input (Name, Email, Password).

2. Angular sends data to ASP.NET Core API using HttpClient.

3. The API receives the data and validates it.

4. API saves the user into SQL Server using Entity Framework Core.

5. API returns a success response back to Angular.

6. Angular shows a success message or error message.

This flow gives you a complete full-stack registration system.

Step 1: Create SQL Server Database

You can create a database manually or through EF Core migrations.

SQL Example

CREATE DATABASE UserRegistrationDB;

Step 2: Create ASP.NET Core Web API Project

Run this command:

dotnet new webapi -n UserRegistrationAPI

Install EF Core Packages

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

Step 3: Create User Model

In Models/User.cs:

public class User
{
    public int Id { get; set; }

    public string FullName { get; set; }

    public string Email { get; set; }

    public string Password { get; set; }
}

Step 4: Create Database Context

In Data/AppDbContext.cs:

using Microsoft.EntityFrameworkCore;

public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
    {
    }

    public DbSet<User> Users { get; set; }
}

Step 5: Configure SQL Server in appsettings.json

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=localhost;Database=UserRegistrationDB;Trusted_Connection=True;"
  }
}

Step 6: Register DB Context in Program.cs

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

Step 7: Create User Registration API Endpoint

In Controllers/UserController.cs:

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

    public UserController(AppDbContext context)
    {
        _context = context;
    }

    [HttpPost("register")]
    public async Task<IActionResult> Register(User user)
    {
        // Check if email already exists
        var existingUser = _context.Users.FirstOrDefault(x => x.Email == user.Email);
        if (existingUser != null)
        {
            return BadRequest(new { Message = "Email already registered" });
        }

        _context.Users.Add(user);
        await _context.SaveChangesAsync();

        return Ok(new { Message = "User registered successfully" });
    }
}