January 06, 2025

.NET Core Web API for Order Management


Introduction

In today's fast-paced world, real-time applications are critical for businesses. From stock tracking to e-commerce order management, the need for instant updates is ubiquitous. This blog demonstrates how to create a real-time Order Management System using .NET Core Web API, SignalR, and a simple Angular client.


1. Project Setup

Prerequisites

  • Install .NET SDK (at least .NET 6.0).
  • Install a database (e.g., SQL Server or SQLite).
  • Install an IDE like Visual Studio or Visual Studio Code.
  • Basic knowledge of C# and .NET Core.

Step 1: Create a New Web API Project

Run the following command to create a new Web API project:

bash
dotnet new webapi -n OrderManagementApi

Navigate to the project directory:

bash
cd OrderManagementApi

Step 2: Add Necessary NuGet Packages

Install SignalR and Entity Framework Core:

bash
dotnet add package Microsoft.AspNetCore.SignalR dotnet add package Microsoft.EntityFrameworkCore dotnet add package Microsoft.EntityFrameworkCore.SqlServer dotnet add package Microsoft.EntityFrameworkCore.Tools

2. Design the API

Models

Create a Models folder and add an Order class:

csharp
public class Order { public int Id { get; set; } public string ProductName { get; set; } public int Quantity { get; set; } public DateTime OrderDate { get; set; } public string Status { get; set; } }

DbContext

Create an OrderContext class in a Data folder:

csharp
using Microsoft.EntityFrameworkCore; public class OrderContext : DbContext { public OrderContext(DbContextOptions<OrderContext> options) : base(options) { } public DbSet<Order> Orders { get; set; } }

Configure the database connection in appsettings.json:

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

Update the Program.cs file to add DbContext:

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

API Controllers

Add an OrdersController:

csharp
[ApiController] [Route("api/[controller]")] public class OrdersController : ControllerBase { private readonly OrderContext _context; public OrdersController(OrderContext context) { _context = context; } [HttpGet] public async Task<ActionResult<IEnumerable<Order>>> GetOrders() { return await _context.Orders.ToListAsync(); } [HttpPost] public async Task<ActionResult<Order>> AddOrder(Order order) { _context.Orders.Add(order); await _context.SaveChangesAsync(); return CreatedAtAction(nameof(GetOrders), new { id = order.Id }, order); } }

3. Real-Time Updates with SignalR

Hub Configuration

Create an OrderHub class:

csharp
using Microsoft.AspNetCore.SignalR; public class OrderHub : Hub { public async Task NotifyOrderCreated(Order order) { await Clients.All.SendAsync("OrderCreated", order); } }

Register SignalR in Program.cs:

csharp
builder.Services.AddSignalR(); app.MapHub<OrderHub>("/orderHub");

4. Angular Client for Real-Time Updates

Setup Angular Project

Install Angular CLI and create a new project:

bash
npm install -g @angular/cli ng new order-management-client cd order-management-client

Install SignalR client:

bash
npm install @microsoft/signalr

Service to Connect SignalR

Create an OrderService:

typescript
import { Injectable } from '@angular/core'; import * as signalR from '@microsoft/signalr'; @Injectable({ providedIn: 'root', }) export class OrderService { private hubConnection: signalR.HubConnection; constructor() { this.hubConnection = new signalR.HubConnectionBuilder() .withUrl('https://localhost:5001/orderHub') .build(); this.hubConnection.start().catch(err => console.error(err)); } listenForNewOrders(callback: (order: any) => void) { this.hubConnection.on('OrderCreated', callback); } }

5. Testing the API

  • Use tools like Postman or Swagger to test API endpoints.
  • Test real-time updates by adding a new order and observing live updates on the Angular client.

6. Deployment

  • Host the .NET Core Web API on a cloud platform like Azure or AWS.
  • Deploy the Angular client on a platform like Netlify or Firebase.