Connecting Blazor Server with PostgreSQL: A Practical Guide

Introduction

• Quick intro to Blazor Server (real-time web apps with C#).

• Why PostgreSQL? (Open-source, reliable, great for enterprise apps).

• What this tutorial covers:

  1. Setting up PostgreSQL

  2. Configuring a Blazor Server app

  3. Using Entity Framework Core (EF Core) to communicate with PostgreSQL

  4. CRUD operations with a sample table

Step 1: Setting Up PostgreSQL

• Install PostgreSQL locally or use a Docker container.

• Create a database, e.g., BlazorDb.

• Example command to create a database:

CREATE DATABASE "BlazorDb";
CREATE TABLE Products (
    Id SERIAL PRIMARY KEY,
    Name VARCHAR(100),
    Price DECIMAL
);

Step 2: Create Blazor Server Project and Add required NuGet packages:

dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL
dotnet add package Microsoft.EntityFrameworkCore.Design

Step 3: Configure EF Core for PostgreSQL

• Create a Models folder with Product.cs:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Create AppDbContext.cs in Data folder:

using Microsoft.EntityFrameworkCore;

public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
    public DbSet<Product> Products { get; set; }
}

Configure Program.cs for PostgreSQL:

using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

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

var app = builder.Build();

Add connection string in appsettings.json:

"ConnectionStrings": {
  "DefaultConnection": "Host=localhost;Database=BlazorDb;Username=postgres;Password=yourpassword"
}

Step 4: Run Migrations

dotnet ef migrations add InitialCreate
dotnet ef database update

EF Core will create tables automatically in PostgreSQL.

Step 5: CRUD Operations in Blazor

Inject AppDbContext into a Blazor component, e.g., Pages/Products.razor:

@page "/products"
@inject AppDbContext _context

<h3>Products</h3>

<ul>
    @foreach (var product in products)
    {
        <li>@product.Name - [email protected]</li>
    }
</ul>

@code {
    private List<Product> products;

    protected override async Task OnInitializedAsync()
    {
        products = await _context.Products.ToListAsync();
    }
}

You can extend with Add/Edit/Delete functionality with forms and buttons.

Step 6: Tips & Best Practices

• Always use async EF Core methods in Blazor to avoid blocking the UI.

• Use Dependency Injection for DbContext.

• Consider connection pooling for production apps.

• Avoid exposing sensitive credentials — use secrets.json or environment variables.

Conclusion

• You now have a Blazor Server app talking to PostgreSQL.

• Can extend with authentication, advanced queries, stored procedures, etc.

• PostgreSQL + Blazor is perfect for modern enterprise apps with .NET Core.