BMI Calculator in Blazor – From Zero to a Working App in 15 Minutes

BMI (Body Mass Index) is a simple yet still popular measure of the relationship between body weight and height. In this tutorial:

1. You’ll build a single-page Blazor Server application from scratch.
2. You’ll learn how to separate logic from the view using simple DI services.
3. You’ll add result interpretation (underweight, normal, overweight …).
4. You’ll get a ready-made layout (Bootstrap) suitable for your portfolio.

Minimum Requirements

• .NET 9 (SDK)
•  Visual Studio 2022
•  Blazor Web App template (we’ll start with pure Blazor Server – easier to begin with, later it’s easy to move to WASM)

Project – Quick Start

1. Launch Visual Studio 2022.
2. Create a new project.
3. Choose the Blazor Web App template.
4. Application name – BmiApp.
5. Target framework: .NET 9.
6. Interactive render mode: Server.
7. Interactivity location: Global.
8. Create the project.

Model and Calculation Logic

1. Class `BmiResult.cs`

public enum BmiCategory
{
    Underweight,
    Normal,
    Overweight,
    Obese
}

public record BmiResult(double Value, BmiCategory Category);

2. Service `BmiService.cs`

public interface IBmiService
{
    BmiResult Calculate(double weightKg, double heightCm);
}

public class BmiService : IBmiService
{
    public BmiResult Calculate(double weightKg, double heightCm)
    {
        var heightM = heightCm / 100.0;
        var bmi = weightKg / (heightM * heightM);

        BmiCategory cat = bmi switch
        {
            < 18.5 => BmiCategory.Underweight,
            < 25.0 => BmiCategory.Normal,
            < 30.0 => BmiCategory.Overweight,
            _ => BmiCategory.Obese
        };

        return new(bmi, cat);
    }
}

3. Registration in DI (`Program.cs`)

builder.Services.AddSingleton<IBmiService, BmiService>();

Razor Component – `Pages/BmiCalculator.razor`

For simplicity, I’ve put this code into a single file, but you can split the Razor markup and C# code into two separate files if you like.

@page "/bmi"
@inject IBmiService Bmi

<h1 class="h3 fw-bold mb-4">Calculator BMI</h1>

<div class="row g-3">
    <div class="col-md-6">
        <label class="form-label">Weight (kg)</label>
        <input class="form-control" type="number" @bind="weight" min="1" step="0.1" />
    </div>

    <div class="col-md-6">
        <label class="form-label">Height (cm)</label>
        <input class="form-control" type="number" @bind="height" min="1" step="0.1" />
    </div>
</div>

<button class="btn btn-primary mt-3" @onclick="Compute">Compute</button>

@if (result is not null)
{
    <p class="mt-4 fs-5">
        Your BMI: <strong>@result.Value.ToString("0.0")</strong> –
        @CategoryToText(result.Category)
    </p>
}

@code {
    private double weight;
    private double height;
    private BmiResult? result;

    private void Compute()
        => result = Bmi.Calculate(weight, height);

    private static string CategoryToText(BmiCategory cat) => cat switch
    {
        BmiCategory.Underweight => "underweight",
        BmiCategory.Normal => "normal ✔",
        BmiCategory.Overweight => "overweight",
        _ => "obesity"
    };
}

Navigation

Open `Components/Layout/NavMenu.razor` and add:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="bmi">
        <span class="bi bi-house-door-fill-nav-menu" /> BMI
    </NavLink>
</div>

Result Interpretation After Running

Potential Extensions

•  Unit switching (pounds / inches).
•  An animated BMI history chart over time using chart.js via Blazor.
•  Saving history to SQLite via EF Core + Web API.

Summary

In just a few lines of code, we’ve built a complete Blazor application that calculates BMI and interprets the result.

If you want to go deeper into the world of .NET, DI, and Blazor – check out my complete course Blazor School, where we build much more advanced Blazor applications (for example, a complete online store).