ASP.NET Core  

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

Step 8: Run EF Core Migration

Run these commands:

dotnet ef migrations add InitialCreate
dotnet ef database update

This creates the Users table in SQL Server.

Step 9: Create Angular Project

Run:

ng new user-registration-app
cd user-registration-app

Add HttpClientModule

In app.module.ts:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ]
})
export class AppModule { }

Step 10: Create Registration Form Component

Run:

ng generate component register

Step 11: Build Registration Form

In register.component.html:

<h2>User Registration</h2>

<form (ngSubmit)="submitForm()" #registerForm="ngForm">

  <label>Full Name</label>
  <input type="text" [(ngModel)]="user.fullName" name="fullName" required>

  <label>Email</label>
  <input type="email" [(ngModel)]="user.email" name="email" required>

  <label>Password</label>
  <input type="password" [(ngModel)]="user.password" name="password" required>

  <button type="submit">Register</button>

</form>

<p>{{ message }}</p>

Step 12: Create Angular Service for API Calls

Run:

ng generate service user

In user.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private apiUrl = 'https://localhost:5001/api/user/register';

  constructor(private http: HttpClient) { }

  register(user: any) {
    return this.http.post(this.apiUrl, user);
  }
}

Step 13: Connect Component and Service

In register.component.ts:

import { Component } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html'
})
export class RegisterComponent {

  user = {
    fullName: '',
    email: '',
    password: ''
  };

  message: string = '';

  constructor(private userService: UserService) { }

  submitForm() {
    this.userService.register(this.user).subscribe({
      next: (response: any) => {
        this.message = response.message;
      },
      error: (error) => {
        this.message = error.error.message;
      }
    });
  }
}

This sends the user object to the ASP.NET Core API.

Step 14: Enable CORS in ASP.NET Core

In Program.cs:

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

Enable it:

app.UseCors("AllowAngular");

Step 15: Test the Registration System

Run backend:

dotnet run

Run Angular:

ng serve

Open:

http://localhost:4200

Enter user information and click Register.

Expected outcomes:

  • If email is unique, user is saved into SQL Server.

  • If email already exists, Angular shows an error message.

Membership not found