Emiliano Montesdeoca

Blazor vanaf nul: Hoofdstuk 3 — Componenten die schalen

Mon, 01 Jun 2026 00:00:00 +0000

Welkom bij Hoofdstuk 3 van Blazor vanaf nul. Als je Hoofdstuk 2 hebt gemist, lees dat eerst zodat je basisproject klaarstaat.

In Hoofdstuk 2 kregen we de app draaiend. In dit hoofdstuk maken we hem onderhoudbaar.

Blazor-projecten worden snel rommelig als elke pagina een gigantisch .razor-bestand wordt. Componenten voorkomen dat: meer consistentie, meer hergebruik en duidelijke grenzen tussen UI-delen.

Wat een Blazor-component echt is

Een component is een .razor-bestand dat:

Markup rendert
Lokale state bevat
Input accepteert via parameters
Events naar parent-componenten stuurt
Child content rendert

Tijdens runtime behandelt Blazor elke component als een kleine state machine. Bij state-wijzigingen rendert Blazor opnieuw en past het een DOM-diff toe.

Doel: duidelijke input en voorspelbaar gedrag.

Stap 1: Begin met een gerichte component

Maak Components/Common/SectionHeader.razor:

<header class="section-header">
 <h2>@Title</h2>
 @if (!string.IsNullOrWhiteSpace(Subtitle))
 {
 <p>@Subtitle</p>
 }
</header>

@code {
 [Parameter] public string Title { get; set; } = string.Empty;
 [Parameter] public string? Subtitle { get; set; }
}

Gebruik in Components/Pages/Home.razor:

@page "/"

<PageTitle>Blazor vanaf nul</PageTitle>

<SectionHeader
 Title="Blazor vanaf nul"
 Subtitle="Hoofdstuk 3 gaat over componenten." />

Klein voorbeeld, groot principe: een component moet via parameters leesbaar zijn.

Stap 2: Maak gedrag expliciet met parameters

Laten we een herbruikbare knop maken.

Components/Common/AppButton.razor:

<button class="app-button @VariantCssClass" @onclick="OnClick">
 @Text
</button>

@code {
 [Parameter] public string Text { get; set; } = "Button";
 [Parameter] public string Variant { get; set; } = "primary";
 [Parameter] public EventCallback OnClick { get; set; }

 private string VariantCssClass => Variant.ToLowerInvariant() switch
 {
 "secondary" => "app-button--secondary",
 "danger" => "app-button--danger",
 _ => "app-button--primary"
 };
}

Gebruik:

@code {
 private int _savedCount;

 private void Save()
 {
 _savedCount++;
 }
}

<AppButton Text="Save" Variant="primary" OnClick="Save" />
<p>Opgeslagen @_savedCount keer.</p>

Belangrijkste punt: contractontwerp.

Houd parameters klein en helder
Gebruik expliciete namen, geen verborgen magie
Geef veilige defaults

Stap 3: Gebruik `RenderFragment` voor compositie

Met RenderFragment kan een parent UI-blokken meegeven aan een child.

Maak Components/Common/Card.razor:

<article class="card">
 <header class="card__header">@Title</header>
 <section class="card__body">
 @ChildContent
 </section>
</article>

@code {
 [Parameter] public string Title { get; set; } = string.Empty;
 [Parameter] public RenderFragment? ChildContent { get; set; }
}

Gebruik:

<Card Title="Roadmap">
 <ul>
 <li>Componenten</li>
 <li>Data binding</li>
 <li>Routing</li>
 </ul>
</Card>

Zo bouw je consistente layout zonder overal dezelfde wrapper-markup te herhalen.

Stap 4: Kies compositie boven gigantische pagina’s

Wordt een pagina te groot? Splits op verantwoordelijkheid:

ProfileSummary voor het bovenste profielblok
ProfileStats voor metrics
ProfileActivityList voor recente activiteit

De pagina wordt dan orkestratie, niet implementatiedetail.

Stap 5: Houd markup en logica in balans

Voor simpele componenten is inline @code prima.

Voor grotere componenten, gebruik code-behind:

UserCard.razor
UserCard.razor.cs

Dat houdt markup en C# logica allebei leesbaar.

Stap 6: Praktische mappenstructuur

Een structuur die goed schaalt:

Components/Pages/ -> routeerbare pagina’s
Components/Layout/ -> app-shell en navigatie
Components/Common/ -> gedeelde generieke bouwstenen
Components/Features/<FeatureName>/ -> feature-specifieke componenten

Veelgemaakte fouten in vroege Blazor-projecten

Te veel parameters in plaats van een dedicated viewmodel
Businessregels direct in pagina-componenten
Eén “god component” met honderden regels
Markup-patronen herhalen in plaats van kleine herbruikbare componenten maken

Volgende hoofdstuk

In Hoofdstuk 4 focussen we op data binding en events: @bind, event handling, trade-offs van two-way binding en patronen voor voorspelbare state.

Blazor vanaf nul: Hoofdstuk 2 — Je eerste Blazor-app

Thu, 14 May 2026 00:00:00 +0000

Welkom bij hoofdstuk 2 van Blazor vanaf nul. Heb je hoofdstuk 1 gemist? Lees dat eerst zodat de renderingcontext nog vers is.

In dit hoofdstuk maken we een nieuwe Blazor-app, starten die lokaal en begrijpen wat de belangrijkste bestanden doen.

Stap 1: Project maken

In je terminal:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

Dit maakt een .NET 9 Blazor Web App met de standaardstructuur.

Als je tooling vraagt om een interactiviteitsmodel, begin met Interactive Server. Dat is de makkelijkste modus om mee te starten.

Stap 2: Lokaal draaien

Start de app:

dotnet watch

Open daarna de URL uit de terminal (meestal https://localhost:5xxx). Je zou de standaardapp met Home, Counter en Weather moeten zien.

Als dit werkt, is je omgeving klaar.

Stap 3: Projectstructuur begrijpen

Dit zijn de eerste bestanden en mappen die je moet kennen:

Program.cs — registreert services en configureert de HTTP-pipeline.
Components/App.razor — rootcomponent van de app.
Components/Routes.razor — routering voor pagina’s.
Components/Pages/ — routeerbare pagina’s zoals Home en Counter.
Components/Layout/ — gedeelde layout (MainLayout.razor, navigatie).
wwwroot/ — statische assets (CSS, afbeeldingen, favicon).
appsettings.json — configuratiewaarden.

Je hoeft nog niet alles te begrijpen. Voor nu is het genoeg te weten waar UI staat en waar startup gebeurt.

Stap 4: Je eerste wijziging

Open Components/Pages/Home.razor en vervang de inhoud door:

@page "/"

<PageTitle>Blazor vanaf nul</PageTitle>

<h1>Blazor vanaf nul</h1>
<p>Hoofdstuk 2 draait lokaal.</p>

Sla op en ververs de browser. Met dotnet watch wordt de app direct bijgewerkt.

Deze kleine wijziging bevestigt de volledige lus: bewerken -> bouwen -> renderen.

Stap 5: Lees Program.cs één keer

Je hoeft het niet uit je hoofd te leren, maar herken deze regels:

AddRazorComponents() zet Razor-componenten aan.
AddInteractiveServerComponents() zet interactieve servercomponenten aan.
MapRazorComponents<App>() koppelt de rootcomponent aan endpoints.

Deze regels laten zien hoe de app opstart en welke renderingmogelijkheden actief zijn.

Veelvoorkomende problemen

Als er iets faalt, is het meestal een van deze:

Oude SDK: draai dotnet --version en controleer .NET 9.
HTTPS-certificaat: draai dotnet dev-certs https --trust.
Poortconflict: stop oude dotnet-processen en start opnieuw.

Volgende hoofdstuk

In hoofdstuk 3 duiken we dieper in componenten: parameters, compositie en herbruikbare UI-structuur.

Blazor van de Grond Af: Hoofdstuk 1 — Wat is Blazor?

Fri, 08 May 2026 00:00:00 +0000

Welkom bij Hoofdstuk 1 van Blazor van de Grond Af. Als je de introductiepost hebt gemist waarin ik uitleg wat deze serie is en voor wie die bedoeld is, begin dan daar — het is kort.

In dit hoofdstuk beantwoorden we de fundamentele vraag: wat is Blazor? Dat klinkt eenvoudig, maar het antwoord heeft meerdere lagen — zeker omdat “Blazor” door de jaren heen iets andere betekenissen heeft gekregen. Aan het einde van dit artikel weet je wat Blazor is, hoe het past in het .NET-ecosysteem, wat de verschillende renderingmodellen zijn en waarom je het wel — of niet — zou kunnen kiezen boven een JavaScript-framework.

Een korte geschiedenis

Blazor begon als een experimenteel project van Steve Sanderson bij Microsoft rond 2017. Het idee was provocatief: C# in de browser uitvoeren via WebAssembly, waarmee de noodzaak voor JavaScript volledig zou worden geëlimineerd. Het was een proof of concept, en de naam was een bewuste samenvoeging van Blazer en Razor — de template-engine waarop Blazor uiteindelijk gebouwd zou worden.

Het experiment genereerde genoeg enthousiasme dat Microsoft het serieus nam. Blazor werd in september 2019 uitgebracht als onderdeel van ASP.NET Core 3.0 — eerst als Blazor Server: een model dat je C#-code op de server uitvoert en een realtime SignalR-verbinding gebruikt om UI-updates naar de browser te sturen. Blazor WebAssembly volgde in mei 2020 als onderdeel van ASP.NET Core 3.1, waarmee echte client-side uitvoering aan het framework werd toegevoegd.

.NET 6 en 7 verfijnden de ontwikkelaarservaring. Vervolgens dacht .NET 8, uitgebracht in november 2023, het renderingmodel fundamenteel opnieuw uit met wat Microsoft full-stack web UI noemde. Statische server-side rendering, streaming rendering, interactieve server, interactieve WebAssembly en een nieuwe Auto-modus leefden nu allemaal onder één dak in een enkel project. .NET 9 bouwde verder op deze basis en effende de ruwe kanten.

Dat is waar we vandaag staan.

Wat Blazor werkelijk is

Blazor is in de kern een op componenten gebaseerd UI-framework voor .NET. Je bouwt je gebruikersinterface op uit componenten — zelfstandige eenheden van C# en HTML-markup die toestand kunnen bewaren, op gebeurtenissen kunnen reageren en tot grotere structuren kunnen worden samengesteld. Als je met React of Vue hebt gewerkt, zal dit mentale model vertrouwd aanvoelen. Het cruciale verschil is dat je in plaats van JavaScript C# schrijft.

Componenten in Blazor worden geschreven in .razor-bestanden. Een .razor-bestand combineert HTML-markup met C#-code met de Razor-syntaxis die je misschien al kent van ASP.NET MVC-views. Zo ziet een eenvoudig component eruit:

@page "/counter"

<h1>Teller</h1>
<p>Huidige stand: @currentCount</p>
<button @onclick="IncrementCount">Klik mij</button>

@code {
 private int currentCount = 0;

 private void IncrementCount()
 {
 currentCount++;
 }
}

Geen JavaScript te bekennen. De @onclick-directive koppelt de klik op de knop aan een C#-methode. De @currentCount-expressie geeft de huidige waarde weer. Als de toestand verandert, bepaalt Blazor wat er in de DOM bijgewerkt moet worden.

Dat is de kern. Alles andere — routing, dependency injection, formulieren, HTTP-aanroepen — is gebouwd op dit componentmodel.

De renderingmodellen

Hier schuilt veel verwarring, dus laten we precies zijn. “Blazor” verwijst tegenwoordig naar een familie van renderingmodi, niet naar één enkel deploymentmodel. Het verschil begrijpen is belangrijk, omdat het van invloed is op prestaties, infrastructuurvereisten en wat je componenten wel en niet kunnen doen.

Statische SSR

De eenvoudigste modus. Je Razor-componenten worden op de server naar HTML gerenderd en die HTML wordt naar de browser gestuurd. Geen permanente verbinding, geen WebAssembly en standaard geen client-side interactiviteit. Dit is in essentie wat Razor Pages doet, maar met het componentmodel.

Gebruik dit voor contentrijke pagina’s, landingspagina’s, alles wat geen live interactiviteit nodig heeft.

Interactieve Server

Je componentcode wordt op de server uitgevoerd. Er wordt een SignalR WebSocket-verbinding tot stand gebracht tussen de browser en de server. Als je op een knop klikt of in een invoerveld typt, reist de gebeurtenis via de WebSocket naar de server, wordt je C# uitgevoerd, wordt de diff berekend en worden de DOM-updates teruggestuurd naar de browser.

Voordelen: Volledige toegang tot serverbronnen (databases, bestandssysteem, geheimen). Snelle initiële laadtijd. Kleine downloadgrootte. Werkt in browsers zonder WebAssembly-ondersteuning.

Nadelen: Elke gebruikersinteractie vereist een serverreis heen en terug, wat latentie toevoegt. Serverbronnen schalen met het aantal actieve verbindingen. De app degradeert als de verbinding verbreekt.

Gebruik dit voor bedrijfsapplicaties, interne tools, apps waarbij server-side datatoegang belangrijker is dan offline-mogelijkheden.

Interactieve WebAssembly

De .NET-runtime wordt naar de browser gedownload en je app draait volledig op de client. Na de eerste download werkt de app volledig offline en is elke interactie onmiddellijk — geen serverritten voor UI-logica.

Voordelen: Echte client-side uitvoering. Werkt offline. Verminderde serverbelasting zodra de app geladen is.

Nadelen: Grotere initiële download (.NET-runtime + je app). Langzamere eerste laadtijd. Je hebt een API nodig om toegang te krijgen tot server-side gegevens.

Gebruik dit voor offline-capable apps, tools die onmiddellijke responsiviteit vereisen, scenario’s waarbij serververwerking niet nodig is voor de UI.

Auto-modus

Geïntroduceerd in .NET 8. De app start in de Interactieve Server-modus (snelle initiële laadtijd, niet wachten op WebAssembly-download). Zodra de WebAssembly-bestanden op de achtergrond zijn gedownload, schakelen volgende bezoeken automatisch over naar de WebAssembly-modus.

Dit geeft je de snelle eerste laadtijd van de Servermodus en uiteindelijk de volledige client-side uitvoering van WebAssembly. Het is het meest complexe model om over te redeneren, maar een praktische standaard voor veel apps.

Modi mixen in dezelfde app

In .NET 8 en later ben je niet beperkt tot één renderingmodus voor de hele app. Een marketinglandingspagina kan Statische SSR zijn; het geauthenticeerde dashboard kan Interactieve Server zijn; een datavisualisatiewidget kan Interactieve WebAssembly zijn. Het framework beheert de overgangen.

In deze serie beginnen we met Interactieve Server omdat dat het eenvoudigst werkend te krijgen is en het meest directe mentale model heeft. We verkennen de andere modi naarmate we vorderen.

Hoe Blazor zich verhoudt tot JavaScript-frameworks

Als je met React, Angular of Vue hebt gebouwd, is dit waarschijnlijk de vergelijking die je interesseert.

De overeenkomsten zijn reëel. Het componentmodel van Blazor is opzettelijk vergelijkbaar met dat van React. Je hebt props (Parameters in Blazor), lokale toestand (velden in het @code-blok), lifecycle hooks en hetzelfde communicatiepatroon: data omlaag / gebeurtenissen omhoog. Als je React kent, voel je je binnen een paar uur thuis.

Het cruciale verschil is de taal. In Blazor schrijf je C#. Je bedrijfslogica, validatieregels en datamodellen kunnen allemaal gedeeld worden tussen je Blazor-frontend en je ASP.NET Core-backend. Geen User-klasse meer dupliceren in TypeScript als je die al in C# hebt.

De ecosysteemkloof is reëel maar wordt kleiner. Het npm-ecosysteem is enorm. Het NuGet-ecosysteem voor UI-componenten is kleiner, hoewel het aanzienlijk gegroeid is. Als je een specifieke grafiekbibliotheek of een drag-and-drop-widget nodig hebt, heeft JavaScript nog steeds meer opties. Maar voor de meeste bedrijfsapplicaties is wat beschikbaar is in de .NET-wereld meer dan voldoende.

JavaScript-interoperabiliteit bestaat wanneer je het nodig hebt. Blazor stelt je in staat JavaScript vanuit C# aan te roepen en C# vanuit JavaScript. Voor browser-API’s zonder .NET-wrapper, of wanneer je een bestaande JS-bibliotheek wilt gebruiken, is interop beschikbaar. Het voegt een laag toe, maar het is niet pijnlijk.

Het eerlijke antwoord: als je team volledig uit JavaScript-ontwikkelaars bestaat die een publiek product bouwen waarbij SEO, prestaties en het npm-ecosysteem cruciaal zijn, blijf dan bij JavaScript. Als je team uit .NET-ontwikkelaars bestaat, als je interne of bedrijfsapplicaties bouwt, of als het delen van code tussen frontend en backend voor jou belangrijk is, is Blazor een overtuigende keuze.

Wat je nodig hebt om mee te doen

Voor de rest van deze serie heb je nodig:

.NET 9 SDK — download van dot.net
Een IDE — Visual Studio 2022 (Community-editie is gratis), VS Code met de C# Dev Kit-extensie, of JetBrains Rider
Basiskennis van C# — klassen, properties, interfaces, async/await

Dat is alles. Geen Node, geen npm, geen webpack.

Wat hierna komt

In Hoofdstuk 2 zullen we je eerste Blazor-app opzetten, de projectstructuur doornemen en ervoor zorgen dat je hem lokaal kunt uitvoeren. Aan het einde heb je een werkende app en een duidelijk beeld van wat elk bestand doet.

Tot dan.

Blazor van de Grond Af: Een Nieuwe Serie

Mon, 04 May 2026 00:00:00 +0000

Ik schrijf al een tijdje over Blazor — component-levenscycli, geïsoleerde CSS, interactiviteitsmodellen, authenticatie. Die posts waren op zichzelf nuttig, maar ik voelde altijd dat er een fundament ontbrak. Ze gaan ervan uit dat je al weet wat Blazor is, waarom het bestaat en hoe het in het bredere .NET-ecosysteem past. Niet iedereen weet dat, en dat is volkomen oké.

Daarom begin ik iets nieuws: Blazor van de Grond Af. Een echte serie, opgebouwd vanaf de basis, gericht op ontwikkelaars die werkelijk willen begrijpen wat ze bouwen — niet alleen kopiëren en plakken totdat het werkt.

Voor Wie Is Deze Serie

Deze serie is voor jou als:

Je een .NET-ontwikkelaar bent die van Blazor heeft gehoord maar nooit de tijd of het juiste startpunt had om erin te duiken.
Je Blazor hebt geprobeerd, het aan de gang hebt gekregen, maar het gevoel hebt dat je raadt waarom dingen werken.
Je uit de JavaScript/React/Angular-wereld komt en wilt begrijpen hoe Microsofts antwoord op de moderne frontend eruitziet.
Je één samenhangend resource wilt in plaats van verspreid staande docs en blogposts.

Je hoeft geen senior developer te zijn. Je moet wel comfortabel zijn met C#-basiskennis — klassen, interfaces, async/await. Als je een eenvoudige CRUD-API in ASP.NET Core kunt schrijven, ben je er klaar voor.

Wat We Gaan Behandelen

Hier is een globale roadmap van wat ik van plan ben. Sommige onderwerpen zullen indien nodig uitgroeien tot meerdere posts:

Wat is Blazor? — Hosting-modellen, geschiedenis, vergelijking met traditionele webontwikkeling
Je eerste Blazor-app — Scaffolding, projectstructuur, lokaal uitvoeren
Componenten — De bouwsteen van elke Blazor-UI
Databinding en events — Je UI reactief maken
Communicatie tussen componenten — Parameters, EventCallbacks, cascading values
Routing en navigatie — Hoe Blazor URLs en paginaovergangen afhandelt
Dependency injection — Services, scopes en de DI-container in Blazor
Formulieren en validatie — EditForm, DataAnnotations, aangepaste validators
HTTP en externe data — API’s aanroepen vanuit je Blazor-app
Authenticatie en autorisatie — Je app op de juiste manier beveiligen
JavaScript-interop — Wanneer je de browser direct moet aanspreken
Prestaties en optimalisatie — Virtualisatie, lazy loading, renderstrategieën
Blazor-componenten testen — bUnit en hoe een solide test eruitziet
Deployment — Publiceren naar Azure, IIS en statische hosts

Deze lijst zal zich ontwikkelen. Sommige onderwerpen worden opgesplitst in meerdere posts; anderen kunnen worden samengevoegd. Ik zal deze post bijwerken naarmate de serie vordert en links toevoegen aan elke entry zodra ze worden gepubliceerd.

Waarom Een Serie, Waarom Nu

Blazor is enorm gerijpt. Met .NET 8 en 9 werd het renderingmodel ingrijpend herzien — statische SSR, streaming rendering, interactieve Server, interactieve WebAssembly en de Auto-modus leven nu allemaal onder hetzelfde dak. Het is een echt interessant en capabel framework, maar de toegenomen complexiteit zorgt ervoor dat de beginervaring verwarrend kan zijn.

Ik wil een resource bouwen die je ontmoet waar je bent en je systematisch door het geheel leidt. Geen vervanging voor de officiële documentatie — die is goed en je moet hem lezen — maar een metgezel die het waarom achter het wat uitlegt.

Hoe Je De Serie Kunt Volgen

Elke post in de serie is zelfstandig genoeg om apart te lezen, maar ze bouwen ook op elkaar voort. Als je helemaal van voren af begint, raad ik aan op volgorde te gaan. Als je instapt om een specifieke leemte op te vullen, is dat ook prima — ik zal linken naar vereiste posts waar dat relevant is.

De code voor elke post zal beschikbaar zijn op GitHub. Ik deel de links naarmate we vorderen.

Tot de volgende post.

C# Union Types: gediscrimineerde unions komen eindelijk

Wed, 01 Apr 2026 00:00:00 +0000

If you’ve been writing C# for any significant amount of time, there’s a good chance you’ve hit a wall when trying to model something that can be “one of several things.” Maybe you needed a method to return either a success value or an error. Maybe you were building a payment system that handles credit cards, bank transfers, and digital wallets — each with entirely different data. Or maybe you just looked at F# or Rust and thought, “Why can’t I have that in C#?”

The wait is nearly over. Discriminated unions are coming to C#.

This has been one of the most requested language features for years, with community discussions stretching back to 2017 and earlier. The C# language design team has been working on a proposal that introduces a union keyword for defining closed type hierarchies with exhaustive pattern matching. In this post, I want to walk you through what discriminated unions are, why they matter so much, how we’ve been faking them until now, and what the proposed syntax actually looks like — with real code examples for each.

A quick note before we dive in: as of this writing, the union types feature is still in the proposal and preview stage. The syntax and behavior I describe here are based on the latest publicly available design documents and discussions from the C# language design team. Things may change before the final release. I’ll be clear about what’s confirmed versus what’s still under discussion.

What Are Discriminated Unions?

At its core, a discriminated union (sometimes called a “tagged union” or “sum type”) is a type that can hold one of a fixed set of possible values, where each variant can carry different data. The “discriminated” part means that the runtime always knows which variant it is — there’s a tag that identifies it.

Think of it like an enum, but where each member can carry its own payload of data.

If you’ve used other languages, you’ve probably seen this concept before:

F# has had discriminated unions since day one:

type Shape =
 | Circle of radius: float
 | Rectangle of width: float * height: float
 | Triangle of base: float * height: float

Rust uses enum for the same idea:

enum Shape {
 Circle { radius: f64 },
 Rectangle { width: f64, height: f64 },
 Triangle { base: f64, height: f64 },
}

TypeScript achieves something similar with tagged unions:

type Shape =
 | { kind: "circle"; radius: number }
 | { kind: "rectangle"; width: number; height: number }
 | { kind: "triangle"; base: number; height: number };

In all these cases, the compiler knows every possible variant and can enforce that you handle all of them. That’s the superpower: exhaustiveness checking. If you add a new variant, the compiler tells you everywhere you forgot to handle it.

C# has never had a first-class way to express this. Until now.

How We Simulate Unions Today

Over the years, the C# community has come up with several workarounds, each with its own trade-offs. Let me walk through the most common approaches.

Abstract Records with Inheritance

The most idiomatic workaround in modern C# is using abstract records with sealed derived types:

public abstract record Shape
{
 public sealed record Circle(double Radius) : Shape;
 public sealed record Rectangle(double Width, double Height) : Shape;
 public sealed record Triangle(double Base, double Height) : Shape;

 private Shape() { } // Prevent external inheritance
}

This works reasonably well. You get immutability, value equality, and you can use pattern matching:

double Area(Shape shape) => shape switch
{
 Shape.Circle c => Math.PI * c.Radius * c.Radius,
 Shape.Rectangle r => r.Width * r.Height,
 Shape.Triangle t => 0.5 * t.Base * t.Height,
 _ => throw new InvalidOperationException("Unknown shape")
};

But there are significant drawbacks. The compiler doesn’t know the hierarchy is closed, so you always need that _ discard arm or you get a warning. If you add a new variant, the compiler won’t tell you about all the places you forgot to handle it — the discard silently swallows it. That completely defeats the purpose.

The OneOf Library

Another popular approach is the OneOf NuGet package:

public OneOf<Success<Order>, NotFound, ValidationError> ProcessOrder(OrderRequest request)
{
 // ...
}

// Usage
var result = ProcessOrder(request);
result.Switch(
 success => Console.WriteLine($"Order {success.Value.Id} processed"),
 notFound => Console.WriteLine("Order not found"),
 error => Console.WriteLine($"Validation failed: {error.Message}")
);

OneOf provides exhaustiveness checking at compile time through its generic type parameters, which is great. But it relies on positional matching (first type, second type, etc.), the generic signatures get unwieldy fast, and it doesn’t integrate with the language’s pattern matching. It’s a clever hack, but it’s still a hack.

Manual Enum + Data Pattern

Some developers go the classic route with an enum tag and a data container:

public enum PaymentType { CreditCard, BankTransfer, DigitalWallet }

public class Payment
{
 public PaymentType Type { get; init; }
 public CreditCardInfo? CreditCard { get; init; }
 public BankTransferInfo? BankTransfer { get; init; }
 public DigitalWalletInfo? DigitalWallet { get; init; }
}

This is fragile. Nothing stops you from setting Type to CreditCard but populating the BankTransfer property. The compiler can’t help you, and you end up with runtime errors and null checks everywhere. It’s the “stringly-typed” approach to type modeling, and it doesn’t scale.

All of these approaches share a fundamental problem: they’re fighting the language instead of working with it. The compiler can’t reason about the closed set of possibilities, so you lose the most valuable property of discriminated unions — exhaustive checking.

The C# Proposal: The `union` Keyword

The C# language team’s proposal introduces a dedicated union keyword that defines a closed set of named members, each optionally carrying data. Here’s the basic syntax as it’s been proposed:

union Shape
{
 Circle(double Radius),
 Rectangle(double Width, double Height),
 Triangle(double Base, double Height)
}

That’s it. Clean, concise, and immediately readable. Each member inside the union defines a distinct variant with its own data. The compiler knows that Shape can only ever be one of these three things.

Under the hood, the compiler generates a sealed type hierarchy — similar to what you’d write by hand with abstract records, but with full compiler awareness of the closed nature of the type. This means the compiler can enforce exhaustiveness in pattern matching, which is the key benefit.

Value-Only Members

Union members don’t have to carry data. You can mix data-carrying members with simple value members:

union Option<T>
{
 Some(T Value),
 None
}

This is the classic Option/Maybe type that functional programmers have been asking for in C# for years. None carries no data — it’s just a tag.

Generic Unions

As you can see from the Option<T> example above, unions support generics. Here’s a more involved example:

union Result<T, E>
{
 Ok(T Value),
 Error(E Err)
}

This opens up an entire style of error handling that doesn’t rely on exceptions for expected failure cases — something that’s been standard practice in Rust and functional languages for years.

Unions with Methods

The proposal also allows unions to have methods, computed properties, and implement interfaces, just like any other type:

union Shape
{
 Circle(double Radius),
 Rectangle(double Width, double Height),
 Triangle(double Base, double Height);

 public double Area => this switch
 {
 Circle(var r) => Math.PI * r * r,
 Rectangle(var w, var h) => w * h,
 Triangle(var b, var h) => 0.5 * b * h
 };

 public double Perimeter => this switch
 {
 Circle(var r) => 2 * Math.PI * r,
 Rectangle(var w, var h) => 2 * (w + h),
 Triangle(var b, var h) => b + h + Math.Sqrt(b * b + h * h)
 };
}

Notice how the switch expression inside Area and Perimeter doesn’t need a default arm. The compiler knows the union is exhaustive — there are only three variants, and all three are handled. If you add a fourth variant later, the compiler will flag every switch that doesn’t handle it.

Pattern Matching Integration

Pattern matching has been evolving in C# since version 7.0, and union types are designed to be a first-class citizen of that system.

Exhaustive Switch Expressions

The most impactful feature is exhaustive switch checking. With unions, the compiler knows all possible cases:

string Describe(Shape shape) => shape switch
{
 Circle(var r) => $"A circle with radius {r}",
 Rectangle(var w, var h) => $"A {w}x{h} rectangle",
 Triangle(var b, var h) => $"A triangle with base {b} and height {h}"
};

No discard arm. No _ => throw new NotImplementedException(). If you forget a case, the compiler emits an error, not a warning. This is a fundamental improvement in safety.

Nested Pattern Matching

Unions compose naturally with nested patterns:

union Expr
{
 Literal(double Value),
 Add(Expr Left, Expr Right),
 Multiply(Expr Left, Expr Right),
 Negate(Expr Inner)
}

double Evaluate(Expr expr) => expr switch
{
 Literal(var v) => v,
 Add(var left, var right) => Evaluate(left) + Evaluate(right),
 Multiply(var left, var right) => Evaluate(left) * Evaluate(right),
 Negate(var inner) => -Evaluate(inner)
};

This kind of recursive data structure is extremely common in compilers, interpreters, rules engines, and mathematical modeling. Today in C# you’d need a deep class hierarchy and the visitor pattern. With unions, the code is dramatically simpler.

Guard Clauses

Pattern matching with unions supports when guards just as you’d expect:

string Classify(Shape shape) => shape switch
{
 Circle(var r) when r > 100 => "Large circle",
 Circle(var r) when r > 10 => "Medium circle",
 Circle(_) => "Small circle",
 Rectangle(var w, var h) when w == h => "Square",
 Rectangle _ => "Rectangle",
 Triangle _ => "Triangle"
};

Practical Examples

Let me walk through some real-world scenarios where union types dramatically improve the code.

The Result Pattern: Replacing Exceptions for Expected Errors

One of the most common patterns in modern application development is representing operations that can succeed or fail without using exceptions for control flow. Exceptions should be exceptional — things like network failures or out-of-memory conditions. A validation error or a “not found” result is an expected outcome, not an exception.

union Result<T, E>
{
 Ok(T Value),
 Error(E Err)
}

union OrderError
{
 NotFound(Guid OrderId),
 InsufficientStock(string ProductId, int Requested, int Available),
 PaymentDeclined(string Reason),
 ValidationFailed(IReadOnlyList<string> Errors)
}

Result<Order, OrderError> ProcessOrder(OrderRequest request)
{
 if (!Validate(request, out var errors))
 return new ValidationFailed(errors);

 var product = catalog.Find(request.ProductId);
 if (product is null)
 return new NotFound(request.OrderId);

 if (product.Stock < request.Quantity)
 return new InsufficientStock(request.ProductId, request.Quantity, product.Stock);

 var paymentResult = paymentGateway.Charge(request.Payment);
 if (!paymentResult.Success)
 return new PaymentDeclined(paymentResult.Message);

 var order = CreateOrder(request, product);
 return new Ok(order);
}

The caller is then forced to handle every possible outcome:

var result = ProcessOrder(request);

var response = result switch
{
 Ok(var order) => Results.Created($"/orders/{order.Id}", order),
 Error(NotFound(var id)) => Results.NotFound($"Order {id} not found"),
 Error(InsufficientStock(var pid, var req, var avail)) =>
 Results.Conflict($"Product {pid}: requested {req}, only {avail} available"),
 Error(PaymentDeclined(var reason)) =>
 Results.UnprocessableEntity($"Payment declined: {reason}"),
 Error(ValidationFailed(var errors)) =>
 Results.BadRequest(new { Errors = errors })
};

No try-catch blocks, no forgotten exception types, no runtime surprises. Every failure mode is visible in the type signature and enforced by the compiler. This is a massive improvement for API reliability.

Domain Modeling: Payment Types

Here’s a real-world domain modeling example — handling different payment methods in an e-commerce system:

union PaymentMethod
{
 CreditCard(string CardNumber, string Expiry, string Cvv),
 BankTransfer(string Iban, string Bic),
 DigitalWallet(string Provider, string Token),
 CashOnDelivery
}

decimal CalculateProcessingFee(PaymentMethod method, decimal amount) => method switch
{
 CreditCard _ => amount * 0.029m + 0.30m,
 BankTransfer _ => 1.50m,
 DigitalWallet(provider: "PayPal", _) => amount * 0.034m + 0.35m,
 DigitalWallet _ => amount * 0.025m,
 CashOnDelivery => 4.99m
};

string FormatForReceipt(PaymentMethod method) => method switch
{
 CreditCard(var num, _, _) => $"Credit Card ending in {num[^4..]}",
 BankTransfer(var iban, _) => $"Bank Transfer ({iban[..4]}****)",
 DigitalWallet(var provider, _) => $"Digital Wallet ({provider})",
 CashOnDelivery => "Cash on Delivery"
};

Compare this to the current approach where you’d have an interface or abstract class with five different implementations spread across five files, possibly with a visitor pattern on top. The union approach keeps the data definition and the operations together, readable, and exhaustively checked.

State Machines

State machines are everywhere in software — order processing, workflow engines, connection management, UI state. Unions make them explicit and safe:

union ConnectionState
{
 Disconnected,
 Connecting(string Host, int Port, DateTime StartedAt),
 Connected(string Host, int Port, TcpClient Client),
 Reconnecting(string Host, int Port, int Attempt, TimeSpan Delay),
 Failed(string Host, Exception Error)
}

ConnectionState HandleEvent(ConnectionState state, ConnectionEvent evt) => (state, evt) switch
{
 (Disconnected, Connect(var host, var port)) =>
 new Connecting(host, port, DateTime.UtcNow),

 (Connecting(var h, var p, _), ConnectionSucceeded(var client)) =>
 new Connected(h, p, client),

 (Connecting(var h, var p, _), ConnectionFailed(var ex)) =>
 new Reconnecting(h, p, Attempt: 1, Delay: TimeSpan.FromSeconds(1)),

 (Reconnecting(var h, var p, var attempt, _), ConnectionSucceeded(var client)) =>
 new Connected(h, p, client),

 (Reconnecting(var h, var p, var attempt, _), ConnectionFailed(var ex)) when attempt >= 5 =>
 new Failed(h, ex),

 (Reconnecting(var h, var p, var attempt, _), ConnectionFailed(_)) =>
 new Reconnecting(h, p, attempt + 1, TimeSpan.FromSeconds(Math.Pow(2, attempt))),

 (Connected(_, _, var client), Disconnect) =>
 new Disconnected,

 _ => state // Ignore events that don't apply to current state
};

Each state carries exactly the data relevant to that state. You can’t accidentally access a TcpClient when you’re in the Connecting state because it doesn’t exist on that variant. The type system enforces the state machine’s invariants.

Serialization and Interop Considerations

One of the practical questions that comes up immediately with union types is: how do you serialize them? If you’re building APIs or storing data, you need JSON serialization to work correctly.

The design team has been discussing built-in System.Text.Json support for union types. The expected approach involves serializing with a discriminator property:

{
 "$type": "Circle",
 "radius": 5.0
}

{
 "$type": "Rectangle",
 "width": 10.0,
 "height": 20.0
}

This is consistent with the existing polymorphic serialization support introduced in .NET 7 with JsonDerivedType attributes. The expectation is that unions would work with System.Text.Json out of the box, using the variant name as the type discriminator by default.

For Entity Framework Core, the likely approach is storing union values using a discriminator column — similar to how table-per-hierarchy (TPH) inheritance mapping already works. The exact EF Core integration is still being designed, but the infrastructure for handling closed type hierarchies already exists.

It’s worth noting that interop with other .NET languages should be smooth, since unions will compile down to standard IL class hierarchies under the hood. F# code consuming a C# union would see it as a standard type hierarchy, and vice versa.

How to Try It

As of the time of writing, union types are available as a preview feature in the latest .NET SDK previews. To experiment with the proposed syntax, you’ll need to:

Install the latest .NET preview SDK
Enable the preview language version in your project file:

<Project Sdk="Microsoft.NET.Sdk">
 <PropertyGroup>
 <TargetFramework>net10.0</TargetFramework>
 <LangVersion>preview</LangVersion>
 </PropertyGroup>
</Project>

Keep in mind that preview features are subject to change. The syntax, behavior, and compiler diagnostics may evolve significantly before the final release. Don’t ship production code relying on preview language features — but absolutely do experiment with them and provide feedback. The C# team actively monitors the csharplang repository discussions.

If you want to follow the proposal’s progress, the key places to watch are:

The dotnet/csharplang repository for language design discussions
The dotnet/roslyn repository for compiler implementation progress
The .NET blog for official announcements

Comparison with Existing Approaches

Let me put together a quick comparison so you can see how the different approaches stack up:

Feature	Abstract Records	OneOf<T1,T2>	Enum + Data	Union Types
Exhaustiveness checking	❌ No	✅ Yes	❌ No	✅ Yes
Pattern matching	✅ Yes	❌ Limited	❌ Manual	✅ Native
Compiler-enforced closure	❌ No	✅ Yes	❌ No	✅ Yes
Data per variant	✅ Yes	✅ Yes	⚠️ Fragile	✅ Yes
Readability	⚠️ Verbose	⚠️ Positional	❌ Poor	✅ Excellent
Serialization	✅ Manual	⚠️ Complex	✅ Manual	✅ Built-in
Boilerplate	⚠️ Moderate	✅ Low	⚠️ High	✅ Minimal
No external dependency	✅ Yes	❌ NuGet	✅ Yes	✅ Yes

The union approach wins in nearly every category. It’s not that the other approaches are bad — they were the best we had. But a first-class language feature can integrate with the compiler, the pattern matching system, and the serialization infrastructure in ways that library solutions simply can’t.

What This Means for the .NET Ecosystem

The introduction of discriminated unions will ripple across the entire .NET ecosystem. Here’s what I expect to see:

Library design will improve. APIs that currently return null to indicate “not found” or throw exceptions for validation failures will be able to return Result<T, E> types instead. This makes failure modes explicit in the type signature — you can see what can go wrong by looking at the method signature, not by reading documentation or source code.

Domain modeling becomes more expressive. The gap between the problem domain and the code representation shrinks dramatically. When your domain expert says “a payment can be a credit card, a bank transfer, or cash on delivery,” you can model that directly as a union rather than translating it into an inheritance hierarchy.

F# ideas become accessible to C# developers. Many C# developers have admired F#’s type system from a distance but haven’t been able to adopt F# in their organizations. Union types bring one of F#’s most powerful features to C#, which is a win for the entire .NET ecosystem.

Fewer runtime errors. The exhaustiveness checking alone will prevent entire categories of bugs. Every time you add a new variant to a union, the compiler will guide you to every place in the codebase that needs updating. No more forgotten switch cases, no more NotImplementedException in default branches that only surface in production.

Conclusion

Discriminated unions have been at the top of the C# community’s wish list for nearly a decade, and for good reason. They solve a fundamental gap in the type system — the ability to model data that can be “one of several things” with compiler-enforced safety.

The proposed union keyword brings a clean, concise syntax that integrates deeply with C#’s pattern matching, works with generics, supports methods and interfaces, and enables exhaustive checking that catches bugs at compile time rather than runtime.

Whether you’re building domain models, designing APIs with explicit error types, implementing state machines, or just trying to replace awkward inheritance hierarchies with something more natural — union types are going to change how you write C#.

We’ve been waiting a long time for this. The syntax is elegant, the integration with existing language features is thoughtful, and the practical impact will be felt across the entire .NET ecosystem.

Keep an eye on the preview releases, experiment with the feature, and provide feedback to the language design team. This is one of those features that, once you’ve used it, you’ll wonder how you ever lived without it.

Een RAG-systeem bouwen in C# met Semantic Kernel

Wed, 18 Mar 2026 00:00:00 +0000

Introduction

If you’ve tried using an LLM to answer questions about your own data — company docs, product specs, internal knowledge bases — you’ve probably noticed that it either hallucinates or just says “I don’t have information about that.” That’s because the model only knows what it was trained on.

RAG (Retrieval-Augmented Generation) fixes this. Instead of fine-tuning a model on your data, you retrieve relevant chunks of your documents at query time and pass them to the LLM as context. The model then generates answers grounded in your actual data.

In this post, I’ll walk you through building a complete RAG pipeline in C# using Semantic Kernel.

How RAG works

The flow is straightforward:

Ingest: Split your documents into chunks, generate embeddings for each chunk, store them in a vector database
Query: When a user asks a question, generate an embedding for the query, search the vector database for similar chunks
Generate: Pass the retrieved chunks as context to the LLM along with the user’s question

That’s it. The magic is in the embeddings — they capture the semantic meaning of text as vectors, so you can find relevant content even when the exact words don’t match.

Prerequisites

dotnet add package Microsoft.SemanticKernel
dotnet add package Microsoft.SemanticKernel.Connectors.AzureOpenAI
dotnet add package Microsoft.Extensions.VectorData.Abstractions
dotnet add package Microsoft.SemanticKernel.Connectors.InMemory

For production, you’d swap the in-memory store for Azure AI Search, Qdrant, Pinecone, or any other supported vector database. But in-memory is perfect for learning and prototyping.

Setting up the kernel

using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.Connectors.AzureOpenAI;
using Microsoft.Extensions.VectorData;
using Microsoft.SemanticKernel.Connectors.InMemory;
using Microsoft.SemanticKernel.Embeddings;

var builder = Kernel.CreateBuilder();

builder.AddAzureOpenAIChatCompletion(
 deploymentName: "gpt-4o",
 endpoint: config["AzureOpenAI:Endpoint"],
 apiKey: config["AzureOpenAI:ApiKey"]);

builder.AddAzureOpenAITextEmbeddingGeneration(
 deploymentName: "text-embedding-3-small",
 endpoint: config["AzureOpenAI:Endpoint"],
 apiKey: config["AzureOpenAI:ApiKey"]);

var kernel = builder.Build();

We need two models: one for chat completion (answering questions) and one for generating embeddings (turning text into vectors).

Defining the data model

We need a class to represent our document chunks in the vector store:

using Microsoft.Extensions.VectorData;

public class DocumentChunk
{
 [VectorStoreRecordKey]
 public string Id { get; set; } = Guid.NewGuid().ToString();

 [VectorStoreRecordData]
 public string Content { get; set; } = string.Empty;

 [VectorStoreRecordData]
 public string Source { get; set; } = string.Empty;

 [VectorStoreRecordData]
 public int ChunkIndex { get; set; }

 [VectorStoreRecordVector(1536)]
 public ReadOnlyMemory<float> Embedding { get; set; }
}

The VectorStoreRecordVector(1536) attribute tells the vector store the dimension of our embeddings. The text-embedding-3-small model produces 1536-dimensional vectors.

Chunking documents

Before we can create embeddings, we need to split our documents into manageable chunks. Here’s a simple text splitter:

public static class TextChunker
{
 public static List<string> SplitText(string text, int maxChunkSize = 500, int overlap = 50)
 {
 var chunks = new List<string>();
 var paragraphs = text.Split("\n\n", StringSplitOptions.RemoveEmptyEntries);
 var currentChunk = new System.Text.StringBuilder();

 foreach (var paragraph in paragraphs)
 {
 if (currentChunk.Length + paragraph.Length > maxChunkSize && currentChunk.Length > 0)
 {
 chunks.Add(currentChunk.ToString().Trim());

 // Keep overlap from the end of the previous chunk
 var overlapText = currentChunk.ToString();
 currentChunk.Clear();
 if (overlapText.Length > overlap)
 {
 currentChunk.Append(overlapText[^overlap..]);
 currentChunk.Append(' ');
 }
 }

 currentChunk.Append(paragraph);
 currentChunk.Append("\n\n");
 }

 if (currentChunk.Length > 0)
 {
 chunks.Add(currentChunk.ToString().Trim());
 }

 return chunks;
 }
}

The overlap is important — it ensures that context at the boundary between chunks isn’t lost. If a relevant sentence gets split across two chunks, the overlap means it’ll appear fully in at least one of them.

Ingesting documents

Now let’s put it all together to ingest documents into our vector store:

var vectorStore = new InMemoryVectorStore();
var collection = vectorStore.GetCollection<string, DocumentChunk>("documents");
await collection.CreateCollectionIfNotExistsAsync();

var embeddingService = kernel.GetRequiredService<ITextEmbeddingGenerationService>();

async Task IngestDocument(string content, string source)
{
 var chunks = TextChunker.SplitText(content);

 for (int i = 0; i < chunks.Count; i++)
 {
 var embedding = await embeddingService.GenerateEmbeddingAsync(chunks[i]);

 var chunk = new DocumentChunk
 {
 Content = chunks[i],
 Source = source,
 ChunkIndex = i,
 Embedding = embedding
 };

 await collection.UpsertAsync(chunk);
 }

 Console.WriteLine($"✅ Ingested {chunks.Count} chunks from {source}");
}

// Ingest some documents
var doc1 = await File.ReadAllTextAsync("docs/product-guide.md");
var doc2 = await File.ReadAllTextAsync("docs/faq.md");
var doc3 = await File.ReadAllTextAsync("docs/troubleshooting.md");

await IngestDocument(doc1, "product-guide.md");
await IngestDocument(doc2, "faq.md");
await IngestDocument(doc3, "troubleshooting.md");

Searching for relevant chunks

When a user asks a question, we generate an embedding for their query and search for similar chunks:

async Task<List<DocumentChunk>> SearchAsync(string query, int topK = 3)
{
 var queryEmbedding = await embeddingService.GenerateEmbeddingAsync(query);

 var searchResults = await collection.VectorizedSearchAsync(
 queryEmbedding,
 new VectorSearchOptions { Top = topK });

 var results = new List<DocumentChunk>();
 await foreach (var result in searchResults.Results)
 {
 results.Add(result.Record);
 }

 return results;
}

Generating answers with context

Now the RAG part — we take the retrieved chunks and include them as context in our prompt:

using Microsoft.SemanticKernel.ChatCompletion;

var chatService = kernel.GetRequiredService<IChatCompletionService>();

async Task<string> AskAsync(string question)
{
 // Step 1: Retrieve relevant chunks
 var relevantChunks = await SearchAsync(question);

 // Step 2: Build context from chunks
 var context = string.Join("\n\n---\n\n",
 relevantChunks.Select(c => $"[Source: {c.Source}]\n{c.Content}"));

 // Step 3: Generate answer with context
 var history = new ChatHistory();
 history.AddSystemMessage($$"""
 You are a helpful assistant that answers questions based on the provided context.
 Use ONLY the information from the context to answer. If the context doesn't contain
 enough information to answer the question, say "I don't have enough information
 to answer that question."

 Do not make up information. Always cite the source document when possible.

 Context:
 {{context}}
 """);

 history.AddUserMessage(question);

 var response = await chatService.GetChatMessageContentAsync(history);
 return response.Content ?? "No response generated.";
}

Using it

// Ask questions about your documents
var answer1 = await AskAsync("How do I reset my password?");
Console.WriteLine($"Q: How do I reset my password?\nA: {answer1}\n");

var answer2 = await AskAsync("What are the system requirements?");
Console.WriteLine($"Q: What are the system requirements?\nA: {answer2}\n");

var answer3 = await AskAsync("What's the capital of France?");
Console.WriteLine($"Q: What's the capital of France?\nA: {answer3}\n");
// Should respond with "I don't have enough information" since it's not in the docs

Moving to production

The in-memory vector store is great for prototyping, but for production you’ll want a persistent vector database. Semantic Kernel has connectors for several options:

# Azure AI Search
dotnet add package Microsoft.SemanticKernel.Connectors.AzureAISearch

# Qdrant
dotnet add package Microsoft.SemanticKernel.Connectors.Qdrant

# Redis
dotnet add package Microsoft.SemanticKernel.Connectors.Redis

Swapping is straightforward since they all implement the same IVectorStore interface:

// Instead of InMemoryVectorStore, use:
using Azure;
using Microsoft.SemanticKernel.Connectors.AzureAISearch;

var vectorStore = new AzureAISearchVectorStore(
 new Azure.Search.Documents.Indexes.SearchIndexClient(
 new Uri(config["AzureAISearch:Endpoint"]),
 new AzureKeyCredential(config["AzureAISearch:ApiKey"])));

Everything else stays the same. That’s the beauty of the abstraction.

Tips from building RAG systems

A few things I’ve learned the hard way:

Chunk size matters a lot. Too small and you lose context. Too large and you waste tokens on irrelevant content. Start with 500-800 tokens and adjust based on your data.
Overlap prevents boundary issues. A 50-100 token overlap between chunks is usually enough.
Retrieve more than you think. Start with topK = 5 and reduce if you’re getting too much noise. It’s better to have extra context than to miss the relevant chunk.
System prompts are crucial. Be very explicit about using only the provided context. Without that instruction, the model will happily hallucinate “based on its training data.”
Track sources. Always store metadata with your chunks so you can cite where the answer came from. Users trust answers more when they can verify the source.
Re-rank if needed. Vector similarity isn’t perfect. For critical applications, add a re-ranking step using a cross-encoder model to improve precision.

Conclusion

RAG is one of the most practical patterns in AI right now. It lets you build AI-powered Q&A systems over your own data without fine-tuning, and Semantic Kernel makes it surprisingly clean in C#. Start with the in-memory store, get your chunking and prompts right, then swap in a real vector database when you’re ready for production.

Happy coding!

Resources

Agent-workflows bouwen met Microsoft Agent Framework

Tue, 10 Feb 2026 00:00:00 +0000

Introduction

If you’ve read my previous posts on Microsoft’s Agent Framework, you know how to create individual agents and even multi-agent group chats. But in real-world scenarios, you often need something more structured — a workflow where agents execute in a specific order, pass results to each other, and handle branching logic based on outcomes.

That’s exactly what the workflow capabilities in Agent Framework give you. Instead of throwing agents into a group chat and hoping they figure it out, you define explicit steps, dependencies, and data flow between agents.

What are agent workflows?

Think of agent workflows like a pipeline. Each step is handled by a specialized agent, and the output of one step feeds into the next. You can run steps sequentially, in parallel, or conditionally based on results.

Some examples:

Content pipeline: Research → Draft → Review → Publish
Data processing: Extract → Transform → Validate → Load
Customer support: Classify → Route → Respond → Follow-up

Prerequisites

Make sure you have the latest Agent Framework packages:

dotnet add package Microsoft.SemanticKernel
dotnet add package Microsoft.SemanticKernel.Agents.Core

And an Azure OpenAI or OpenAI endpoint configured.

Building a sequential workflow

Let’s build a content creation workflow with three agents: a researcher, a writer, and an editor.

Defining the agents

using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.Agents;

var kernel = Kernel.CreateBuilder()
 .AddAzureOpenAIChatCompletion(
 deploymentName: "gpt-4o",
 endpoint: config["AzureOpenAI:Endpoint"],
 apiKey: config["AzureOpenAI:ApiKey"])
 .Build();

var researcher = new ChatCompletionAgent
{
 Name = "Researcher",
 Instructions = """
 You are a research specialist. Given a topic, find key facts, statistics,
 and talking points. Return a structured research brief with bullet points.
 Be thorough but concise.
 """,
 Kernel = kernel
};

var writer = new ChatCompletionAgent
{
 Name = "Writer",
 Instructions = """
 You are a technical blog writer. Given a research brief, write a clear
 and engaging blog post. Use a conversational tone, include code examples
 where relevant, and structure the post with clear headings.
 """,
 Kernel = kernel
};

var editor = new ChatCompletionAgent
{
 Name = "Editor",
 Instructions = """
 You are a senior editor. Review the blog post for clarity, accuracy,
 grammar, and flow. Return the corrected version with a summary of
 changes made at the end.
 """,
 Kernel = kernel
};

Executing sequentially

The simplest workflow is sequential — each agent processes the output of the previous one:

using Microsoft.SemanticKernel.Agents.Chat;
using Microsoft.SemanticKernel.ChatCompletion;

async Task<string> RunSequentialWorkflow(string topic)
{
 var history = new ChatHistory();
 string currentInput = $"Research the following topic: {topic}";

 var agents = new[] { researcher, writer, editor };

 foreach (var agent in agents)
 {
 history.AddUserMessage(currentInput);

 var response = new System.Text.StringBuilder();
 await foreach (var message in agent.InvokeAsync(history))
 {
 response.Append(message.Content);
 }

 currentInput = response.ToString();
 Console.WriteLine($"✅ {agent.Name} completed");
 }

 return currentInput;
}

var result = await RunSequentialWorkflow("Blazor render modes in .NET 9");
Console.WriteLine(result);

Each agent gets the accumulated context, processes it, and the result moves to the next step.

Parallel execution

Sometimes agents can work independently. For instance, you might want to research multiple sub-topics at the same time:

async Task<List<string>> RunParallelResearch(string[] topics)
{
 var tasks = topics.Select(async topic =>
 {
 var history = new ChatHistory();
 history.AddUserMessage($"Research: {topic}");

 var response = new System.Text.StringBuilder();
 await foreach (var message in researcher.InvokeAsync(history))
 {
 response.Append(message.Content);
 }

 Console.WriteLine($"✅ Research completed: {topic}");
 return response.ToString();
 });

 var results = await Task.WhenAll(tasks);
 return results.ToList();
}

var topics = new[]
{
 "Blazor SSR streaming",
 "Enhanced navigation in .NET 9",
 "Render mode boundaries"
};

var briefs = await RunParallelResearch(topics);

Then you can feed all the research briefs into a single writer agent to produce one cohesive post.

Conditional branching

Real workflows need decisions. Maybe you want a quality check step that routes back to the writer if the post isn’t good enough:

var qualityChecker = new ChatCompletionAgent
{
 Name = "QualityChecker",
 Instructions = """
 You are a quality assurance reviewer. Evaluate the blog post on:
 1. Technical accuracy
 2. Clarity and readability
 3. Completeness

 Respond with either:
 - "APPROVED" if the post meets all criteria
 - "REVISION NEEDED: [specific feedback]" if changes are required

 Be strict. Only approve posts that are truly ready to publish.
 """,
 Kernel = kernel
};

async Task<string> RunWithQualityLoop(string topic, int maxRevisions = 3)
{
 var history = new ChatHistory();

 // Step 1: Research
 history.AddUserMessage($"Research: {topic}");
 string research = await InvokeAgent(researcher, history);

 // Step 2: Write
 history.AddUserMessage(research);
 string draft = await InvokeAgent(writer, history);

 // Step 3: Quality loop
 for (int i = 0; i < maxRevisions; i++)
 {
 var qaHistory = new ChatHistory();
 qaHistory.AddUserMessage($"Review this post:\n\n{draft}");
 string qaResult = await InvokeAgent(qualityChecker, qaHistory);

 if (qaResult.Contains("APPROVED", StringComparison.OrdinalIgnoreCase))
 {
 Console.WriteLine($"✅ Approved after {i + 1} review(s)");
 return draft;
 }

 Console.WriteLine($"🔄 Revision {i + 1}: {qaResult[..Math.Min(100, qaResult.Length)]}...");

 // Send back to writer with feedback
 history.AddUserMessage($"Please revise based on this feedback:\n{qaResult}");
 draft = await InvokeAgent(writer, history);
 }

 Console.WriteLine("⚠️ Max revisions reached, returning latest draft");
 return draft;
}

async Task<string> InvokeAgent(ChatCompletionAgent agent, ChatHistory history)
{
 var response = new System.Text.StringBuilder();
 await foreach (var message in agent.InvokeAsync(history))
 {
 response.Append(message.Content);
 }
 return response.ToString();
}

This pattern is super useful. The quality checker acts as a gate, and the workflow loops until the output is good enough or hits the max revision limit.

Adding plugins to workflow agents

Agents in workflows can use plugins just like standalone agents. This is where things get really powerful — agents can call APIs, query databases, or do file operations as part of their workflow step:

var researcherWithTools = new ChatCompletionAgent
{
 Name = "Researcher",
 Instructions = "Research the topic using available tools. Summarize findings.",
 Kernel = kernel
};

// Add a web search plugin
kernel.Plugins.AddFromType<WebSearchPlugin>();

// Add a database plugin
kernel.Plugins.AddFromObject(new DatabasePlugin(connectionString), "Database");

public class WebSearchPlugin
{
 [KernelFunction, Description("Search the web for information")]
 public async Task<string> SearchAsync(
 [Description("The search query")] string query)
 {
 // Your search implementation
 using var httpClient = new HttpClient();
 var response = await httpClient.GetStringAsync(
 $"https://api.search.example.com?q={Uri.EscapeDataString(query)}");
 return response;
 }
}

Error handling in workflows

When you’re chaining multiple agents, error handling becomes critical. You don’t want one failed step to crash the entire workflow silently:

async Task<WorkflowResult> RunResilientWorkflow(string input)
{
 var result = new WorkflowResult();

 try
 {
 result.Research = await InvokeAgent(researcher, new ChatHistory(input));
 }
 catch (Exception ex)
 {
 result.Errors.Add($"Research failed: {ex.Message}");
 return result;
 }

 try
 {
 var writeHistory = new ChatHistory(result.Research);
 result.Draft = await InvokeAgent(writer, writeHistory);
 }
 catch (Exception ex)
 {
 result.Errors.Add($"Writing failed: {ex.Message}");
 result.Draft = result.Research; // Fallback to research output
 }

 result.Success = result.Errors.Count == 0;
 return result;
}

class WorkflowResult
{
 public string Research { get; set; } = "";
 public string Draft { get; set; } = "";
 public List<string> Errors { get; set; } = new();
 public bool Success { get; set; }
}

Best practices

After building several agent workflows, here’s what I’ve learned:

Keep agent instructions focused — each agent should do one thing well. Don’t try to make a Swiss Army knife agent.
Limit context — don’t pass the entire conversation history to every agent. Give each step only what it needs.
Set revision limits — quality loops are great but can run forever if you’re not careful. Always have a max iterations cap.
Log everything — agent outputs can be unpredictable. Log every step’s input and output for debugging.
Use parallel execution wisely — it speeds things up but watch your API rate limits and token costs.
Test with smaller models first — develop and test your workflow logic with GPT-3.5 before switching to GPT-4o for production.

Conclusion

Agent workflows let you build complex, multi-step AI pipelines where each agent is a specialist. Start with sequential workflows, add parallel execution where steps are independent, and use conditional branching for quality gates. The patterns are composable — once you get the hang of it, you can build some pretty sophisticated automation.

Happy coding!

Resources

Blazor-componentlevenscyclus: de complete gids

Thu, 15 Jan 2026 00:00:00 +0000

I’ve been using Blazor for a while now and honestly, the lifecycle methods confused me at first. OnInitialized vs OnInitializedAsync? OnParametersSet vs OnAfterRender? When does StateHasChanged actually trigger a re-render? After a lot of trial and error, I finally have a solid mental model for all of it.

The lifecycle at a glance

When a Blazor component renders, it goes through these methods in order:

SetParametersAsync
OnInitialized / OnInitializedAsync
OnParametersSet / OnParametersSetAsync
OnAfterRender / OnAfterRenderAsync
Dispose / DisposeAsync

Let’s walk through each one.

SetParametersAsync

This is the very first method called. It receives the raw ParameterView from the parent component. Most of the time you don’t override this — Blazor handles mapping parameters automatically. But if you need custom parameter handling or validation before they’re assigned:

public override async Task SetParametersAsync(ParameterView parameters)
{
 // Custom logic before parameters are set
 if (parameters.TryGetValue<string>("Title", out var title))
 {
 Console.WriteLine($"Title is being set to: {title}");
 }

 await base.SetParametersAsync(parameters);
}

I’ve used this exactly once in a real project. Most of the time you’ll skip it.

OnInitialized / OnInitializedAsync

This is where you do your setup work — load data, initialize services, set default values. It runs once when the component is first created.

@code {
 private List<Product> products = new();

 protected override async Task OnInitializedAsync()
 {
 products = await Http.GetFromJsonAsync<List<Product>>("api/products");
 }
}

One thing that tripped me up: in Blazor Server, OnInitializedAsync gets called twice during prerendering. The first time during server-side prerender, and the second time when the SignalR connection is established. If your API call is expensive, you might want to handle that:

private bool isPrerendering = true;

protected override async Task OnInitializedAsync()
{
 products = await Http.GetFromJsonAsync<List<Product>>("api/products");
 isPrerendering = false;
}

Or even better, use PersistentComponentState to avoid the double call entirely.

OnParametersSet / OnParametersSetAsync

This fires every time the parent component re-renders and passes new parameter values. It also fires after OnInitialized. This is the right place to react to parameter changes:

[Parameter]
public int CategoryId { get; set; }

private int previousCategoryId;
private List<Product> products = new();

protected override async Task OnParametersSetAsync()
{
 if (CategoryId != previousCategoryId)
 {
 previousCategoryId = CategoryId;
 products = await Http.GetFromJsonAsync<List<Product>>(
 $"api/products?category={CategoryId}");
 }
}

The check for CategoryId != previousCategoryId is important — without it, you’d reload data every time the parent re-renders, even if the category didn’t change.

OnAfterRender / OnAfterRenderAsync

This fires after the component has rendered to the DOM. The firstRender parameter tells you if it’s the initial render. This is the place for JS Interop calls since the DOM elements exist at this point:

[Inject]
private IJSRuntime JS { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
 if (firstRender)
 {
 await JS.InvokeVoidAsync("initializeChart", chartElement);
 }
}

I use firstRender a lot to avoid re-initializing JavaScript libraries on every re-render. If you’re setting up event listeners, chart libraries, or anything that touches the DOM directly, this is where it goes.

ShouldRender

This one is less known but super useful. It controls whether a component re-renders when StateHasChanged is called:

private bool shouldRender = true;

protected override bool ShouldRender() => shouldRender;

private void HeavyOperation()
{
 shouldRender = false;

 // Do a bunch of state changes without triggering renders
 for (int i = 0; i < 1000; i++)
 {
 items[i].Process();
 }

 shouldRender = true;
 StateHasChanged(); // Now render once with all changes
}

I’ve used this to optimize components that process large lists. Instead of re-rendering on every item change, you batch the updates and render once at the end.

Dispose / DisposeAsync

When a component is removed from the UI, you should clean up any resources. Implement IDisposable or IAsyncDisposable:

@implements IAsyncDisposable

@code {
 private Timer? timer;
 private IJSObjectReference? jsModule;

 protected override void OnInitialized()
 {
 timer = new Timer(OnTick, null, 0, 1000);
 }

 protected override async Task OnAfterRenderAsync(bool firstRender)
 {
 if (firstRender)
 {
 jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "./timer.js");
 }
 }

 public async ValueTask DisposeAsync()
 {
 timer?.Dispose();

 if (jsModule is not null)
 {
 await jsModule.DisposeAsync();
 }
 }
}

Common things to dispose: timers, event subscriptions, JS module references, CancellationTokenSource, and any IDisposable services you created.

StateHasChanged

This isn’t a lifecycle method, but it’s closely related. It tells Blazor “hey, my state changed, please re-render me.” Blazor calls it automatically after event handlers, but sometimes you need to call it manually — typically when state changes from outside the normal Blazor event flow:

private async Task StartPolling()
{
 while (!cts.Token.IsCancellationRequested)
 {
 data = await Http.GetFromJsonAsync<Data>("api/data");
 StateHasChanged(); // Manual call needed since this isn't a Blazor event
 await Task.Delay(5000, cts.Token);
 }
}

One important note: if you’re updating from a background thread in Blazor Server, use InvokeAsync:

await InvokeAsync(() =>
{
 data = newData;
 StateHasChanged();
});

The full picture

Here’s the order everything happens in:

Component created
 └─ SetParametersAsync
 └─ OnInitialized / OnInitializedAsync
 └─ OnParametersSet / OnParametersSetAsync
 └─ Render
 └─ OnAfterRender(firstRender: true)

Parameter change from parent
 └─ SetParametersAsync
 └─ OnParametersSet / OnParametersSetAsync
 └─ ShouldRender?
 └─ Render
 └─ OnAfterRender(firstRender: false)

Component removed
 └─ Dispose / DisposeAsync

Once you have this flow in your head, debugging lifecycle issues becomes a lot easier.

Hope you liked the post! Feel free to contact me on any social media at @emimontesdeoca.

Resources

Microsoft's Agent Framework redt Kerstmis

Tue, 16 Dec 2025 00:00:00 +0000

Introduction

Finding the perfect Christmas presents can be stressful. Between brainstorming gift ideas, comparing prices across stores, and making sure everything arrives on time, holiday shopping quickly becomes overwhelming. What if we could delegate these tasks to specialized AI agents that work together? In this post, we’ll explore how to use Microsoft’s Agent Framework to build a multi-agent system where each agent specializes in a specific task, from generating gift ideas to comparing prices, all coordinated through workflows.

Festive Tech Calendar 2025

This project is part of my session at the Festive Tech Calendar 2025, an amazing community event celebrating technology during the holiday season. You can find more about the event on Sessionize.

What is Microsoft’s Agent Framework?

The Agent Framework is Microsoft’s solution for building, orchestrating, and deploying AI agents and multi-agent systems. It provides a flexible foundation for creating agents that can work sequentially, concurrently, or through handoff patterns. The framework supports OpenAI, Azure OpenAI, and Microsoft Foundry models, making it incredibly versatile.

Key features include:

Multi-Agent Orchestration: Group chat, sequential, concurrent, and handoff patterns
Plugin Ecosystem: Extend with native functions, OpenAPI, and Model Context Protocol (MCP)
Workflow Support: Build complex agent pipelines with executors and edges

Prerequisites

Before diving into the code, make sure you have:

.NET 9
Azure OpenAI access (or OpenAI API key)
Visual Studio or Visual Studio Code

Install the required packages (note the --prerelease flag is required while in preview):

dotnet add package Microsoft.Agents.AI.OpenAI --prerelease
dotnet add package Microsoft.Agents.AI.Workflows --prerelease
dotnet add package Azure.AI.OpenAI
dotnet add package Azure.Identity
dotnet add package Azure.AI.Agents.Persistent --prerelease

The Gift Shopping Agents

Our Christmas present finder will consist of three specialized agents working together:

Gift Idea Agent - Generates creative gift suggestions based on the recipient’s profile
Price Comparison Agent - Finds the best prices across different stores
Summary Agent - Compiles the final recommendations

The Models

Let’s start by defining our data models that will flow through the agent pipeline:

public class GiftRecipient
{
 public string Name { get; set; } = string.Empty;
 public int Age { get; set; }
 public List<string> Interests { get; set; } = [];
 public decimal Budget { get; set; }
}

public class GiftIdea
{
 public string Name { get; set; } = string.Empty;
 public string Description { get; set; } = string.Empty;
 public string Category { get; set; } = string.Empty;
 public decimal EstimatedPrice { get; set; }
}

public class PriceResult
{
 public string GiftName { get; set; } = string.Empty;
 public string Store { get; set; } = string.Empty;
 public decimal Price { get; set; }
 public string Url { get; set; } = string.Empty;
}

public class GiftRecommendation
{
 public GiftIdea Gift { get; set; } = new();
 public List<PriceResult> Prices { get; set; } = [];
 public PriceResult? BestDeal { get; set; }
}

Building the Agents

The beauty of the Agent Framework is how easy it is to create specialized agents. Each agent is simply a ChatClientAgent with a specific system prompt that defines its expertise.

using Azure.AI.OpenAI;
using Azure.Identity;
using Microsoft.Agents.AI;
using Microsoft.Agents.AI.Workflows;
using Microsoft.Extensions.AI;

public static class ChristmasAgentFactory
{
 public static AIAgent CreateGiftIdeaAgent(IChatClient chatClient)
 {
 return new ChatClientAgent(
 chatClient,
 @"You are a creative Christmas gift advisor. When given information about a person
 (age, interests, budget), you suggest thoughtful and personalized gift ideas.

 For each suggestion, provide:
 - Gift name
 - Brief description of why it's a good fit
 - Category (Electronics, Books, Fashion, Home, Experience, etc.)
 - Estimated price range

 Always suggest 3-5 gift options within the specified budget.
 Format your response as a structured list.");
 }

 public static AIAgent CreatePriceComparisonAgent(IChatClient chatClient)
 {
 return new ChatClientAgent(
 chatClient,
 @"You are a price comparison specialist. Given a list of gift ideas,
 you research and compare prices from different online retailers.

 For each gift, provide:
 - Store name (Amazon, Best Buy, Target, Walmart, etc.)
 - Current price
 - Any available discounts or deals

 Always highlight the best deal for each item.
 Consider shipping costs and delivery times for Christmas.");
 }

 public static AIAgent CreateSummaryAgent(IChatClient chatClient)
 {
 return new ChatClientAgent(
 chatClient,
 @"You are a gift recommendation summarizer. Take the gift ideas and price
 comparisons and create a final recommendation report.

 Your summary should:
 - Rank gifts by value (quality vs price)
 - Highlight the top pick with reasoning
 - Include total cost estimate
 - Add any tips for holiday shopping

 Make the summary cheerful and festive!");
 }
}

Creating the Workflow

Now comes the fun part, connecting our agents into a sequential workflow. The Agent Framework provides WorkflowBuilder and AgentWorkflowBuilder to compose agents into different patterns.

public static class ChristmasGiftWorkflow
{
 public static async Task RunAsync()
 {
 // Set up the Azure OpenAI client
 var endpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT")
 ?? throw new InvalidOperationException("AZURE_OPENAI_ENDPOINT is not set.");
 var deploymentName = Environment.GetEnvironmentVariable("AZURE_OPENAI_DEPLOYMENT_NAME")
 ?? "gpt-4o-mini";

 var chatClient = new AzureOpenAIClient(
 new Uri(endpoint),
 new DefaultAzureCredential())
 .GetChatClient(deploymentName)
 .AsIChatClient();

 // Create our specialized agents
 AIAgent giftIdeaAgent = ChristmasAgentFactory.CreateGiftIdeaAgent(chatClient);
 AIAgent priceAgent = ChristmasAgentFactory.CreatePriceComparisonAgent(chatClient);
 AIAgent summaryAgent = ChristmasAgentFactory.CreateSummaryAgent(chatClient);

 // Build a sequential workflow: Ideas -> Prices -> Summary
 var workflow = AgentWorkflowBuilder.BuildSequential(
 "ChristmasGiftFinder",
 [giftIdeaAgent, priceAgent, summaryAgent]);

 // Define our gift recipient
 var recipient = new GiftRecipient
 {
 Name = "Mom",
 Age = 55,
 Interests = ["gardening", "cooking", "reading", "yoga"],
 Budget = 100
 };

 var prompt = $@"Find Christmas gifts for {recipient.Name},
 age {recipient.Age}, who enjoys {string.Join(", ", recipient.Interests)}.
 Budget: ${recipient.Budget}";

 // Execute the workflow with streaming
 await using StreamingRun run = await InProcessExecution.StreamAsync(
 workflow,
 new ChatMessage(ChatRole.User, prompt));

 // Send the turn token to start processing
 await run.TrySendMessageAsync(new TurnToken(emitEvents: true));

 // Watch for workflow events
 await foreach (WorkflowEvent evt in run.WatchStreamAsync())
 {
 if (evt is AgentRunUpdateEvent agentUpdate)
 {
 Console.Write(agentUpdate.Data);
 }
 else if (evt is WorkflowOutputEvent outputEvent)
 {
 Console.WriteLine("\n🎄 Final Recommendations:");
 Console.WriteLine(outputEvent.Data);
 }
 }
 }
}

Running Agents Concurrently

What if we want to search for gifts for multiple people at once? The Agent Framework supports concurrent execution, which is perfect for this scenario:

public static async Task FindGiftsForEveryoneAsync(IChatClient chatClient, List<GiftRecipient> recipients)
{
 // Create an agent for each recipient
 var agents = recipients.Select(r => new ChatClientAgent(
 chatClient,
 $@"Find the perfect Christmas gift for {r.Name} (age {r.Age}),
 who loves {string.Join(", ", r.Interests)}. Budget: ${r.Budget}.
 Provide one well-researched recommendation with price."
 )).ToList();

 // Build a concurrent workflow - all agents run in parallel
 var workflow = AgentWorkflowBuilder.BuildConcurrent(
 "FamilyGiftFinder",
 agents);

 await using StreamingRun run = await InProcessExecution.StreamAsync(
 workflow,
 new ChatMessage(ChatRole.User, "Find gifts now!"));

 await run.TrySendMessageAsync(new TurnToken(emitEvents: true));

 await foreach (WorkflowEvent evt in run.WatchStreamAsync())
 {
 if (evt is WorkflowOutputEvent output)
 {
 Console.WriteLine("🎁 All gift recommendations ready!");
 Console.WriteLine(output.Data);
 }
 }
}

Custom Executors for More Control

For more complex scenarios, you can create custom executors that give you fine-grained control over the workflow:

public sealed class GiftValidatorExecutor : Executor<List<ChatMessage>, List<ChatMessage>>
{
 public GiftValidatorExecutor() : base("GiftValidator") { }

 public override async ValueTask<List<ChatMessage>> HandleAsync(
 List<ChatMessage> messages,
 IWorkflowContext context,
 CancellationToken cancellationToken = default)
 {
 var lastMessage = messages.LastOrDefault()?.Text ?? "";

 // Validate that suggestions are within budget
 if (lastMessage.Contains("over budget", StringComparison.OrdinalIgnoreCase))
 {
 Console.WriteLine("⚠️ Some suggestions exceeded budget, filtering...");
 // Add validation logic here
 }

 Console.WriteLine("✅ Gift suggestions validated!");
 return messages;
 }
}

You can then insert this executor into your workflow:

var validator = new GiftValidatorExecutor();

var workflow = new WorkflowBuilder(giftIdeaAgent)
 .AddEdge(giftIdeaAgent, validator)
 .AddEdge(validator, priceAgent)
 .AddEdge(priceAgent, summaryAgent)
 .WithOutputFrom(summaryAgent)
 .Build();

Adding Real Web Search with Bing Grounding

So far, our agents generate responses based on the AI model’s knowledge. But what if we want to search the web for actual product prices and availability? This is where Grounding with Bing Search comes in. It’s a tool available in Microsoft Foundry (formerly Azure AI Foundry) that allows your agents to incorporate real-time public web data when generating responses.

First, you’ll need to create a Grounding with Bing Search resource in the Azure Portal. Make sure to create it in the same resource group as your AI project.

Setting Up Grounding with Bing Search

The beauty of Grounding with Bing Search is that it integrates directly with Azure AI Agents. The agent decides when to use the search tool based on the user’s query, searches the web, and uses the results to generate a grounded response.

using Azure.AI.Agents.Persistent;
using Azure.Identity;

public static class BingGroundingSetup
{
 public static async Task<PersistentAgent> CreateAgentWithBingGroundingAsync(
 string projectEndpoint,
 string modelDeploymentName,
 string bingConnectionId)
 {
 // Create the Persistent Agents client
 var agentClient = new PersistentAgentsClient(projectEndpoint, new DefaultAzureCredential());

 // Configure the Bing Grounding tool
 var bingGroundingTool = new BingGroundingToolDefinition(
 new BingGroundingSearchToolParameters(
 [new BingGroundingSearchConfiguration(bingConnectionId)]
 )
 );

 // Create the agent with Bing Grounding enabled
 var agent = await agentClient.Administration.CreateAgentAsync(
 model: modelDeploymentName,
 name: "ChristmasPriceHunter",
 instructions: @"You are a Christmas gift price comparison specialist.

 When given gift ideas, use Bing to search for:
 - Current prices at major retailers (Amazon, Best Buy, Target, Walmart)
 - Available discounts and holiday deals
 - Shipping times to ensure delivery before Christmas

 Always provide URLs to the products you find.
 Highlight the best deals and recommend where to buy.",
 tools: [bingGroundingTool]
 );

 return agent;
 }
}

Creating a Price Comparison Agent with Real Search

Now let’s create a complete price comparison agent that searches the web for real product information:

using Azure.AI.Agents.Persistent;
using Azure.Identity;

public class ChristmasPriceAgent
{
 private readonly PersistentAgentsClient _client;
 private readonly string _modelDeployment;
 private readonly string _bingConnectionId;

 public ChristmasPriceAgent(string projectEndpoint, string modelDeployment, string bingConnectionId)
 {
 _client = new PersistentAgentsClient(projectEndpoint, new DefaultAzureCredential());
 _modelDeployment = modelDeployment;
 _bingConnectionId = bingConnectionId;
 }

 public async Task<string> FindGiftPricesAsync(string giftIdeas)
 {
 // Create agent with Bing Grounding
 var bingTool = new BingGroundingToolDefinition(
 new BingGroundingSearchToolParameters(
 [new BingGroundingSearchConfiguration(_bingConnectionId)]
 )
 );

 var agent = await _client.Administration.CreateAgentAsync(
 model: _modelDeployment,
 name: "PriceHunter",
 instructions: @"Search the web for current prices on the given gift ideas.
 For each gift, find prices from at least 2-3 different stores.
 Include direct links to the products.
 Note any Christmas sales or discounts available.",
 tools: [bingTool]
 );

 try
 {
 // Create a thread for the conversation
 var thread = await _client.Threads.CreateThreadAsync();

 // Add the gift ideas as a message
 await _client.Messages.CreateMessageAsync(
 thread.Id,
 MessageRole.User,
 $"Find current prices for these gift ideas: {giftIdeas}"
 );

 // Run the agent
 var run = await _client.Runs.CreateRunAsync(thread.Id, agent.Id);

 // Wait for completion
 do
 {
 await Task.Delay(500);
 run = await _client.Runs.GetRunAsync(thread.Id, run.Id);
 }
 while (run.Status == RunStatus.Queued || run.Status == RunStatus.InProgress);

 // Get the response
 var messages = _client.Messages.GetMessages(thread.Id);
 var response = messages
 .Where(m => m.Role == MessageRole.Agent)
 .SelectMany(m => m.ContentItems)
 .OfType<MessageTextContent>()
 .FirstOrDefault();

 // Clean up
 await _client.Threads.DeleteThreadAsync(thread.Id);

 return response?.Text ?? "No results found.";
 }
 finally
 {
 // Clean up the agent
 await _client.Administration.DeleteAgentAsync(agent.Id);
 }
 }
}

Integrating Bing Grounding into the Workflow

Here’s how to use the Bing-powered price agent in a complete gift-finding workflow:

public static async Task RunWithBingGroundingAsync()
{
 var projectEndpoint = Environment.GetEnvironmentVariable("PROJECT_ENDPOINT")!;
 var modelDeployment = Environment.GetEnvironmentVariable("MODEL_DEPLOYMENT_NAME") ?? "gpt-4o";
 var bingConnectionId = Environment.GetEnvironmentVariable("BING_CONNECTION_ID")!;
 // Connection ID format: /subscriptions/{sub}/resourceGroups/{rg}/providers/Microsoft.CognitiveServices/accounts/{account}/projects/{project}/connections/{connection}

 Console.WriteLine("🔍 Searching the web for real prices with Bing Grounding...\n");

 var priceAgent = new ChristmasPriceAgent(projectEndpoint, modelDeployment, bingConnectionId);

 // First, generate gift ideas (could come from another agent)
 var giftIdeas = "1. Milwaukee cordless drill set, 2. Weber portable grill, 3. Carhartt beanie";

 // Search for real prices
 var priceResults = await priceAgent.FindGiftPricesAsync(giftIdeas);

 Console.WriteLine("📊 Price Comparison Results:");
 Console.WriteLine(priceResults);
 Console.WriteLine("\n🎁 Happy Shopping! 🎁");
}

Processing Citations from Bing Results

One important aspect of Grounding with Bing Search is that responses include citations with links to the source websites. Here’s how to extract and display them:

public static void ProcessBingGroundingResponse(IEnumerable<PersistentThreadMessage> messages)
{
 foreach (var message in messages.Where(m => m.Role == MessageRole.Agent))
 {
 foreach (var content in message.ContentItems)
 {
 if (content is MessageTextContent textContent)
 {
 var response = textContent.Text;

 // Process URL citations
 if (textContent.Annotations != null)
 {
 foreach (var annotation in textContent.Annotations)
 {
 if (annotation is MessageTextUriCitationAnnotation uriAnnotation)
 {
 // Replace citation placeholder with markdown link
 response = response.Replace(
 uriAnnotation.Text,
 $" [{uriAnnotation.UriCitation.Title}]({uriAnnotation.UriCitation.Uri})"
 );
 }
 }
 }

 Console.WriteLine(response);
 }
 }
 }
}

Now when the price comparison agent runs, it uses Grounding with Bing Search to find real product listings, current prices, and available deals from the live web. The agent automatically decides when to search based on the query and returns grounded responses with proper citations.

The Complete Program

Here’s how everything comes together in Program.cs:

using Azure.AI.OpenAI;
using Azure.Identity;
using Microsoft.Agents.AI;
using Microsoft.Agents.AI.Workflows;
using Microsoft.Extensions.AI;

Console.WriteLine("🎄 Christmas Gift Finder - Powered by AI Agents 🎄\n");

var endpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT")!;
var deployment = Environment.GetEnvironmentVariable("AZURE_OPENAI_DEPLOYMENT_NAME") ?? "gpt-4o-mini";

var chatClient = new AzureOpenAIClient(new Uri(endpoint), new DefaultAzureCredential())
 .GetChatClient(deployment)
 .AsIChatClient();

// Create the agent team
var ideaAgent = ChristmasAgentFactory.CreateGiftIdeaAgent(chatClient);
var priceAgent = ChristmasAgentFactory.CreatePriceComparisonAgent(chatClient);
var summaryAgent = ChristmasAgentFactory.CreateSummaryAgent(chatClient);

// Build the workflow
var workflow = AgentWorkflowBuilder.BuildSequential(
 "ChristmasGiftWorkflow",
 [ideaAgent, priceAgent, summaryAgent]);

Console.Write("Who are you shopping for? ");
var recipientName = Console.ReadLine() ?? "Someone special";

Console.Write("What are their interests? ");
var interests = Console.ReadLine() ?? "general";

Console.Write("What's your budget? $");
var budget = Console.ReadLine() ?? "50";

var prompt = $"Find Christmas gifts for {recipientName} who enjoys {interests}. Budget: ${budget}";

Console.WriteLine("\n🔍 Searching for the perfect gifts...\n");

await using var run = await InProcessExecution.StreamAsync(
 workflow,
 new ChatMessage(ChatRole.User, prompt));

await run.TrySendMessageAsync(new TurnToken(emitEvents: true));

await foreach (var evt in run.WatchStreamAsync())
{
 switch (evt)
 {
 case AgentRunUpdateEvent update:
 Console.Write(update.Data);
 break;
 case WorkflowOutputEvent output:
 Console.WriteLine("\n\n🎁 Happy Shopping! 🎁");
 break;
 }
}

Conclusion

Microsoft’s Agent Framework makes it surprisingly easy to build multi-agent systems where each agent specializes in a specific task. By coordinating these agents through workflows, we can tackle complex problems like Christmas shopping in a structured and efficient way.

What makes this even more powerful is the ability to add real-world capabilities through tools. By integrating Grounding with Bing Search from Microsoft Foundry, our price comparison agent can actually search the web for current prices, deals, and availability—turning a simple AI chatbot into a truly useful shopping assistant with proper citations.

The framework’s support for sequential, concurrent, and handoff patterns means you can design agent systems that match your exact needs. Whether it’s finding gifts, planning trips, or any other multi-step task, the Agent Framework provides the building blocks to make it happen.

This holiday season, let the AI agents handle the research while you focus on wrapping presents and enjoying time with family!

Source Code

The concepts shown in this post are based on the official Agent Framework samples. You can explore more examples on the Microsoft Agent Framework GitHub repository.

Happy holidays and happy coding! 🎄

Een AI-aangedreven RSS-feedaggregator bouwen

Fri, 12 Dec 2025 00:00:00 +0000

As a Microsoft MVP and tech enthusiast, I constantly find myself drowning in the ocean of amazing content published across Microsoft’s DevBlogs. From .NET announcements to Visual Studio updates, from Azure innovations to Semantic Kernel deep-dives – there’s always something new and exciting happening in the Microsoft ecosystem.

The problem? Keeping up with it all is nearly impossible.

I wanted to stay on top of the latest announcements and share them with my network, but manually checking seven different RSS feeds, reading articles, crafting engaging social media posts, and keeping track of what I’ve already shared was becoming a full-time job in itself. Every morning I’d open multiple browser tabs, scan through dozens of articles, try to remember which ones I’d already shared, and then spend precious time writing posts about the ones that caught my attention.

So I did what any developer would do – I automated it.

In this comprehensive guide, I’ll walk you through how I built an AI-powered RSS feed aggregator that monitors multiple Microsoft DevBlogs RSS feeds for new content, uses Azure OpenAI and Semantic Kernel to analyze articles and generate engaging posts, creates detailed markdown documentation for each analyzed article, sends notifications via Telegram so I can review and share the content, tracks everything to avoid duplicate posts, and runs automatically via GitHub Actions.

Let’s dive deep into every aspect of this solution.

The Story Behind This Project

Living with Information Overload

Let me paint you a picture of my typical morning before I built this tool. I’d wake up, grab my coffee, and open my laptop to check what’s new in the Microsoft developer ecosystem. First, I’d navigate to the main DevBlogs site to see if there were any major announcements. Then I’d check the .NET blog specifically because that’s my primary technology stack. After that, I’d hop over to the Semantic Kernel blog since AI is becoming increasingly important. Visual Studio blog was next on the list because IDE updates can significantly impact my daily workflow. Then came the DevOps blog for CI/CD and GitHub-related news, followed by the All Things Azure blog for cloud infrastructure updates, and finally the Azure SQL blog for database innovations.

That’s seven different feeds to check. Each of these blogs publishes multiple articles per week, sometimes multiple per day during major announcement periods like .NET Conf or Build. That’s potentially dozens of articles to track, read, and share. And here’s the thing – as someone who values sharing knowledge with the community, I didn’t want to just read these articles. I wanted to share the most valuable ones with my network on LinkedIn, helping other developers stay informed too.

But crafting a good LinkedIn post takes time. You need to read the article thoroughly, understand the key points, think about why it matters to your audience, write an engaging hook, and format everything nicely. Multiply that by several articles per week, and you’re looking at hours of work.

What I Really Wanted

After dealing with this for months, I sat down and thought about what an ideal solution would look like. First and foremost, I never wanted to miss important announcements again. The system should automatically catch new articles as soon as they’re published. I also wanted to save time on content creation by letting AI help craft engaging posts – not to replace my voice entirely, but to give me a solid starting point that I could customize.

Consistency was another big factor. I wanted to share content regularly without having to remember to do it manually every single day. The tracking aspect was crucial too – I needed a way to know what I’ve already shared to avoid posting duplicates and annoying my followers. Finally, I wanted to stay organized with a permanent record of everything I’ve processed, so I could look back and see what topics I’ve covered.

The Solution Takes Shape

The solution I envisioned would run on a schedule using GitHub Actions, completely hands-free. It would fetch all seven feeds automatically without me having to open a single browser tab. The AI component would actually read and understand the content, then summarize it in a way that’s useful for my audience. Instead of me having to write posts from scratch, it would create ready-to-share social media content that I could tweak if needed. Everything would be sent to my Telegram for review, so I could quickly glance at my phone and decide what to share. And of course, it would keep a permanent record of everything for future reference.

Before We Start Building

What You’ll Need on Your Machine

To follow along with this tutorial, you’ll need a few things installed on your development machine. The most important one is the .NET SDK version 9.0 or later. This is our runtime and provides all the build tools we need. If you don’t have it installed, head over to dot.net and download the latest version. The installation is straightforward on Windows, macOS, or Linux.

You’ll also want Git installed for version control. We’ll be pushing our code to GitHub and using GitHub Actions for automation, so having Git set up locally is essential. Any recent version will work fine.

For your development environment, I recommend either Visual Studio or VS Code. Personally, I use VS Code for most of my work these days because it’s lightweight and has excellent C# support through the C# Dev Kit extension. But if you’re more comfortable with full Visual Studio, that works perfectly too.

Services and Accounts You’ll Need

Beyond the local tools, you’ll need accounts with a few services. The most important one is Azure OpenAI, which powers our AI analysis. This is a pay-as-you-go service, but the costs are minimal for this use case – we’re talking cents per article analyzed. If you don’t have an Azure account, you can sign up for a free trial that includes some credits to get started.

For notifications, we’ll use a Telegram Bot. The great thing about Telegram is that their bot API is completely free to use. You can create as many bots as you want and send unlimited messages. I’ll walk you through the setup process later in this guide.

Finally, you’ll need a GitHub account for hosting your code and running GitHub Actions. The free tier is more than sufficient for this project. GitHub gives you 2,000 minutes of Actions runtime per month on private repositories, and unlimited minutes on public repositories.

The Libraries That Make This Possible

Our project relies on three main NuGet packages, each serving a specific purpose.

The first is HtmlAgilityPack, which is the gold standard for HTML parsing in .NET. When we fetch an article from a blog, we get back the full HTML of the page – including navigation menus, footers, advertisements, and all sorts of elements we don’t care about. HtmlAgilityPack lets us parse that HTML and extract just the article content we need.

The second package is Microsoft.SemanticKernel, which is Microsoft’s SDK for integrating AI models into applications. Think of it as the bridge between your .NET code and large language models like GPT-4. It handles all the complexity of API calls, token management, and response parsing, letting you focus on what you want the AI to actually do.

The third package is System.ServiceModel.Syndication, which provides built-in support for parsing RSS and Atom feeds. RSS might seem like old technology, but it’s still the best way to get structured updates from blogs and news sites. This package turns raw XML feeds into strongly-typed C# objects that are easy to work with.

Understanding the Architecture

How the Pieces Fit Together

Before we dive into the code, let me explain how all the components work together. Understanding the big picture will make the implementation details much clearer.

At the highest level, we have our main Program.cs file that acts as the orchestrator. This is the entry point of our application, and it coordinates all the other components. When the application runs, it first loads configuration from environment variables – things like API keys and Telegram credentials. Then it goes out and fetches RSS feeds from all seven Microsoft DevBlogs sources. As it processes these feeds, it deduplicates articles to handle cases where the same article appears in multiple feeds. It checks each article against our tracking file to see if we’ve already processed it. For new articles, it hands them off to the AI analyzer for processing.

The ArticleAnalyzer class is where the AI magic happens. This component receives an article and does several things with it. First, it fetches the full HTML content from the article’s URL. Then it extracts clean text from that HTML, removing all the navigation elements, scripts, and styling that we don’t need. Once it has clean text, it sends that to Azure OpenAI through Semantic Kernel with a carefully crafted prompt. The AI analyzes the article and returns a structured response that includes a summary, key topics, relevance explanation, and most importantly, a ready-to-use LinkedIn post. The analyzer parses this response and returns an ArticleAnalysis object containing all this information.

The MarkdownGenerator class takes that ArticleAnalysis object and creates a permanent record of it. It generates a nicely formatted markdown file that includes all the article metadata, the AI’s analysis, and the generated post. These files are stored in a generated-posts directory, giving you a searchable archive of everything you’ve processed.

Finally, the Telegram integration sends the generated post content to your phone. This is the point where you, as a human, get to review the AI’s work and decide whether to share it. The bot sends you a message with the post content, and you can either copy it directly to LinkedIn or modify it first.

The Flow of Data

Let me walk you through what happens when a new article is published on the .NET blog. The workflow starts when GitHub Actions triggers our application on its schedule – let’s say every six hours. The application wakes up and starts fetching all seven RSS feeds. Each feed returns an XML document containing the most recent articles from that blog.

As we parse each feed, we extract individual articles and store them in a list. But here’s a tricky part – the main DevBlogs feed often includes articles that also appear in the individual category feeds. So an article about “.NET 10” might show up in both the main feed and the .NET-specific feed. We handle this by tracking URLs in a HashSet, which automatically prevents duplicates.

Once we have our deduplicated list of articles, we filter it down to just the recent ones – typically articles published in the last day or so. We don’t want to process old articles that we’ve already handled in previous runs. Then we check each recent article against our tracking file. If we’ve already processed and posted about an article, we skip it.

For each new article, we kick off the AI analysis pipeline. The analyzer fetches the full article HTML, cleans it up, and sends it to GPT-4 with our prompt. The AI reads the article and generates a comprehensive analysis along with a LinkedIn post. We save this analysis to a markdown file for our records.

With the analysis complete, we format a message and send it via Telegram. The message includes the generated post content with the URL and hashtags appended. On my phone, I receive a notification, review the post, and if I like it, I can copy it and share it on LinkedIn with just a few taps.

Finally, we update our tracking file to mark this article as processed, so we won’t handle it again in future runs. If any files were created or modified, GitHub Actions commits these changes back to the repository, keeping everything in sync.

Setting Up the Project From Scratch

Creating the Solution Structure

Let’s start building. Open your terminal and navigate to where you want to create the project. I like to keep my projects organized in a Development folder, but you can put it wherever makes sense for you.

First, we’ll create a new solution file. In .NET, a solution is a container that can hold multiple projects. Even though we only have one project for now, starting with a solution makes it easier to add more projects later if needed. Run the command dotnet new sln -n vs-feed-linkedin to create a solution named vs-feed-linkedin.

Next, we need to create our console application project. We’ll put this in a src subdirectory to keep things organized. Run dotnet new console -n VsFeedLinkedin -o src to create a console project named VsFeedLinkedin in the src folder. Then add this project to our solution with dotnet sln add src/VsFeedLinkedin.csproj.

Now navigate into the src directory with cd src. This is where we’ll add our NuGet packages and do most of our development.

Adding the Required Packages

With our project created, we need to add the three NuGet packages I mentioned earlier. Run each of these commands in sequence:

dotnet add package System.ServiceModel.Syndication --version 9.0.9
dotnet add package Microsoft.SemanticKernel --version 1.30.0
dotnet add package HtmlAgilityPack --version 1.11.72

After running these commands, your project file should look something like this:

<Project Sdk="Microsoft.NET.Sdk">

 <PropertyGroup>
 <OutputType>Exe</OutputType>
 <TargetFramework>net9.0</TargetFramework>
 <ImplicitUsings>enable</ImplicitUsings>
 <Nullable>enable</Nullable>
 </PropertyGroup>

 <ItemGroup>
 <PackageReference Include="HtmlAgilityPack" Version="1.11.72" />
 <PackageReference Include="Microsoft.SemanticKernel" Version="1.30.0" />
 <PackageReference Include="System.ServiceModel.Syndication" Version="9.0.9" />
 </ItemGroup>

</Project>

The project file tells .NET that we’re building an executable (OutputType is Exe), targeting .NET 9.0, and using modern C# features like implicit usings and nullable reference types. The ItemGroup section lists our three package dependencies with their exact versions.

Deep Dive into RSS Feeds

What Exactly is RSS?

Before we start writing code to fetch feeds, let’s make sure we understand what we’re working with. RSS stands for Really Simple Syndication, and it’s a standardized XML format for distributing content updates. The idea is simple: instead of requiring users to visit your website to see if there’s new content, you publish a machine-readable file that lists your recent content. Applications can then poll this file periodically to discover new articles.

RSS has been around since the late 1990s and early 2000s. You might think it’s outdated technology, but it’s actually still widely used – especially by blogs, news sites, and podcasts. The beauty of RSS is its simplicity. It’s just XML with a defined structure, and any application can parse it.

The Structure of a DevBlogs Feed

When you fetch an RSS feed from Microsoft DevBlogs, you get back an XML document that follows a specific structure. At the top level, there’s an rss element that contains a single channel element. The channel represents the blog itself and includes metadata like the blog’s title, URL, and description.

Inside the channel, you’ll find multiple item elements, each representing an individual blog post. Each item includes a title (the article’s headline), a link (the URL where you can read the full article), a pubDate (when the article was published), a dc:creator element (the author’s name), one or more category elements (tags for the article), and a description (usually a summary or excerpt of the article).

Here’s a simplified example of what this looks like:

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
 <channel>
 <title>.NET Blog</title>
 <link>https://devblogs.microsoft.com/dotnet</link>
 <description>The latest news about .NET</description>
 <item>
 <title>Announcing .NET 10</title>
 <link>https://devblogs.microsoft.com/dotnet/announcing-dotnet-10</link>
 <pubDate>Mon, 10 Dec 2025 12:00:00 GMT</pubDate>
 <dc:creator>Microsoft</dc:creator>
 <category>Announcements</category>
 <category>.NET</category>
 <description>Article summary...</description>
 </item>
 </channel>
</rss>

The great thing about .NET’s System.ServiceModel.Syndication package is that it parses all of this for us. We don’t have to manually navigate XML nodes or worry about different RSS versions. We just load the feed and get back strongly-typed objects.

The Seven Feeds We Monitor

In my implementation, I monitor seven different Microsoft DevBlogs feeds. The main DevBlogs feed at devblogs.microsoft.com/feed gives us a broad view of everything Microsoft is publishing across all their developer blogs. The .NET-specific feed at devblogs.microsoft.com/dotnet/feed focuses specifically on .NET releases, features, and best practices. The Semantic Kernel feed at devblogs.microsoft.com/semantic-kernel/feed covers AI orchestration and integration – increasingly important as AI becomes central to modern development.

The Visual Studio feed at devblogs.microsoft.com/visualstudio/feed keeps me updated on IDE improvements and productivity features. The DevOps feed at devblogs.microsoft.com/devops/feed covers Azure DevOps, GitHub, and CI/CD topics. The All Things Azure feed at devblogs.microsoft.com/all-things-azure/feed focuses on cloud services and architecture patterns. Finally, the Azure SQL feed at devblogs.microsoft.com/azure-sql/feed covers database innovations and features.

You might wonder why I check both the main feed and the individual category feeds. The main feed gives me breadth – I’ll see articles from any Microsoft developer blog, including ones I might not know about. The category feeds give me depth – they ensure I don’t miss anything important in my core areas of interest, even if those articles get pushed out of the main feed by newer content.

Building the RSS Fetching Logic

The Core Fetching Function

Now let’s write some code. The foundation of our application is the ability to fetch and parse RSS feeds. Here’s the function that handles this:

static async Task<SyndicationFeed?> FetchRssFeedAsync(string url)
{
 using var httpClient = new HttpClient();
 httpClient.DefaultRequestHeaders.Add("User-Agent", "VsFeedLinkedin/1.0");

 var response = await httpClient.GetStringAsync(url);

 using var stringReader = new StringReader(response);

 var settings = new XmlReaderSettings
 {
 DtdProcessing = DtdProcessing.Parse,
 MaxCharactersFromEntities = 1024
 };

 using var xmlReader = XmlReader.Create(stringReader, settings);

 return SyndicationFeed.Load(xmlReader);
}

Let me walk through what this code does. We start by creating an HttpClient, which is .NET’s built-in class for making HTTP requests. We set a User-Agent header because some servers block requests that don’t identify themselves. It’s good practice to set this even when servers don’t require it.

We then make a GET request to the feed URL and receive the response as a string. This string contains the raw XML of the RSS feed.

To parse this XML, we create a StringReader to wrap our response string, then configure some XmlReaderSettings. The DtdProcessing setting is important – RSS feeds sometimes include DTD (Document Type Definition) declarations that need to be processed. The MaxCharactersFromEntities setting is a security measure that prevents XML bomb attacks by limiting how much entity expansion can occur.

Finally, we create an XmlReader with these settings and use SyndicationFeed.Load to parse the XML into a strongly-typed SyndicationFeed object. This gives us access to the feed’s metadata and all its items through nice C# properties instead of raw XML navigation.

Fetching Multiple Feeds with Error Handling

In the real world, network requests fail. Servers go down, connections time out, and XML can be malformed. We need to handle these cases gracefully. Here’s how we fetch all our feeds while being resilient to failures:

var allArticles = new List<(SyndicationItem item, string feedUrl)>();
var seenUrls = new HashSet<string>();

foreach (var feedUrl in feedUrls)
{
 try
 {
 Console.WriteLine($" 📡 Fetching {feedUrl}...");
 var feed = await FetchRssFeedAsync(feedUrl);

 if (feed?.Items != null && feed.Items.Any())
 {
 foreach (var item in feed.Items)
 {
 var itemUrl = item.Links.FirstOrDefault()?.Uri.ToString() ?? "";
 if (!string.IsNullOrEmpty(itemUrl) && seenUrls.Add(itemUrl))
 {
 allArticles.Add((item, feedUrl));
 }
 }
 }
 }
 catch (Exception ex)
 {
 Console.WriteLine($" ⚠️ Failed to fetch {feedUrl}: {ex.Message}");
 }
}

We maintain two collections here. The allArticles list will hold all the articles we find, along with which feed they came from. The seenUrls HashSet tracks which article URLs we’ve already seen, helping us avoid duplicates.

We loop through each feed URL and wrap the fetch operation in a try-catch block. If fetching a particular feed fails – maybe the server is temporarily down – we log a warning and continue with the next feed. This way, a problem with one feed doesn’t prevent us from processing the others.

For each successfully fetched feed, we iterate through its items. We extract the article URL from the item’s Links collection. The HashSet.Add method returns false if the URL is already in the set, which is perfect for our deduplication logic. We only add the article to our list if it’s new.

We store the feed URL alongside each article because this information might be useful later – for example, we might want to know which specific feed an article came from for debugging or logging purposes.

Handling Duplicates and Tracking State

The Deduplication Challenge

As I mentioned earlier, Microsoft DevBlogs has a hierarchical feed structure that creates an interesting challenge. When a .NET team member publishes an article about, say, performance improvements in .NET 10, that article will likely appear in both the main DevBlogs feed and the .NET-specific feed. Sometimes it might even appear in the Visual Studio feed if it relates to IDE features.

If we naively processed every article from every feed, we’d end up analyzing and posting about the same article multiple times. That would waste API calls to Azure OpenAI, spam our Telegram with duplicate notifications, and potentially annoy our followers if we posted duplicates.

The solution is URL-based deduplication. Each article has a unique URL, so we can use that as an identifier. The HashSet data structure is perfect for this because it provides O(1) lookup time and automatically prevents duplicates. When we try to add a URL that’s already in the set, the Add method simply returns false, letting us know we should skip that article.

Persistent State with Markdown

Deduplication handles duplicates within a single run, but what about across runs? When our application runs every six hours, we need to remember which articles we’ve already processed so we don’t handle them again.

I chose to store this state in a markdown file called posted-articles.md. Why markdown? A few reasons. First, it’s human-readable. I can open the file and immediately see which articles I’ve shared. Second, it’s version-controlled. Since this file lives in our Git repository, I have a complete history of when articles were processed. Third, it serves as documentation. Anyone looking at the repository can see what the application has done.

The format of this file is simple. It has a header, a timestamp showing when the application last ran, and then a list of articles in markdown link format:

# Posted Articles

*Last run: 2025-12-10 15:30:00*

List of articles posted to LinkedIn:

- [Announcing .NET 10](https://devblogs.microsoft.com/dotnet/announcing-dotnet-10?wt.mc_id=DT-MVP-5004972) - Posted on 2025-12-10 15:30:00 (Published: 2025-12-10)
- [Visual Studio 2026 Preview](https://devblogs.microsoft.com/visualstudio/vs-2026-preview?wt.mc_id=DT-MVP-5004972) - Posted on 2025-12-09 10:15:00 (Published: 2025-12-09)

Loading and Parsing the Tracking File

To check if we’ve already processed an article, we need to load this file and extract the URLs. Here’s the function that does this:

static HashSet<string> LoadPostedArticles(string filePath)
{
 var postedUrls = new HashSet<string>();

 if (!File.Exists(filePath))
 {
 return postedUrls;
 }

 var lines = File.ReadAllLines(filePath);
 foreach (var line in lines)
 {
 var match = System.Text.RegularExpressions.Regex.Match(line, @"\(([^)]+)\)");
 if (match.Success)
 {
 var url = match.Groups[1].Value;

 if (url.Contains("?wt.mc_id="))
 {
 url = url.Substring(0, url.IndexOf("?wt.mc_id="));
 }
 else if (url.Contains("?"))
 {
 url = url.Substring(0, url.IndexOf("?"));
 }

 url = url.TrimEnd('/');
 postedUrls.Add(url);
 }
 }

 return postedUrls;
}

This function returns a HashSet containing all the URLs we’ve already processed. We start by checking if the file exists – on first run, it won’t, so we return an empty set.

For each line in the file, we use a regex to extract the URL from the markdown link format. The regex $([^)]+)$ matches anything inside parentheses, which is where markdown links store their URLs.

Then comes an important step: URL normalization. URLs for the same article can vary in format. The RSS feed might give us https://devblogs.microsoft.com/dotnet/article, but our saved version has a tracking parameter appended: https://devblogs.microsoft.com/dotnet/article?wt.mc_id=DT-MVP-5004972. Some URLs have trailing slashes, others don’t.

To handle this, we strip off any query parameters (everything after the ?) and remove trailing slashes. This normalization ensures that we recognize articles as duplicates even if their URLs differ in these superficial ways.

Saving New Articles

When we successfully process an article, we need to add it to our tracking file:

static void SavePostedArticle(string filePath, string url, string title, DateTimeOffset publishDate)
{
 var markdownEntry = $"- [{title}]({url}) - Posted on {DateTime.Now:yyyy-MM-dd HH:mm:ss} (Published: {publishDate:yyyy-MM-dd})\n";

 if (!File.Exists(filePath))
 {
 File.WriteAllText(filePath, "# Posted Articles\n\n*Last run: {DateTime.Now:yyyy-MM-dd HH:mm:ss}*\n\nList of articles posted:\n\n");
 }

 File.AppendAllText(filePath, markdownEntry);
}

This function creates a markdown-formatted entry with the article title as a link, followed by timestamps showing when we posted it and when it was originally published. If the file doesn’t exist yet, we create it with a header first.

The AI Analysis Engine

Understanding Semantic Kernel

Now we get to the most exciting part of our application – the AI analysis. Semantic Kernel is Microsoft’s open-source SDK for integrating large language models into applications. It’s more than just a wrapper around API calls. It provides a framework for building sophisticated AI applications with features like plugins, planners, and memory.

For our use case, we’re using Semantic Kernel’s chat completion capabilities. We’ll send a prompt to Azure OpenAI, and the model will analyze our article and generate a response. Semantic Kernel handles all the complexity of API authentication, request formatting, and response parsing.

Setting Up the Article Analyzer

Let’s look at how we set up our analyzer class:

using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.ChatCompletion;
using HtmlAgilityPack;

namespace VsFeedLinkedin.Services;

public class ArticleAnalyzer
{
 private readonly Kernel _kernel;
 private readonly IChatCompletionService _chatService;

 public ArticleAnalyzer(string endpoint, string apiKey, string deploymentName)
 {
 var builder = Kernel.CreateBuilder();

 builder.AddAzureOpenAIChatCompletion(
 deploymentName: deploymentName,
 endpoint: endpoint,
 apiKey: apiKey
 );

 _kernel = builder.Build();
 _chatService = _kernel.GetRequiredService<IChatCompletionService>();
 }

Semantic Kernel uses a builder pattern for configuration. We create a KernelBuilder, add our Azure OpenAI chat completion service with the necessary credentials, then build the kernel. From the built kernel, we retrieve the IChatCompletionService interface, which we’ll use to send prompts and receive responses.

The constructor takes three parameters: the Azure OpenAI endpoint (something like https://your-resource.openai.azure.com/), your API key, and the deployment name (like gpt-4o). These are passed in from environment variables, keeping our credentials secure.

Crafting the Perfect Prompt

The prompt we send to the AI is crucial. A well-crafted prompt produces consistent, high-quality outputs. A vague or poorly structured prompt produces inconsistent, mediocre results. I spent considerable time iterating on this prompt to get outputs that I’m happy with:

var prompt = $"""
 You are a professional tech content analyst and LinkedIn content creator.
 Analyze the following Microsoft DevBlogs article and create an engaging LinkedIn post.

 Article Title: {title}
 Author: {author}
 URL: {url}
 Tags: {string.Join(", ", tags)}

 Article Content:
 {cleanContent}

 Please provide:
 1. A brief summary (2-3 sentences) of the key points
 2. The main technologies or topics covered
 3. Why this is relevant for developers/tech professionals
 4. An engaging LinkedIn post (max 1300 characters) that:
 - Starts with a hook or attention-grabbing statement
 - Highlights the key value for readers
 - Includes a call to action
 - Uses appropriate emojis (but not too many)
 - Maintains a professional yet approachable tone
 - DO NOT include hashtags in the post (they will be added separately)
 - DO NOT include the URL in the post (it will be added separately)

 Format your response as follows:
 ## Summary
 [Your summary here]

 ## Key Topics
 [List of main topics/technologies]

 ## Relevance
 [Why this matters]

 ## LinkedIn Post
 [Your engaging LinkedIn post here]
 """;

Let me explain the design decisions here. We start by giving the AI a clear role: “You are a professional tech content analyst and LinkedIn content creator.” This primes the model to respond in the appropriate style and voice.

We provide all the context the AI needs: the article title, author, URL, tags from the RSS feed, and the full article content. The more context we give, the better the analysis will be.

Then we specify exactly what we want back. I ask for four things: a summary, key topics, relevance explanation, and a LinkedIn post. For the LinkedIn post specifically, I give detailed instructions about what makes a good post – it should have a hook, highlight value, include a call to action, use emojis appropriately, and maintain a professional tone.

The negative instructions are equally important. I explicitly tell the AI NOT to include hashtags or the URL in the post. Why? Because I add these separately, and if the AI included them, I’d have duplicates. This kind of explicit instruction prevents common mistakes.

Finally, I specify the exact output format. By asking for sections marked with ## headers, I make the response easy to parse programmatically. The AI is very good at following formatting instructions, and this consistency makes our parsing code simpler and more reliable.

Executing the Analysis

Here’s how we put it all together:

public async Task<ArticleAnalysis> AnalyzeArticleAsync(
 string title,
 string url,
 string htmlContent,
 string author,
 List<string> tags)
{
 var cleanContent = ExtractTextFromHtml(htmlContent);

 if (cleanContent.Length > 8000)
 {
 cleanContent = cleanContent.Substring(0, 8000) + "...";
 }

 var chatHistory = new ChatHistory();
 chatHistory.AddUserMessage(prompt);

 var response = await _chatService.GetChatMessageContentAsync(chatHistory);
 var responseText = response.Content ?? "";

 return ParseAnalysisResponse(responseText, title, url, author, tags);
}

We first extract clean text from the HTML content (I’ll explain this in the next section). Then we truncate the content if it’s too long. Large language models have token limits, and very long articles might exceed them. By capping at 8000 characters, we ensure we stay within limits while still providing substantial context.

We create a ChatHistory object and add our prompt as a user message. This is Semantic Kernel’s abstraction for chat-based interactions. We send this to the chat completion service and get back a response. Finally, we parse the response to extract the individual sections.

Parsing the AI Response

The AI returns its response as text formatted with our requested structure. We need to parse this into individual fields:

private static ArticleAnalysis ParseAnalysisResponse(
 string response,
 string title,
 string url,
 string author,
 List<string> tags)
{
 var analysis = new ArticleAnalysis
 {
 Title = title,
 Url = url,
 Author = author,
 Tags = tags,
 RawAnalysis = response
 };

 var sections = response.Split("##", StringSplitOptions.RemoveEmptyEntries);

 foreach (var section in sections)
 {
 var lines = section.Trim().Split('\n', 2);
 if (lines.Length < 2) continue;

 var sectionTitle = lines[0].Trim().ToLower();
 var sectionContent = lines[1].Trim();

 switch (sectionTitle)
 {
 case "summary":
 analysis.Summary = sectionContent;
 break;
 case "key topics":
 analysis.KeyTopics = sectionContent;
 break;
 case "relevance":
 analysis.Relevance = sectionContent;
 break;
 case "linkedin post":
 analysis.LinkedInPost = sectionContent;
 break;
 }
 }

 return analysis;
}

We split the response by the ## markers, which gives us each section. For each section, we split by newline to separate the header from the content. We then use a switch statement to assign each section’s content to the appropriate property.

We also store the raw, unparsed response. This is useful for debugging – if something goes wrong with parsing, we can look at what the AI actually returned.

Extracting Content from HTML

Why We Need to Clean HTML

When we fetch an article from a blog, we get the full HTML of the page. This includes much more than just the article content – there’s navigation menus, headers, footers, sidebars, related article widgets, comment sections, scripts for analytics and tracking, stylesheets, and all sorts of other elements.

If we sent all of this to our AI, several bad things would happen. The AI would have to process a lot of irrelevant text, wasting tokens and potentially confusing the analysis. The navigation and footer text might get included in the summary. Scripts and CSS would be treated as content, further polluting the analysis.

We need to extract just the article content – the part that a human reader would actually read.

Using HtmlAgilityPack

HtmlAgilityPack is a robust HTML parsing library for .NET. Unlike XML, HTML is often malformed – tags might not be properly closed, attributes might not be quoted correctly. HtmlAgilityPack handles all of this gracefully, giving us a DOM-like structure we can query and manipulate.

Here’s our extraction function:

private static string ExtractTextFromHtml(string html)
{
 if (string.IsNullOrWhiteSpace(html))
 return string.Empty;

 var doc = new HtmlDocument();
 doc.LoadHtml(html);

 var nodesToRemove = doc.DocumentNode.SelectNodes("//script|//style|//nav|//footer|//header");
 if (nodesToRemove != null)
 {
 foreach (var node in nodesToRemove)
 {
 node.Remove();
 }
 }

 var text = doc.DocumentNode.InnerText;

 text = System.Text.RegularExpressions.Regex.Replace(text, @"\s+", " ");
 return text.Trim();
}

We load the HTML into an HtmlDocument, which parses it into a tree structure. Then we use XPath to select all the nodes we want to remove. The XPath expression //script|//style|//nav|//footer|//header selects all script elements (JavaScript code we don’t need), style elements (CSS we don’t need), nav elements (navigation menus), footer elements, and header elements.

After removing these nodes, we get the InnerText property, which extracts all the text content while stripping HTML tags. This gives us the plain text of the article.

Finally, we clean up whitespace. HTML often has lots of extra whitespace for formatting purposes – multiple spaces, tabs, newlines. We use a regex to replace any sequence of whitespace characters with a single space, then trim the result.

Fetching the Full Article

The RSS feed only gives us summaries, not full article content. To get the complete text, we need to fetch the article’s web page:

public static async Task<string> FetchArticleContentAsync(string url)
{
 using var httpClient = new HttpClient();
 httpClient.DefaultRequestHeaders.Add("User-Agent", "VsFeedLinkedin/1.0");

 try
 {
 return await httpClient.GetStringAsync(url);
 }
 catch (Exception ex)
 {
 Console.WriteLine($"⚠️ Failed to fetch article content: {ex.Message}");
 return string.Empty;
 }
}

This is straightforward – we make an HTTP GET request to the article URL and return the HTML response. We wrap it in a try-catch because network requests can fail, and we’d rather return an empty string than crash the whole application.

Creating Permanent Documentation

Why Generate Markdown Files

Every time we analyze an article, we generate a detailed markdown file documenting that analysis. This serves several purposes.

First, it creates a searchable archive. Over time, you’ll build up a collection of analyzed articles. You can search through these files to find past content on specific topics.

Second, it provides transparency. You can see exactly what the AI generated for each article, including the full analysis and the LinkedIn post.

Third, it’s useful for debugging. If something goes wrong with a post, you can look at the markdown file to understand what happened.

The Markdown Generator Class

public class MarkdownGenerator
{
 private readonly string _outputDirectory;

 public MarkdownGenerator(string outputDirectory)
 {
 _outputDirectory = outputDirectory;

 if (!Directory.Exists(_outputDirectory))
 {
 Directory.CreateDirectory(_outputDirectory);
 }
 }

 public string GenerateMarkdownFile(ArticleAnalysis analysis)
 {
 var sb = new StringBuilder();

 var safeTitle = GenerateSafeFileName(analysis.Title);
 var fileName = $"{analysis.AnalyzedAt:yyyy-MM-dd}_{safeTitle}.md";
 var filePath = Path.Combine(_outputDirectory, fileName);

 sb.AppendLine($"# {analysis.Title}");
 sb.AppendLine();
 sb.AppendLine("## Article Information");
 sb.AppendLine();
 sb.AppendLine($"- **Author:** {analysis.Author}");
 sb.AppendLine($"- **URL:** [{analysis.Url}]({analysis.Url})");
 sb.AppendLine($"- **Published:** {analysis.PublishDate:yyyy-MM-dd}");
 sb.AppendLine($"- **Analyzed:** {analysis.AnalyzedAt:yyyy-MM-dd HH:mm:ss}");
 sb.AppendLine($"- **Tags:** {string.Join(", ", analysis.Tags)}");
 sb.AppendLine();
 sb.AppendLine("");
 sb.AppendLine();
 sb.AppendLine("## AI Analysis");
 sb.AppendLine();
 sb.AppendLine("### Summary");
 sb.AppendLine();
 sb.AppendLine(analysis.Summary);
 sb.AppendLine();
 sb.AppendLine("### Key Topics");
 sb.AppendLine();
 sb.AppendLine(analysis.KeyTopics);
 sb.AppendLine();
 sb.AppendLine("### Relevance for Developers");
 sb.AppendLine();
 sb.AppendLine(analysis.Relevance);
 sb.AppendLine();
 sb.AppendLine("");
 sb.AppendLine();
 sb.AppendLine("## Generated LinkedIn Post");
 sb.AppendLine();
 sb.AppendLine("```");
 sb.AppendLine(analysis.LinkedInPost);
 sb.AppendLine("```");
 sb.AppendLine();
 sb.AppendLine("");
 sb.AppendLine();
 sb.AppendLine("*This analysis was generated using AI (Semantic Kernel with Azure OpenAI)*");

 File.WriteAllText(filePath, sb.ToString());
 return filePath;
 }

The constructor takes an output directory path and creates it if it doesn’t exist. The GenerateMarkdownFile method takes an ArticleAnalysis object and produces a nicely formatted markdown document.

The filename includes the date and a sanitized version of the title. This makes files easy to sort chronologically and identify at a glance.

Handling Unsafe Filenames

Article titles can contain characters that aren’t allowed in filenames – things like colons, slashes, question marks, and quotes. We need to sanitize these:

private static string GenerateSafeFileName(string title)
{
 var invalidChars = Path.GetInvalidFileNameChars();
 var safeTitle = new string(title
 .Where(c => !invalidChars.Contains(c))
 .ToArray());

 safeTitle = safeTitle.Replace(" ", "-").Replace("--", "-");

 if (safeTitle.Length > 50)
 {
 safeTitle = safeTitle.Substring(0, 50);
 }

 return safeTitle.TrimEnd('-').ToLowerInvariant();
}

We use Path.GetInvalidFileNameChars() to get a list of characters that can’t appear in filenames on the current operating system. We filter these out, replace spaces with hyphens for readability, limit the length to 50 characters, and convert to lowercase for consistency.

Setting Up Telegram Notifications

Why I Chose Telegram

For the notification component, I considered several options – email, SMS, Slack, Discord, and Telegram. I ultimately chose Telegram for several reasons.

The API is completely free with no rate limits for reasonable usage. Many notification services have limits on how many messages you can send for free, but Telegram doesn’t restrict bot messages to individual users.

The bot API is incredibly simple. It’s just HTTP requests with JSON payloads. No complex authentication flows, no webhooks required for basic functionality.

Telegram works everywhere – on my phone, on my desktop, in my web browser. I can receive notifications wherever I am and respond immediately.

Messages support rich formatting. I can use bold text, italics, and even code blocks to make my notifications more readable.

Creating Your Telegram Bot

Setting up a Telegram bot is surprisingly easy. Open Telegram and search for @BotFather – this is Telegram’s official bot for creating and managing bots. Start a conversation with BotFather and send the command /newbot. BotFather will ask you for a name for your bot (this is the display name) and a username (this must be unique and end in “bot”). Once you’ve provided these, BotFather will create your bot and give you an API token. This token is like a password – keep it secret and don’t commit it to public repositories.

To find your chat ID so the bot knows where to send messages, start a conversation with your new bot by searching for it and pressing Start. Then access the URL https://api.telegram.org/bot<YOUR_TOKEN>/getUpdates in your browser or using curl. Look for the chat object in the response – the id field is your chat ID.

Sending Messages via the API

Here’s our function for sending Telegram messages:

static async Task SendToTelegramAsync(string botToken, string chatId, string message)
{
 using var httpClient = new HttpClient();

 var telegramApiUrl = $"https://api.telegram.org/bot{botToken}/sendMessage";

 var payload = new
 {
 chat_id = chatId,
 text = message,
 parse_mode = "HTML"
 };

 var jsonContent = JsonSerializer.Serialize(payload);
 var content = new StringContent(jsonContent, Encoding.UTF8, "application/json");

 var response = await httpClient.PostAsync(telegramApiUrl, content);

 if (!response.IsSuccessStatusCode)
 {
 var errorContent = await response.Content.ReadAsStringAsync();
 throw new Exception($"Telegram API error: {response.StatusCode} - {errorContent}");
 }
}

The Telegram Bot API is REST-based. We make a POST request to the sendMessage endpoint with a JSON body containing the chat ID (where to send), the message text (what to send), and optionally a parse mode (for formatting).

Setting parse_mode to “HTML” lets us use basic HTML tags in our messages – things like <b>bold</b> and <i>italic</i>. This can make notifications more readable, though for our current use case we send plain text.

If the request fails, we throw an exception with details about what went wrong. This helps with debugging if something isn’t working.

Configuring the Application

Environment Variables

Our application needs several pieces of sensitive information – API keys, bot tokens, and endpoint URLs. We should never hard-code these or commit them to version control. Instead, we use environment variables, which can be set securely in each environment where the application runs.

For Telegram, we need TELEGRAM_BOT_TOKEN (the token BotFather gave you) and TELEGRAM_CHAT_ID (your chat ID where messages should be sent).

For Azure OpenAI, we need AZURE_OPENAI_ENDPOINT (your resource’s URL), AZURE_OPENAI_API_KEY (your API key), and AZURE_OPENAI_DEPLOYMENT (the name of your deployed model, like “gpt-4o”).

Loading Configuration in Code

Here’s how we load these values at application startup:

var telegramBotToken = Environment.GetEnvironmentVariable("TELEGRAM_BOT_TOKEN");
var telegramChatId = Environment.GetEnvironmentVariable("TELEGRAM_CHAT_ID");

var azureOpenAiEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
var azureOpenAiKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
var azureOpenAiDeployment = Environment.GetEnvironmentVariable("AZURE_OPENAI_DEPLOYMENT") ?? "gpt-4o";

var aiAnalysisEnabled = !string.IsNullOrWhiteSpace(azureOpenAiEndpoint) &&
 !string.IsNullOrWhiteSpace(azureOpenAiKey);

We use Environment.GetEnvironmentVariable to read each value. For the deployment name, we provide a default of “gpt-4o” if no value is set.

We then check whether AI analysis should be enabled by verifying that we have both an endpoint and an API key. This allows the application to run in a degraded mode if Azure OpenAI isn’t configured – it’ll still fetch feeds and track articles, just without the AI analysis.

Graceful Degradation

This concept of graceful degradation is important. We don’t want the application to crash just because one optional feature isn’t configured:

ArticleAnalyzer? articleAnalyzer = null;
MarkdownGenerator? markdownGenerator = null;

if (aiAnalysisEnabled)
{
 Console.WriteLine("🤖 AI Analysis enabled - Using Azure OpenAI with Semantic Kernel");
 articleAnalyzer = new ArticleAnalyzer(azureOpenAiEndpoint!, azureOpenAiKey!, azureOpenAiDeployment);
 markdownGenerator = new MarkdownGenerator(articlesOutputDir);
}
else
{
 Console.WriteLine("ℹ️ AI Analysis disabled - Set AZURE_OPENAI_ENDPOINT and AZURE_OPENAI_API_KEY to enable");
}

If AI is enabled, we create the analyzer and markdown generator. If not, we leave them null and skip the AI-related steps during processing. The application still provides value by fetching feeds and sending basic notifications, even without the AI enhancement.

Automating with GitHub Actions

Why GitHub Actions

The real power of this solution comes from automation. We don’t want to manually run the application every few hours – we want it to run automatically in the background.

GitHub Actions is perfect for this. It’s built into GitHub, so there’s no additional service to set up. It’s free for public repositories and includes generous free minutes for private repositories. It can run on a schedule, triggering our application at regular intervals. It has built-in secrets management for storing our API keys securely. And it can commit changes back to the repository, keeping our tracking file up to date.

The Workflow File

Create a file at .github/workflows/fetch-and-notify.yml with the following content:

name: Fetch DevBlogs and Notify

on:
 schedule:
 - cron: '0 */6 * * *'
 workflow_dispatch:

jobs:
 fetch-and-notify:
 runs-on: ubuntu-latest

 steps:
 - name: Checkout repository
 uses: actions/checkout@v4

 - name: Setup .NET
 uses: actions/setup-dotnet@v4
 with:
 dotnet-version: '9.0.x'

 - name: Restore dependencies
 run: dotnet restore src/VsFeedLinkedin.csproj

 - name: Build
 run: dotnet build src/VsFeedLinkedin.csproj --no-restore

 - name: Run application
 env:
 TELEGRAM_BOT_TOKEN: ${{ secrets.TELEGRAM_BOT_TOKEN }}
 TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
 AZURE_OPENAI_ENDPOINT: ${{ secrets.AZURE_OPENAI_ENDPOINT }}
 AZURE_OPENAI_API_KEY: ${{ secrets.AZURE_OPENAI_API_KEY }}
 AZURE_OPENAI_DEPLOYMENT: ${{ secrets.AZURE_OPENAI_DEPLOYMENT }}
 run: dotnet run --project src/VsFeedLinkedin.csproj

 - name: Commit and push changes
 run: |
 git config user.name "GitHub Actions Bot"
 git config user.email "actions@github.com"

 if [[ -n $(git status --porcelain posted-articles.md generated-posts/) ]]; then
 TIMESTAMP=$(date +%Y%m%d_%H%M%S)
 git add posted-articles.md generated-posts/
 git commit -m "chore($TIMESTAMP): processed new articles"
 git push
 else
 echo "No changes to commit"
 fi

Let me explain each part. The on section defines when the workflow runs. The schedule trigger uses cron syntax – 0 */6 * * * means “at minute 0 of every 6th hour.” So the workflow runs at midnight, 6 AM, noon, and 6 PM UTC. The workflow_dispatch trigger allows manual runs from the GitHub UI, which is useful for testing.

The job runs on ubuntu-latest, which is a Linux virtual machine. We check out our repository, set up .NET 9, restore NuGet packages, and build the project.

The Run application step is where the magic happens. We pass our secrets as environment variables using the ${{ secrets.SECRET_NAME }} syntax. These secrets are stored securely in GitHub and never exposed in logs.

Finally, we commit any changes back to the repository. We configure Git with a bot identity, check if there are any changes to our tracking file or generated posts directory, and if so, create a commit and push it.

Setting Up Secrets

To add secrets to your GitHub repository, go to your repository’s Settings, then Secrets and variables, then Actions. Click “New repository secret” and add each of your environment variables. The names must match exactly what we reference in the workflow file.

Wrapping Up

What We’ve Built

Looking back at everything we’ve covered, we’ve built a comprehensive, AI-powered RSS feed aggregator that automates what used to be a tedious manual process. The application monitors seven Microsoft DevBlogs feeds automatically, catching every new article as soon as it’s published. It handles the complexities of deduplication, recognizing when the same article appears in multiple feeds.

The AI analysis powered by Semantic Kernel and Azure OpenAI reads and understands article content, generating summaries, identifying key topics, and explaining relevance – all automatically. Most importantly, it creates engaging LinkedIn posts that I can share with minimal editing.

The Telegram integration means I get notified on my phone whenever there’s new content to review. I can glance at the message, decide if I want to share it, and act immediately.

And because it runs on GitHub Actions on a schedule, I don’t have to remember to do anything. The system works in the background, and I only engage when there’s something worth sharing.

The Technologies That Made It Possible

This project brought together several technologies that each played a crucial role. .NET 9 provided a solid foundation with its modern language features and excellent performance. Semantic Kernel made AI integration straightforward, handling all the complexity of API calls and response management. Azure OpenAI provided the intelligence – the ability to actually understand and analyze technical content. HtmlAgilityPack solved the messy problem of extracting clean text from web pages. System.ServiceModel.Syndication made RSS parsing a breeze. The Telegram Bot API gave us free, reliable notifications. And GitHub Actions tied it all together with automated, scheduled execution.

Thinking About Costs

One question you might have is: how much does this cost to run? The answer is: not much at all.

Telegram is completely free – no charges for sending messages through your bot.

GitHub Actions is free for public repositories. For private repositories, you get 2,000 minutes per month on the free tier, which is more than enough for our use case.

Azure OpenAI is the only paid component, and the costs are minimal. Using GPT-4o, analyzing a typical blog article costs somewhere between one and three cents. Even if you’re processing dozens of articles per month, you’re looking at less than a dollar in AI costs.

Where You Could Take This Next

While this solution works great for my needs, there are plenty of ways you could extend it. You could add support for multiple social platforms – maybe post to Twitter/X, Mastodon, or Bluesky in addition to LinkedIn. You could implement sentiment analysis to track the tone of articles over time and spot trends. You could allow different prompt templates for different feeds, generating different styles of posts for different topics. You could build a web dashboard for reviewing and managing posts instead of using Telegram. You could track engagement metrics for posted content to see which topics resonate most with your audience.

Final Thoughts

What I love most about this project is that it embodies a philosophy I believe in strongly: automation should handle the tedious parts while leaving the creative and decision-making parts to humans. The system does all the grunt work – fetching, parsing, analyzing, generating – but I still review everything before sharing. The AI-generated posts are starting points that I can customize and personalize.

By combining the power of .NET, Semantic Kernel, and Azure OpenAI, we’ve created a tool that saves hours of manual work each week while maintaining quality and consistency. It’s the kind of practical automation that makes a real difference in daily life.

If you build something similar or have ideas for improvements, I’d love to hear about it. Feel free to reach out on LinkedIn!

Happy coding, and merry Christmas! 🎄

Multi-agent AI-systemen bouwen met Microsoft's Agent Framework

Mon, 01 Dec 2025 00:00:00 +0000

Introduction

We’ve entered the era of multi-agent AI systems. Instead of a single monolithic AI handling everything, the industry is moving toward specialized agents that collaborate to solve complex problems — much like a well-organized team of experts. One agent researches, another analyzes, a third writes, and a coordinator keeps everyone on track.

If you’ve worked with large language models, you’ve likely hit the ceiling of what a single prompt can do. Context windows fill up, instructions get tangled, and quality degrades. Multi-agent architectures solve this by decomposing complex tasks into focused responsibilities, where each agent is an expert at one thing.

Microsoft’s Agent Framework, part of the broader Semantic Kernel ecosystem, gives .NET developers a first-class toolkit for building exactly these kinds of systems. In this post, we’ll go from zero to a fully working multi-agent pipeline, covering the core concepts, orchestration patterns, and practical code you need to get started.

What is Microsoft’s Agent Framework?

The Agent Framework is Microsoft’s answer to building, orchestrating, and deploying AI agents and multi-agent systems in .NET. It sits alongside — and integrates deeply with — the Semantic Kernel, which has been Microsoft’s open-source SDK for AI orchestration since 2023.

Think of it this way: Semantic Kernel gives you the primitives (kernels, plugins, memory, planners), while the Agent Framework gives you higher-level abstractions specifically designed for agent-to-agent communication and coordination.

The framework supports multiple model providers including Azure OpenAI, OpenAI, and models hosted on Azure AI Foundry. It’s model-agnostic in design but deeply integrated with the Azure ecosystem, which makes it particularly compelling for enterprise scenarios.

Key capabilities include:

Multiple agent types: ChatCompletionAgent, OpenAIAssistantAgent, and AzureAIAgent for different backends
Orchestration patterns: Sequential, concurrent, handoff, and group chat workflows
Plugin ecosystem: Extend agents with native C# functions, OpenAPI specs, and Model Context Protocol (MCP) tools
Conversation management: Built-in threading, history management, and termination strategies
Observability: Integration with OpenTelemetry for tracing agent interactions

Key Concepts

Before we write any code, let’s establish the vocabulary. The Agent Framework revolves around a few core abstractions.

Agents

An agent is an entity backed by an AI model, configured with specific instructions (a system prompt), a name, and optionally a set of plugins or tools. Each agent is a specialist — you define what it knows, what it can do, and how it should behave.

ChatCompletionAgent

The most straightforward agent type. It wraps a chat completion endpoint (Azure OpenAI, OpenAI, etc.) and maintains a conversation. It’s stateless between invocations — you provide the history, and it responds. This makes it lightweight and easy to reason about.

ChatCompletionAgent agent = new()
{
 Name = "Reviewer",
 Instructions = "You are a senior code reviewer. Analyze the provided code for bugs, security issues, and style violations. Be concise and actionable.",
 Kernel = kernel
};

OpenAIAssistantAgent

This agent type leverages the OpenAI Assistants API, which provides server-side conversation state, file handling, and code interpretation. It’s more heavyweight but gives you persistent threads and built-in tools like code interpreter and file search.

OpenAIAssistantAgent agent = await OpenAIAssistantAgent.CreateAsync(
 clientProvider: clientProvider,
 definition: new OpenAIAssistantDefinition("gpt-4o")
 {
 Name = "DataAnalyst",
 Instructions = "You analyze datasets and produce statistical summaries."
 }
);

AgentGroupChat

This is the orchestrator. AgentGroupChat manages multi-turn conversations between multiple agents, controlling who speaks next, when the conversation ends, and how history is shared. It’s where the magic of multi-agent collaboration happens.

Orchestration Patterns

The framework supports four primary orchestration patterns, each suited to different problems.

Sequential

Agents execute one after another in a defined order. Agent A’s output feeds into Agent B, whose output feeds into Agent C. This is ideal for pipelines: draft → review → edit → publish.

// Conceptual flow
var draft = await writerAgent.InvokeAsync("Write a blog post about .NET 9");
var reviewed = await reviewerAgent.InvokeAsync($"Review this: {draft}");
var edited = await editorAgent.InvokeAsync($"Edit based on feedback: {reviewed}");

Concurrent

Multiple agents work on the same input simultaneously. You fan out the work and then aggregate results. Great for getting diverse perspectives — like having three reviewers look at the same pull request.

Handoff

An agent decides to transfer control to another agent based on the conversation context. This mimics how a customer service team works: the front-line agent handles basic queries and escalates to specialists when needed.

Group Chat

Multiple agents participate in an open conversation, taking turns based on a selection strategy. The AgentGroupChat class implements this pattern with configurable turn-taking and termination logic.

Building Your First Agent

Let’s get practical. Here’s how to build your first agent step by step.

Prerequisites

You’ll need:

.NET 9 SDK
An Azure OpenAI resource with a deployed model (e.g., gpt-4o)
Visual Studio or VS Code

Setting Up the Project

Create a new console application and install the required packages:

dotnet new console -n AgentDemo
cd AgentDemo
dotnet add package Microsoft.SemanticKernel --prerelease
dotnet add package Microsoft.SemanticKernel.Agents.Core --prerelease
dotnet add package Azure.AI.OpenAI
dotnet add package Azure.Identity

Creating a Simple Agent

First, set up the kernel with your Azure OpenAI configuration:

using Azure.Identity;
using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.Agents;
using Microsoft.SemanticKernel.ChatCompletion;

var builder = Kernel.CreateBuilder();

builder.AddAzureOpenAIChatCompletion(
 deploymentName: "gpt-4o",
 endpoint: "https://your-resource.openai.azure.com/",
 credentials: new DefaultAzureCredential()
);

Kernel kernel = builder.Build();

Now create an agent and invoke it:

ChatCompletionAgent agent = new()
{
 Name = "TechWriter",
 Instructions = """
 You are a technical writer specializing in software documentation.
 Write clear, concise content aimed at experienced developers.
 Use code examples when appropriate.
 Always structure your output with headings and bullet points.
 """,
 Kernel = kernel
};

ChatHistory history = new();
history.AddUserMessage("Explain dependency injection in .NET in 200 words.");

await foreach (ChatMessageContent response in agent.InvokeAsync(history))
{
 Console.WriteLine(response.Content);
}

That’s it. You have a working agent. But the real power comes when agents work together.

Multi-Agent Orchestration with AgentGroupChat

Let’s build something more interesting — a group chat where multiple agents collaborate. The AgentGroupChat class manages the conversation flow, including who speaks next and when to stop.

Defining the Agents

We’ll create three agents: a writer, a reviewer, and an editor.

ChatCompletionAgent writer = new()
{
 Name = "Writer",
 Instructions = """
 You are a content writer. When given a topic, produce a well-structured
 draft. Focus on clarity and technical accuracy.
 When you receive feedback from the Reviewer, incorporate it into a
 revised draft.
 """,
 Kernel = kernel
};

ChatCompletionAgent reviewer = new()
{
 Name = "Reviewer",
 Instructions = """
 You are a content reviewer. Analyze drafts for technical accuracy,
 clarity, and completeness. Provide specific, actionable feedback.
 Do NOT rewrite the content — only provide feedback.
 When the content meets your standards, respond with: APPROVED
 """,
 Kernel = kernel
};

ChatCompletionAgent editor = new()
{
 Name = "Editor",
 Instructions = """
 You are an editor. Once content is approved by the Reviewer,
 polish it for grammar, tone, and formatting.
 Output only the final polished version.
 When you have produced the final version, respond with: COMPLETE
 """,
 Kernel = kernel
};

Setting Up the Group Chat

The AgentGroupChat needs two key configurations: a selection strategy (who speaks next) and a termination strategy (when to stop).

AgentGroupChat chat = new(writer, reviewer, editor)
{
 ExecutionSettings = new()
 {
 SelectionStrategy = new SequentialSelectionStrategy(),
 TerminationStrategy = new ApprovalTerminationStrategy()
 {
 Agents = [editor],
 MaximumIterations = 12
 }
 }
};

Custom Termination Strategy

The termination strategy defines when the conversation ends. Here’s a custom one that looks for the “COMPLETE” keyword:

class ApprovalTerminationStrategy : TerminationStrategy
{
 protected override Task<bool> ShouldAgentTerminateAsync(
 Agent agent,
 IReadOnlyList<ChatMessageContent> history,
 CancellationToken cancellationToken = default)
 {
 bool isComplete = history
 .Last()
 .Content?
 .Contains("COMPLETE", StringComparison.OrdinalIgnoreCase) ?? false;

 return Task.FromResult(isComplete);
 }
}

Running the Conversation

Kick off the conversation with a user message and let the agents collaborate:

chat.AddChatMessage(
 new ChatMessageContent(AuthorRole.User,
 "Write a 300-word technical overview of gRPC vs REST for microservices.")
);

await foreach (ChatMessageContent message in chat.InvokeAsync())
{
 Console.WriteLine($"[{message.AuthorName}]: {message.Content}");
 Console.WriteLine("---");
}

The flow will look something like this:

Writer produces a draft
Reviewer provides feedback
Writer revises based on feedback
Reviewer says “APPROVED”
Editor polishes and says “COMPLETE”
Conversation terminates

This back-and-forth continues automatically until the termination condition is met or MaximumIterations is reached.

Plugins and Tools

Agents become truly powerful when they can interact with external systems. The Agent Framework supports three main extension mechanisms.

Native Functions (Kernel Plugins)

You can give agents access to C# methods as tools. The agent will call these functions when it determines they’re needed:

public class ContentToolsPlugin
{
 [KernelFunction("word_count")]
 [Description("Counts the number of words in the provided text.")]
 public int WordCount([Description("The text to count words in")] string text)
 {
 return text.Split(' ', StringSplitOptions.RemoveEmptyEntries).Length;
 }

 [KernelFunction("check_readability")]
 [Description("Calculates a readability score for the given text.")]
 public string CheckReadability([Description("The text to analyze")] string text)
 {
 var words = text.Split(' ', StringSplitOptions.RemoveEmptyEntries).Length;
 var sentences = text.Split(['.', '!', '?'], StringSplitOptions.RemoveEmptyEntries).Length;

 if (sentences == 0) return "Unable to calculate — no sentences found.";

 double avgWordsPerSentence = (double)words / sentences;

 return avgWordsPerSentence switch
 {
 < 15 => $"Easy to read (avg {avgWordsPerSentence:F1} words/sentence)",
 < 25 => $"Moderate difficulty (avg {avgWordsPerSentence:F1} words/sentence)",
 _ => $"Difficult to read (avg {avgWordsPerSentence:F1} words/sentence). Consider shorter sentences."
 };
 }
}

kernel.Plugins.AddFromType<ContentToolsPlugin>();

ChatCompletionAgent analyst = new()
{
 Name = "ContentAnalyst",
 Instructions = "Analyze content using available tools. Report word count and readability.",
 Kernel = kernel,
 Arguments = new KernelArguments(
 new PromptExecutionSettings
 {
 FunctionChoiceBehavior = FunctionChoiceBehavior.Auto()
 })
};

Model Context Protocol (MCP)

MCP is an open standard for connecting AI models to external tools and data sources. The Agent Framework supports MCP, meaning your agents can use tools exposed by any MCP-compliant server. This opens the door to file systems, databases, APIs, and more — all through a standardized interface.

// Example: Adding an MCP server for file operations
kernel.Plugins.AddFromMcpServer("filesystem",
 new Uri("http://localhost:3000/mcp"));

This is particularly exciting because it means your agents aren’t limited to what you build — they can tap into an ecosystem of MCP tools that others develop and share.

Real-World Example: Content Review Pipeline

Let’s put everything together with a practical scenario. Imagine you’re building an internal tool that automates content review for a documentation team. The pipeline has four stages:

Researcher — Gathers relevant technical information
Writer — Produces a draft based on research
Reviewer — Checks for accuracy and completeness
Publisher — Formats and prepares the final output

Here’s a condensed implementation:

using Azure.Identity;
using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.Agents;
using Microsoft.SemanticKernel.ChatCompletion;

// Build the kernel
var builder = Kernel.CreateBuilder();
builder.AddAzureOpenAIChatCompletion(
 deploymentName: "gpt-4o",
 endpoint: "https://your-resource.openai.azure.com/",
 credentials: new DefaultAzureCredential()
);
Kernel kernel = builder.Build();

// Define specialized agents
ChatCompletionAgent researcher = new()
{
 Name = "Researcher",
 Instructions = """
 You are a technical researcher. Given a topic, identify the key
 concepts, recent developments, and important details that should
 be covered. Output a structured research brief.
 """,
 Kernel = kernel
};

ChatCompletionAgent writer = new()
{
 Name = "Writer",
 Instructions = """
 You are a technical writer. Using the research brief provided,
 write a comprehensive, well-structured article. Include code
 examples where relevant. Target audience: experienced developers.
 """,
 Kernel = kernel
};

ChatCompletionAgent reviewer = new()
{
 Name = "Reviewer",
 Instructions = """
 You are a senior technical reviewer. Check the article for:
 - Technical accuracy
 - Completeness relative to the research brief
 - Code correctness
 - Clarity and structure
 If everything looks good, respond with APPROVED.
 Otherwise, provide specific feedback for revision.
 """,
 Kernel = kernel
};

ChatCompletionAgent publisher = new()
{
 Name = "Publisher",
 Instructions = """
 You are a content publisher. Once the article is approved,
 format it with proper markdown, add a summary at the top,
 and ensure consistent formatting throughout.
 End your response with COMPLETE.
 """,
 Kernel = kernel
};

// Configure the group chat
AgentGroupChat chat = new(researcher, writer, reviewer, publisher)
{
 ExecutionSettings = new()
 {
 SelectionStrategy = new SequentialSelectionStrategy(),
 TerminationStrategy = new ApprovalTerminationStrategy()
 {
 Agents = [publisher],
 MaximumIterations = 15
 }
 }
};

// Start the pipeline
chat.AddChatMessage(new ChatMessageContent(
 AuthorRole.User,
 "Create a technical article about implementing health checks in ASP.NET Core microservices."
));

await foreach (ChatMessageContent message in chat.InvokeAsync())
{
 Console.ForegroundColor = message.AuthorName switch
 {
 "Researcher" => ConsoleColor.Cyan,
 "Writer" => ConsoleColor.Green,
 "Reviewer" => ConsoleColor.Yellow,
 "Publisher" => ConsoleColor.Magenta,
 _ => ConsoleColor.White
 };

 Console.WriteLine($"\n{'='new string('=', 60)}");
 Console.WriteLine($"[{message.AuthorName}]");
 Console.WriteLine(new string('=', 60));
 Console.WriteLine(message.Content);
}

Console.ResetColor();

This pipeline produces a fully researched, written, reviewed, and formatted article — all through agent collaboration. Each agent focuses on what it does best, and the AgentGroupChat coordinates the workflow.

Best Practices

After building several multi-agent systems, here are the patterns and practices I’ve found most valuable.

Error Handling

Always set MaximumIterations on your termination strategy. Without it, agents can enter infinite loops — especially when a reviewer keeps finding issues and a writer keeps revising without improvement.

TerminationStrategy = new ApprovalTerminationStrategy()
{
 MaximumIterations = 12 // Safety net
}

Wrap your agent invocations in try-catch blocks. API rate limits, network issues, and model errors are all realities of production systems:

try
{
 await foreach (var message in chat.InvokeAsync(cancellationToken))
 {
 // Process messages
 }
}
catch (HttpOperationException ex) when (ex.StatusCode == System.Net.HttpStatusCode.TooManyRequests)
{
 // Implement retry with exponential backoff
 await Task.Delay(TimeSpan.FromSeconds(30), cancellationToken);
}

Observability

The Agent Framework integrates with OpenTelemetry, which means you can trace every agent interaction, tool call, and token usage. This is essential for debugging multi-agent workflows where it’s not always obvious which agent caused an issue.

Set up basic telemetry by adding the Semantic Kernel telemetry packages and configuring your preferred exporter (Application Insights, Jaeger, etc.):

builder.Services.AddOpenTelemetry()
 .WithTracing(tracing =>
 {
 tracing.AddSource("Microsoft.SemanticKernel*");
 tracing.AddOtlpExporter();
 });

Cost Management

Multi-agent systems multiply your API costs — every agent turn is an API call, and group chats can generate many turns. Some strategies to keep costs under control:

Use cheaper models for simpler agents: Not every agent needs GPT-4o. A reviewer might work fine with a smaller model, while only the writer needs the heavy hitter.
Limit history: Use ReducedHistoryCount in your execution settings to cap how much conversation context each agent receives.
Set strict iteration limits: Prevent runaway conversations with reasonable MaximumIterations values.
Cache when possible: If an agent performs the same lookup repeatedly, cache the results in a plugin.

Agent Design

Keep instructions focused: Each agent should have a single, clear responsibility. Broad instructions lead to mediocre performance across all tasks.
Be explicit about output format: Tell agents exactly how to structure their responses. This makes downstream parsing reliable.
Use termination keywords: Define clear signals (like “APPROVED” or “COMPLETE”) that agents use to indicate they’re done. This makes termination strategies simple and predictable.

Conclusion

Multi-agent AI systems represent a fundamental shift in how we build intelligent applications. Instead of wrestling with a single prompt to handle everything, we can decompose problems into specialized roles and let agents collaborate.

Microsoft’s Agent Framework makes this practical for .NET developers. The abstractions are clean — agents, group chats, selection and termination strategies — and they compose naturally. Combined with the Semantic Kernel’s plugin ecosystem and Azure’s model hosting, you have a full stack for building production-grade multi-agent systems.

The framework is still evolving (many packages are in preview), but the core patterns are solid and the direction is clear. If you’re building AI-powered applications in .NET, now is the time to start experimenting with multi-agent architectures.

Start small — build two agents that collaborate on a simple task. Once you see the quality improvement over single-agent approaches, you’ll want to decompose everything into agent teams.

Happy coding!

Ruwe HTML renderen in Blazor met MarkupString

Sat, 22 Nov 2025 00:00:00 +0000

The other day I was building a component that needed to render some HTML that came from a CMS. I had the HTML string in a variable and just dropped it in the template like @myHtml. And of course, Blazor escaped everything and rendered the actual tags as text on the page. Not what I wanted.

The problem

By default, Blazor encodes any string you render in a template. So if you have:

@code {
 private string content = "<strong>Hello</strong> <em>world</em>";
}

And you do this:

<div>@content</div>

You’ll see the literal text <strong>Hello</strong> <em>world</em> on the page instead of Hello world. Blazor does this on purpose to prevent XSS attacks, which is the right default behavior.

The solution: MarkupString

If you actually need to render raw HTML, you wrap your string in a MarkupString:

<div>@((MarkupString)content)</div>

And that’s it! Now Blazor will render the HTML as actual markup. You can also assign it to a variable:

@code {
 private string rawHtml = "<strong>Hello</strong> <em>world</em>";
 private MarkupString HtmlContent => (MarkupString)rawHtml;
}

<div>@HtmlContent</div>

A real world example

I was pulling blog content from an API and needed to render it in a preview component. The content had all sorts of HTML — headings, code blocks, links, images. Here’s roughly what it looked like:

@inject HttpClient Http

@if (article is not null)
{
 <article>
 <h1>@article.Title</h1>
 <div class="content">
 @((MarkupString)article.HtmlBody)
 </div>
 </article>
}

@code {
 [Parameter]
 public int ArticleId { get; set; }

 private ArticleDto? article;

 protected override async Task OnInitializedAsync()
 {
 article = await Http.GetFromJsonAsync<ArticleDto>($"api/articles/{ArticleId}");
 }
}

Works perfectly. The HTML from the API gets rendered as actual markup.

Be careful with untrusted content

This is important: MarkupString does not sanitize the HTML. It renders whatever you give it, including <script> tags. So if the content comes from user input or an untrusted source, you need to sanitize it first.

There’s no built-in HTML sanitizer in Blazor, but you can use a library like HtmlSanitizer:

using Ganss.Xss;

@code {
 private HtmlSanitizer sanitizer = new();

 private MarkupString SafeHtml(string html)
 {
 var clean = sanitizer.Sanitize(html);
 return (MarkupString)clean;
 }
}

<div>@SafeHtml(untrustedContent)</div>

This strips out dangerous elements like <script>, onclick handlers, and other stuff you don’t want rendering from user-provided content.

When to use it

I use MarkupString for:

CMS content or markdown that’s been converted to HTML server-side
Rich text editor output
Email templates preview
Any pre-built HTML from trusted sources

For anything that comes from user input, always sanitize first. Better safe than sorry.

Hope you liked the post! Feel free to contact me on any social media at @emimontesdeoca.

Resources

Wat is er nieuw in EF Core 9: de functies die je moet kennen

Tue, 18 Nov 2025 00:00:00 +0000

Entity Framework Core 9 shipped alongside .NET 9 in November 2024, and after spending a solid amount of time working with it across several projects, I can say it’s one of the most meaningful releases in a while. Not because it reinvents the wheel, but because it polishes the areas where EF Core has historically caused the most friction — query translation, performance, and working with modern data patterns.

In this post, I’ll walk through the features that have had the biggest impact on my day-to-day work. If you’re still on EF Core 8 (or even 7), this should give you a clear picture of what’s waiting for you on the other side of the upgrade.

EF Core 9 in the .NET 9 Ecosystem

EF Core 9 targets .NET 8 and .NET 9, which means you don’t necessarily need to upgrade your entire application to .NET 9 to take advantage of most of these features. That said, some of the AOT and performance improvements are tightly coupled with .NET 9 runtime changes, so you’ll get the most out of it by going all the way.

The release follows the odd/even cadence Microsoft has established: odd-numbered releases (like .NET 9) are Standard Term Support (STS) with 18 months of support, while even releases (like .NET 8) are Long Term Support (LTS). Keep this in mind when planning your upgrade timeline.

LINQ Translation Improvements

This is where most developers will feel the difference immediately. EF Core 9 has made significant strides in translating LINQ expressions to SQL that actually makes sense.

Better GroupBy Translations

If you’ve ever written a GroupBy query in EF Core and ended up with client-side evaluation warnings or bizarre SQL, you know the pain. EF Core 9 handles a much broader set of GroupBy scenarios directly in SQL.

var salesByCategory = await context.Products
 .GroupBy(p => p.Category.Name)
 .Select(g => new
 {
 Category = g.Key,
 TotalRevenue = g.Sum(p => p.Price * p.UnitsSold),
 AveragePrice = g.Average(p => p.Price),
 ProductCount = g.Count()
 })
 .OrderByDescending(x => x.TotalRevenue)
 .ToListAsync();

In previous versions, queries involving aggregations over navigation properties inside GroupBy would sometimes fall back to client evaluation. EF Core 9 translates this cleanly to a single SQL query with GROUP BY, SUM, AVG, and COUNT.

Complex Projections and Subqueries

Nested subqueries and complex projections also got a serious upgrade. Consider something like this:

var orderSummaries = await context.Customers
 .Select(c => new CustomerSummaryDto
 {
 Name = c.FullName,
 TotalOrders = c.Orders.Count(),
 MostRecentOrder = c.Orders
 .OrderByDescending(o => o.OrderDate)
 .Select(o => new OrderBriefDto
 {
 Id = o.Id,
 Date = o.OrderDate,
 Total = o.LineItems.Sum(li => li.Quantity * li.UnitPrice)
 })
 .FirstOrDefault(),
 TopCategory = c.Orders
 .SelectMany(o => o.LineItems)
 .GroupBy(li => li.Product.Category.Name)
 .OrderByDescending(g => g.Count())
 .Select(g => g.Key)
 .FirstOrDefault()
 })
 .ToListAsync();

EF Core 9 can now translate this entire expression into SQL without triggering client-side evaluation. The generated query uses correlated subqueries and lateral joins where appropriate, and the SQL plan is considerably more efficient than what earlier versions would produce.

Parameterized Primitive Collections

One of the standout LINQ improvements is the ability to pass collections of primitive values directly into queries:

var statusFilter = new List<string> { "Active", "Pending", "Review" };

var filteredOrders = await context.Orders
 .Where(o => statusFilter.Contains(o.Status))
 .ToListAsync();

In EF Core 8, this was translated using IN clauses with inlined values, which meant the query plan cache couldn’t be reused when the list changed. EF Core 9 parameterizes these collections properly, sending them as a structured parameter. This is a big deal for query plan caching on SQL Server and PostgreSQL.

Bulk Operations — ExecuteUpdate and ExecuteDelete

ExecuteUpdate and ExecuteDelete were introduced in EF Core 7, but EF Core 9 expands what you can do with them in meaningful ways.

More Complex Update Expressions

You can now use more complex expressions in ExecuteUpdate, including references to other tables through navigation properties:

await context.Products
 .Where(p => p.Category.IsDiscontinued)
 .ExecuteUpdateAsync(setters => setters
 .SetProperty(p => p.IsAvailable, false)
 .SetProperty(p => p.DiscontinuedDate, DateTimeOffset.UtcNow)
 .SetProperty(p => p.Price, p => p.Price * 0.5m));

This generates a single UPDATE statement with a JOIN to the categories table — no need to load entities into memory, no change tracking overhead.

Conditional Bulk Deletes with Subqueries

Bulk deletes with subquery filters are now fully supported:

await context.AuditLogs
 .Where(log => log.CreatedAt < DateTime.UtcNow.AddYears(-2))
 .Where(log => !context.ProtectedRecords
 .Any(pr => pr.AuditLogId == log.Id))
 .ExecuteDeleteAsync();

This translates to a DELETE with a NOT EXISTS subquery, exactly what you’d write by hand. No entities loaded, no round trips.

JSON Column Enhancements

JSON columns have been one of the most exciting features in recent EF Core releases, and EF Core 9 takes them further.

Querying Inside JSON

You can now filter and project data from within JSON columns with better translation support:

public class Order
{
 public int Id { get; set; }
 public string CustomerName { get; set; }
 public ShippingAddress Address { get; set; } // Stored as JSON
 public List<OrderNote> Notes { get; set; } // Stored as JSON
}

public class ShippingAddress
{
 public string Street { get; set; }
 public string City { get; set; }
 public string State { get; set; }
 public string ZipCode { get; set; }
 public string Country { get; set; }
}

public class OrderNote
{
 public DateTime CreatedAt { get; set; }
 public string Text { get; set; }
 public string Author { get; set; }
}

Configuration in your DbContext:

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
 modelBuilder.Entity<Order>(builder =>
 {
 builder.OwnsOne(o => o.Address, ab =>
 {
 ab.ToJson();
 });

 builder.OwnsMany(o => o.Notes, nb =>
 {
 nb.ToJson();
 });
 });
}

Now you can query directly into JSON:

var newYorkOrders = await context.Orders
 .Where(o => o.Address.State == "NY")
 .OrderByDescending(o => o.Notes.Count)
 .Select(o => new
 {
 o.CustomerName,
 o.Address.City,
 LatestNote = o.Notes
 .OrderByDescending(n => n.CreatedAt)
 .Select(n => n.Text)
 .FirstOrDefault()
 })
 .ToListAsync();

EF Core 9 generates proper JSON_VALUE and JSON_QUERY calls on SQL Server (or equivalent on other providers), and the translation covers a much wider range of LINQ operations on JSON elements than before.

Updating JSON Properties

One of the friction points in EF Core 8 was that updating a single property inside a JSON column would cause the entire JSON document to be rewritten. EF Core 9 improves this with more granular change tracking for JSON-mapped types, generating more targeted updates when possible.

var order = await context.Orders.FindAsync(orderId);
order.Address.ZipCode = "10001";
await context.SaveChangesAsync();

On supported providers, this can generate a more targeted JSON modification rather than rewriting the whole blob.

Complex Types — Value Objects Without Identity

Complex types are one of the features that Domain-Driven Design practitioners have been waiting for. Unlike owned types, complex types have no identity — they’re pure value objects.

[ComplexType]
public record Money(decimal Amount, string Currency);

[ComplexType]
public record DateRange(DateTime Start, DateTime End);

public class Project
{
 public int Id { get; set; }
 public string Name { get; set; }
 public Money Budget { get; set; }
 public DateRange Timeline { get; set; }
}

These get stored as flattened columns in the parent table — Budget_Amount, Budget_Currency, Timeline_Start, Timeline_End — without requiring a separate table or any kind of key.

The key difference from owned types: complex types are compared by value, not by reference. Two Money instances with the same Amount and Currency are considered equal, regardless of which entity they belong to.

var expensiveProjects = await context.Projects
 .Where(p => p.Budget.Amount > 100_000m && p.Budget.Currency == "USD")
 .OrderByDescending(p => p.Budget.Amount)
 .ToListAsync();

This translates directly to filtering on the flattened columns — clean, efficient, and exactly what you’d expect.

HierarchyId Support for SQL Server

If you’ve ever worked with hierarchical data in SQL Server — organizational charts, category trees, file systems — you know that HierarchyId is the built-in type for this. EF Core 9 brings first-class support for it.

public class Employee
{
 public int Id { get; set; }
 public string Name { get; set; }
 public string Title { get; set; }
 public HierarchyId PathFromCeo { get; set; }
}

You can now query hierarchical relationships directly:

var managerId = HierarchyId.Parse("/1/3/");

// All direct and indirect reports
var allReports = await context.Employees
 .Where(e => e.PathFromCeo.IsDescendantOf(managerId))
 .Where(e => e.PathFromCeo != managerId) // exclude the manager
 .OrderBy(e => e.PathFromCeo)
 .ToListAsync();

// Direct reports only (one level down)
var directReports = await context.Employees
 .Where(e => e.PathFromCeo.GetAncestor(1) == managerId)
 .ToListAsync();

// Get an employee's depth in the hierarchy
var employeesWithDepth = await context.Employees
 .Select(e => new
 {
 e.Name,
 e.Title,
 Level = e.PathFromCeo.GetLevel()
 })
 .OrderBy(e => e.Level)
 .ToListAsync();

All of these translate to SQL Server’s native HierarchyId methods. If you’ve been implementing tree structures with self-referencing foreign keys and recursive CTEs, this is a much cleaner approach.

Compiled Models and AOT Support

Performance-conscious developers will appreciate the continued investment in compiled models and ahead-of-time (AOT) compilation support.

Compiled Models

Compiled models pre-generate the model metadata that EF Core normally builds at startup. For large models (think hundreds of entities), this can dramatically reduce cold-start time.

dotnet ef dbcontext optimize --output-dir CompiledModels --namespace MyApp.CompiledModels

Then wire it up:

builder.Services.AddDbContext<AppDbContext>(options =>
 options
 .UseSqlServer(connectionString)
 .UseModel(MyApp.CompiledModels.AppDbContextModel.Instance));

In EF Core 9, compiled models are more complete — they support more mapping features and generate smaller output. For a model with around 400 entities, startup time can drop from several seconds to near-instantaneous.

AOT Compilation Progress

Full Native AOT support for EF Core is still a work in progress, but EF Core 9 makes significant strides. Many of the reflection-heavy code paths have been refactored to be trimming-friendly, and compiled models are a key part of the AOT story. If you’re targeting scenarios like Azure Functions or microservices where cold start matters, these improvements are directly relevant.

Cosmos DB Provider Updates

The Azure Cosmos DB provider continues to mature with EF Core 9. Some notable improvements:

Partition Key Handling

The provider now supports hierarchical partition keys and handles partition key filters more intelligently:

public class TenantDocument
{
 public string Id { get; set; }
 public string TenantId { get; set; } // Partition key
 public string Region { get; set; } // Sub-partition key
 public string Content { get; set; }
}

// This query now correctly uses the partition key for routing
var docs = await context.TenantDocuments
 .Where(d => d.TenantId == "tenant-42" && d.Region == "us-east")
 .Where(d => d.Content.Contains("important"))
 .ToListAsync();

Improved LINQ to NoSQL Translation

More LINQ operations now translate to Cosmos DB’s SQL dialect, including better support for Contains, Any, nested array operations, and mathematical functions. Queries that previously fell back to client evaluation are now handled server-side.

Vector Search Support

EF Core 9 introduces early support for vector similarity search with Cosmos DB, which is useful if you’re building applications that integrate with embeddings or AI-driven search:

var results = await context.Documents
 .OrderBy(d => EF.Functions.VectorDistance(d.Embedding, queryVector))
 .Take(10)
 .ToListAsync();

Migration Improvements

Migrations got some quality-of-life improvements that make working with them less painful in team environments.

Temporal Tables in Migrations

Migrations now handle temporal table configuration more gracefully, with proper support for period columns and history table naming:

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
 modelBuilder.Entity<Employee>()
 .ToTable("Employees", b => b.IsTemporal(t =>
 {
 t.HasPeriodStart("ValidFrom");
 t.HasPeriodEnd("ValidTo");
 t.UseHistoryTable("EmployeeHistory");
 }));
}

Idempotent Scripts

The Script-Migration command (and its CLI equivalent) produces better idempotent scripts by default, with improved handling of edge cases around schema changes that depend on data existing in certain states.

Migration Bundles

Migration bundles, which package your migrations into a standalone executable for deployment, are more reliable in EF Core 9 with better error reporting and retry logic for transient failures.

dotnet ef migrations bundle --self-contained -r linux-x64

This produces a binary you can run in your CI/CD pipeline without needing the .NET SDK installed on your deployment target.

Performance Benchmarks

Here are some rough benchmarks from my own testing. These are from a project with roughly 200 entities, running against SQL Server 2022, measured with BenchmarkDotNet. Your numbers will vary, but the relative improvements should be similar.

Scenario	EF Core 8	EF Core 9	Improvement
Model build (cold start)	1,850 ms	320 ms	~5.8x faster (compiled)
Simple query (single entity by PK)	0.42 ms	0.38 ms	~10% faster
Complex query (joins + aggregation)	3.1 ms	2.4 ms	~23% faster
Bulk update (10k rows)	145 ms	118 ms	~19% faster
JSON column query	2.8 ms	1.9 ms	~32% faster
SaveChanges (100 entities)	48 ms	41 ms	~15% faster

The compiled model improvement is the most dramatic, but the steady improvements across the board add up — especially in high-throughput scenarios where you’re executing thousands of queries per second.

Upgrading from EF Core 8

If you’re on EF Core 8, the upgrade path is relatively smooth. Here’s a checklist:

1. Update your packages:

<PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.0" />
<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="9.0.0" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="9.0.0" />

2. Check for breaking changes. The list for EF Core 9 is relatively short compared to some previous releases. The most notable ones:

Some previously obsolete APIs have been removed
Changes in how certain GroupBy queries are translated (they now go server-side, which changes behavior if you were relying on client evaluation)
Minor changes in migration scaffolding output

3. Re-generate compiled models if you’re using them. The format changed, so old compiled models won’t work with EF Core 9.

4. Run your test suite. Pay special attention to queries that were previously evaluated on the client — they might now be evaluated on the server, which is usually better but could surface data differences.

5. Check your Cosmos DB queries if you’re using that provider. The improved translations mean some queries will execute differently (usually faster), but it’s worth verifying the results are identical.

A minimal upgrade for a typical project looks like this:

dotnet add package Microsoft.EntityFrameworkCore --version 9.0.0
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 9.0.0
dotnet add package Microsoft.EntityFrameworkCore.Design --version 9.0.0
dotnet build
dotnet test

If everything compiles and tests pass, you’re probably in good shape. If you hit issues, the EF Core 9 breaking changes documentation has detailed migration guidance for each change.

Wrapping Up

EF Core 9 isn’t a revolutionary release — it’s an evolutionary one, and that’s exactly what it needed to be. The LINQ improvements alone justify the upgrade for most projects, and features like JSON column enhancements, complex types, and HierarchyId support open up patterns that were previously awkward or impossible.

If I had to pick the three features that have had the most impact on my projects:

Parameterized primitive collections — because query plan cache efficiency matters at scale
JSON column improvements — because the hybrid relational-document pattern is incredibly useful
Compiled models — because startup time directly affects developer productivity and deployment speed

The EF Core team has been on a solid trajectory since EF Core 5, and version 9 continues that trend. If you’re already on EF Core 8, the upgrade is low-risk and high-reward. If you’re on something older, there’s never been a better time to make the jump.

Happy coding — and happy querying.

Aan de slag met Semantic Kernel: AI-orkestratie in C#

Sun, 05 Oct 2025 00:00:00 +0000

If you’ve been building .NET applications and watching the AI landscape evolve, you’ve probably wondered: what’s the best way to integrate large language models into my C# projects without turning my codebase into spaghetti? That’s exactly the problem Microsoft’s Semantic Kernel solves, and after spending the last year building production applications with it, I can tell you it’s become one of the most important tools in my developer toolkit.

In this post, I’ll walk you through everything you need to get started with Semantic Kernel — from understanding the core concepts to building a real-world AI assistant. Whether you’re just dipping your toes into AI development or looking for a structured way to orchestrate LLM calls in your existing .NET applications, this guide has you covered.

What is Semantic Kernel?

Semantic Kernel (SK) is an open-source SDK from Microsoft that acts as an orchestration layer between your application code and large language models like GPT-4o, Azure OpenAI, or other AI services. Think of it as a lightweight middleware that lets you combine traditional C# code with AI capabilities in a clean, composable way.

But why not just call the OpenAI API directly? You absolutely can — and for simple use cases, that’s fine. But the moment you need to:

Let the AI decide which functions to call based on user input
Combine multiple AI calls with traditional code in a pipeline
Add memory and context so the AI remembers previous interactions
Build multi-step agents that reason through complex tasks

…you’ll find yourself reinventing the wheel. Semantic Kernel gives you all of this out of the box, with first-class .NET support, dependency injection integration, and a plugin architecture that feels natural to any C# developer.

The project lives on GitHub under the microsoft/semantic-kernel repository and has SDKs for C#, Python, and Java. The C# SDK is the most mature and is the one we’ll focus on here.

Core Concepts

Before we write any code, let’s understand the building blocks.

The Kernel

The Kernel is the central object in Semantic Kernel. It’s the orchestrator — the thing that ties together your AI services, plugins, and configuration. You create one, register your services and plugins on it, and then use it to execute prompts or invoke functions. If you’re familiar with dependency injection in ASP.NET Core, the Kernel will feel very familiar — it’s essentially a service container with AI superpowers.

Plugins and Functions

A plugin is a collection of related functions that the Kernel can invoke. Functions come in two flavors:

Prompt functions — defined as natural language templates that get sent to the LLM
Native functions — regular C# methods decorated with attributes that the Kernel can discover and call

For example, you might have a WeatherPlugin with a native function GetCurrentWeather(string city) and a prompt function that summarizes weather data in a friendly way.

AI Connectors

Connectors are how Semantic Kernel talks to AI services. The most common ones are:

AzureOpenAIChatCompletion — for Azure OpenAI Service
OpenAIChatCompletion — for OpenAI’s API directly
Embedding connectors for vector search and memory

You register these on the Kernel at startup, and everything else just works.

Setting Up Your Project

Let’s get our hands dirty. Start by creating a new console application:

dotnet new console -n SemanticKernelDemo
cd SemanticKernelDemo

Now add the Semantic Kernel NuGet packages:

dotnet add package Microsoft.SemanticKernel
dotnet add package Microsoft.SemanticKernel.Connectors.AzureOpenAI

If you’re using OpenAI directly instead of Azure OpenAI:

dotnet add package Microsoft.SemanticKernel.Connectors.OpenAI

For memory and embeddings support (we’ll use this later):

dotnet add package Microsoft.SemanticKernel.Plugins.Memory
dotnet add package Microsoft.Extensions.VectorData.Abstractions

Your .csproj should target .NET 8 or later. Semantic Kernel’s latest versions take full advantage of modern .NET features.

Your First Kernel

Let’s start with the simplest possible example — creating a Kernel, connecting it to an AI service, and asking it a question.

using Microsoft.SemanticKernel;

// Build the kernel with Azure OpenAI
var builder = Kernel.CreateBuilder();

builder.AddAzureOpenAIChatCompletion(
 deploymentName: "gpt-4o",
 endpoint: "https://your-resource.openai.azure.com/",
 apiKey: "your-api-key"
);

var kernel = builder.Build();

// Invoke a simple prompt
var result = await kernel.InvokePromptAsync(
 "Explain dependency injection in C# in three sentences."
);

Console.WriteLine(result);

If you’re using OpenAI directly, swap the service registration:

builder.AddOpenAIChatCompletion(
 modelId: "gpt-4o",
 apiKey: "your-openai-api-key"
);

That’s it. Run it, and you’ll get a concise explanation of dependency injection. But this is just scratching the surface.

Using Prompt Templates

Prompt templates let you parameterize your prompts with variables using Handlebars-style syntax:

var prompt = """
 You are a technical writer. Write a brief summary of {{$topic}}
 aimed at developers with {{$experienceLevel}} experience.
 Keep it under 200 words.
 """;

var function = kernel.CreateFunctionFromPrompt(prompt);

var arguments = new KernelArguments
{
 ["topic"] = "gRPC in .NET",
 ["experienceLevel"] = "intermediate"
};

var result = await kernel.InvokeAsync(function, arguments);
Console.WriteLine(result);

This is where Semantic Kernel starts to shine — you can define reusable prompt templates, version them, and compose them into larger workflows.

Plugins and Native Functions

Plugins are where Semantic Kernel bridges the gap between AI and your existing C# code. A native function is just a regular method that you expose to the Kernel.

using Microsoft.SemanticKernel;
using System.ComponentModel;

public class TimePlugin
{
 [KernelFunction("get_current_time")]
 [Description("Gets the current date and time in UTC")]
 public string GetCurrentTime()
 {
 return DateTime.UtcNow.ToString("yyyy-MM-dd HH:mm:ss UTC");
 }

 [KernelFunction("get_time_in_timezone")]
 [Description("Gets the current time in a specific timezone")]
 public string GetTimeInTimezone(
 [Description("The IANA timezone identifier, e.g. 'America/New_York'")] string timezone)
 {
 var tz = TimeZoneInfo.FindSystemTimeZoneById(timezone);
 var time = TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, tz);
 return time.ToString("yyyy-MM-dd HH:mm:ss");
 }
}

Notice the [KernelFunction] and [Description] attributes. These are critical — the descriptions are what the AI reads to understand when and how to call your functions. Good descriptions make the difference between an AI that uses your tools effectively and one that’s confused.

var builder = Kernel.CreateBuilder();

builder.AddAzureOpenAIChatCompletion(
 deploymentName: "gpt-4o",
 endpoint: "https://your-resource.openai.azure.com/",
 apiKey: "your-api-key"
);

builder.Plugins.AddFromType<TimePlugin>();

var kernel = builder.Build();

You can also build more complex plugins that inject services. Since Semantic Kernel integrates with Microsoft.Extensions.DependencyInjection, your plugins can receive constructor dependencies just like any other service:

public class OrderPlugin
{
 private readonly IOrderRepository _repository;

 public OrderPlugin(IOrderRepository repository)
 {
 _repository = repository;
 }

 [KernelFunction("get_order_status")]
 [Description("Retrieves the status of an order by its ID")]
 public async Task<string> GetOrderStatus(
 [Description("The order ID to look up")] string orderId)
 {
 var order = await _repository.GetByIdAsync(orderId);
 return order is null
 ? $"No order found with ID {orderId}"
 : $"Order {orderId}: {order.Status}, placed on {order.CreatedAt:d}";
 }
}

Function Calling and Auto-Invocation

This is where things get really interesting. With function calling (also known as tool calling), you let the AI model decide which of your registered functions to call based on the conversation context. The model doesn’t execute code — it returns a structured request saying “I want to call function X with these arguments,” and the Kernel handles the actual invocation.

Here’s how to enable auto function calling:

using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.Connectors.OpenAI;

var builder = Kernel.CreateBuilder();

builder.AddAzureOpenAIChatCompletion(
 deploymentName: "gpt-4o",
 endpoint: "https://your-resource.openai.azure.com/",
 apiKey: "your-api-key"
);

builder.Plugins.AddFromType<TimePlugin>();
builder.Plugins.AddFromType<WeatherPlugin>();

var kernel = builder.Build();

// Enable automatic function calling
var settings = new OpenAIPromptExecutionSettings
{
 FunctionChoiceBehavior = FunctionChoiceBehavior.Auto()
};

var result = await kernel.InvokePromptAsync(
 "What time is it in Tokyo and what's the weather like there?",
 new KernelArguments(settings)
);

Console.WriteLine(result);

With FunctionChoiceBehavior.Auto(), the Kernel will:

Send your prompt to the AI along with descriptions of all available functions
The AI decides it needs to call get_time_in_timezone and get_weather
The Kernel automatically executes those functions
The results are sent back to the AI
The AI composes a natural language response using the function results

This loop can happen multiple times in a single invocation — the AI might call several functions in sequence to gather all the information it needs. You can also use FunctionChoiceBehavior.Required() to force the AI to call at least one function, or provide a specific list of functions it’s allowed to use.

Chat Completion with History

For conversational applications, you’ll want to use the ChatCompletionService directly with a ChatHistory object:

using Microsoft.SemanticKernel.ChatCompletion;

var chatService = kernel.GetRequiredService<IChatCompletionService>();
var history = new ChatHistory();

history.AddSystemMessage("""
 You are a helpful developer assistant. You have access to tools
 for checking the time and weather. Be concise and friendly.
 """);

while (true)
{
 Console.Write("You: ");
 var input = Console.ReadLine();
 if (string.IsNullOrWhiteSpace(input)) break;

 history.AddUserMessage(input);

 var response = await chatService.GetChatMessageContentAsync(
 history,
 executionSettings: settings,
 kernel: kernel
 );

 history.AddAssistantMessage(response.Content ?? "");
 Console.WriteLine($"Assistant: {response.Content}");
}

This gives you a fully interactive chatbot that maintains conversation history and can call your plugins as needed.

Memory and Embeddings

One of the most powerful patterns in AI applications is Retrieval-Augmented Generation (RAG) — giving the AI access to your own data by embedding it into vector space and retrieving relevant chunks at query time.

Semantic Kernel provides abstractions for working with vector stores and embeddings. Here’s how to set up an in-memory vector store for development:

using Microsoft.Extensions.VectorData;
using Microsoft.SemanticKernel.Connectors.AzureOpenAI;
using Microsoft.SemanticKernel.Embeddings;

#pragma warning disable SKEXP0010

// Create an embedding generation service
var builder = Kernel.CreateBuilder();

builder.AddAzureOpenAITextEmbeddingGeneration(
 deploymentName: "text-embedding-ada-002",
 endpoint: "https://your-resource.openai.azure.com/",
 apiKey: "your-api-key"
);

var kernel = builder.Build();
var embeddingService = kernel.GetRequiredService<ITextEmbeddingGenerationService>();

// Generate embeddings for your documents
var documents = new[]
{
 "Semantic Kernel is an open-source SDK for AI orchestration.",
 "Azure OpenAI provides enterprise-grade AI models.",
 "Plugins in SK allow you to expose C# methods to AI models."
};

var embeddings = await embeddingService.GenerateEmbeddingsAsync(documents);

For production scenarios, you’d store these embeddings in a dedicated vector database like Azure AI Search, Qdrant, or Pinecone. Semantic Kernel has connectors for all of these through the Microsoft.Extensions.VectorData abstractions.

A typical RAG flow looks like this:

Ingest: Chunk your documents, generate embeddings, store them in a vector database
Retrieve: When a user asks a question, embed the query and find the most similar documents
Generate: Pass the retrieved documents as context to the LLM along with the user’s question

[KernelFunction("search_knowledge_base")]
[Description("Searches the internal knowledge base for relevant information")]
public async Task<string> SearchKnowledgeBase(
 [Description("The search query")] string query)
{
 var queryEmbedding = await _embeddingService.GenerateEmbeddingAsync(query);

 var results = await _vectorStore.SearchAsync(queryEmbedding, limit: 3);

 return string.Join("\n\n", results.Select(r => r.Text));
}

By exposing your RAG pipeline as a kernel function, the AI can automatically decide when it needs to search your knowledge base — keeping the orchestration clean and letting the model do what it does best.

Planners and Agents

As your AI applications grow more complex, you’ll need the AI to plan and execute multi-step tasks. This is where Semantic Kernel’s agent framework comes in.

The Basics: Chat Completion Agent

The simplest agent type wraps a chat completion model with instructions and plugins:

using Microsoft.SemanticKernel.Agents;

#pragma warning disable SKEXP0110

var agent = new ChatCompletionAgent
{
 Name = "DevAssistant",
 Instructions = """
 You are a senior .NET developer assistant. Help users with code
 reviews, architecture decisions, and debugging. Always provide
 code examples when relevant. Use your available tools to look up
 current information when needed.
 """,
 Kernel = kernel,
 Arguments = new KernelArguments(settings)
};

var history = new ChatHistory();

history.AddUserMessage("How should I structure a clean architecture project in .NET 8?");

await foreach (var message in agent.InvokeAsync(history))
{
 Console.WriteLine(message.Content);
 history.Add(message);
}

Multi-Agent Collaboration

Where things get really powerful is when you have multiple agents working together. Semantic Kernel supports group chat patterns where agents with different specializations collaborate:

#pragma warning disable SKEXP0110

var codeReviewer = new ChatCompletionAgent
{
 Name = "CodeReviewer",
 Instructions = """
 You review C# code for bugs, performance issues, and best practices.
 Be specific about what you find and suggest concrete fixes.
 """,
 Kernel = kernel
};

var securityAuditor = new ChatCompletionAgent
{
 Name = "SecurityAuditor",
 Instructions = """
 You focus exclusively on security vulnerabilities in code.
 Look for injection attacks, authentication issues, data exposure,
 and OWASP Top 10 violations.
 """,
 Kernel = kernel
};

var groupChat = new AgentGroupChat(codeReviewer, securityAuditor)
{
 ExecutionSettings = new AgentGroupChatSettings
 {
 TerminationStrategy = new MaximumIterationTerminationStrategy(4)
 }
};

groupChat.AddChatMessage(
 new ChatMessageContent(AuthorRole.User, "Review this code: ...")
);

await foreach (var message in groupChat.InvokeAsync())
{
 Console.WriteLine($"[{message.AuthorName}]: {message.Content}");
}

This pattern is incredibly useful for complex tasks where different perspectives or expertise areas need to weigh in. Each agent operates with its own system prompt and can have its own set of plugins.

Real-World Example: Building a Project Documentation Assistant

Let’s tie everything together with a practical example — an AI assistant that helps developers understand a codebase by reading files and answering questions.

using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.ChatCompletion;
using Microsoft.SemanticKernel.Connectors.OpenAI;
using System.ComponentModel;

// Define our plugins
public class FileSystemPlugin
{
 private readonly string _rootPath;

 public FileSystemPlugin(string rootPath)
 {
 _rootPath = rootPath;
 }

 [KernelFunction("read_file")]
 [Description("Reads the contents of a file from the project directory")]
 public async Task<string> ReadFile(
 [Description("Relative path to the file")] string path)
 {
 var fullPath = Path.Combine(_rootPath, path);

 if (!File.Exists(fullPath))
 return $"File not found: {path}";

 var content = await File.ReadAllTextAsync(fullPath);

 // Truncate very large files
 if (content.Length > 8000)
 content = content[..8000] + "\n... [truncated]";

 return content;
 }

 [KernelFunction("list_files")]
 [Description("Lists files in a directory, optionally filtered by extension")]
 public string ListFiles(
 [Description("Relative directory path")] string directory,
 [Description("File extension filter like '.cs' or '.json'")] string? extension = null)
 {
 var fullPath = Path.Combine(_rootPath, directory);

 if (!Directory.Exists(fullPath))
 return $"Directory not found: {directory}";

 var files = Directory.GetFiles(fullPath, "*.*", SearchOption.AllDirectories)
 .Select(f => Path.GetRelativePath(_rootPath, f))
 .Where(f => extension is null || f.EndsWith(extension))
 .Take(50);

 return string.Join("\n", files);
 }
}

public class DocumentationPlugin
{
 [KernelFunction("generate_summary")]
 [Description("Generates a structured markdown summary for documentation")]
 public string GenerateSummaryTemplate(
 [Description("Name of the component")] string componentName,
 [Description("Brief description")] string description,
 [Description("Key responsibilities as comma-separated values")] string responsibilities)
 {
 var items = responsibilities.Split(',', StringSplitOptions.TrimEntries);
 var bullets = string.Join("\n", items.Select(r => $"- {r}"));

 return $"""
 ## {componentName}

 {description}

 ### Responsibilities
 {bullets}

 ---
 *Generated documentation — review and expand as needed.*
 """;
 }
}

// Wire it all up
var builder = Kernel.CreateBuilder();

builder.AddAzureOpenAIChatCompletion(
 deploymentName: "gpt-4o",
 endpoint: "https://your-resource.openai.azure.com/",
 apiKey: "your-api-key"
);

builder.Plugins.AddFromObject(new FileSystemPlugin("./src"));
builder.Plugins.AddFromType<DocumentationPlugin>();

var kernel = builder.Build();

var chatService = kernel.GetRequiredService<IChatCompletionService>();
var history = new ChatHistory();

history.AddSystemMessage("""
 You are a codebase documentation assistant. You help developers understand
 projects by reading source files and explaining architecture, patterns,
 and design decisions.

 When asked about code, use your tools to read the actual files rather
 than guessing. Be specific and reference actual code when possible.
 Generate documentation artifacts when asked.
 """);

var settings = new OpenAIPromptExecutionSettings
{
 FunctionChoiceBehavior = FunctionChoiceBehavior.Auto()
};

Console.WriteLine("Documentation Assistant ready. Ask me about your codebase!");
Console.WriteLine("Type 'exit' to quit.\n");

while (true)
{
 Console.Write("You: ");
 var input = Console.ReadLine();

 if (string.IsNullOrWhiteSpace(input) || input.Equals("exit", StringComparison.OrdinalIgnoreCase))
 break;

 history.AddUserMessage(input);

 var response = await chatService.GetChatMessageContentAsync(
 history,
 executionSettings: settings,
 kernel: kernel
 );

 Console.WriteLine($"\nAssistant: {response.Content}\n");
 history.AddAssistantMessage(response.Content ?? "");
}

This assistant can:

List and read files from your project directory
Answer questions about the codebase by reading actual source files
Generate documentation in markdown format
Maintain conversation context so follow-up questions work naturally

The AI automatically decides when to call read_file, list_files, or generate_summary based on what you ask. Ask it “What does the OrderService do?” and it’ll read the file, analyze it, and explain it. Ask it to “Generate documentation for the authentication module” and it’ll explore the files, understand the structure, and produce a formatted summary.

Tips for Production

Before you ship your Semantic Kernel application, a few things I’ve learned the hard way:

Use dependency injection properly. In ASP.NET Core apps, register the Kernel and services in your DI container rather than creating them inline:

builder.Services.AddKernel()
 .AddAzureOpenAIChatCompletion(
 deploymentName: "gpt-4o",
 endpoint: configuration["AzureOpenAI:Endpoint"]!,
 apiKey: configuration["AzureOpenAI:ApiKey"]!
 )
 .Plugins.AddFromType<TimePlugin>()
 .AddFromType<OrderPlugin>();

Handle errors gracefully. LLM calls can fail, timeout, or return unexpected results. Wrap your invocations in try-catch blocks and implement retry policies with Polly or the built-in resilience features.

Monitor token usage. Every prompt, every function description, and every piece of chat history consumes tokens. Use filters to log and track usage:

kernel.FunctionInvocationFilters.Add(new LoggingFilter());

Keep your function descriptions precise. Vague descriptions lead to the AI calling functions incorrectly. Test your descriptions by asking: “If I only read the description, would I know exactly when and how to use this function?”

Conclusion

Semantic Kernel is one of those libraries that fundamentally changes how you think about building applications. It’s not just an API wrapper — it’s an orchestration framework that lets you compose AI capabilities with traditional code in a way that’s maintainable, testable, and production-ready.

What I love most about it is that it respects the .NET ecosystem. It uses patterns you already know — dependency injection, attributes, async/await, interfaces — and extends them into the AI world. You don’t have to learn a completely new paradigm; you just add AI as another capability in your toolkit.

If you’re building .NET applications and haven’t explored Semantic Kernel yet, now is the time. The SDK is stable, the community is active, and the patterns it enables — from simple prompt orchestration to multi-agent collaboration — are becoming essential skills for modern developers.

Start small. Create a Kernel, register a plugin, and watch the AI call your code. Once that clicks, you’ll start seeing opportunities to add intelligence everywhere in your applications.

The official documentation and the GitHub repository are excellent resources to continue your journey. Happy building!

Componenten overerven in Blazor

Thu, 04 Sep 2025 00:00:00 +0000

I was building a project that had a bunch of form pages, and every single one had the same loading state logic, the same error handling, and the same toast notifications. Copy-pasting all of that felt wrong, so I looked into component inheritance in Blazor. Turns out it’s pretty straightforward since Blazor components are just C# classes.

The basics

Every Blazor component inherits from ComponentBase by default. You can create your own base class that extends ComponentBase and then have your components inherit from that.

Let’s say most of our pages need loading state and error handling. We can create a base class:

using Microsoft.AspNetCore.Components;

public abstract class PageBase : ComponentBase
{
 protected bool IsLoading { get; set; } = true;
 protected string? ErrorMessage { get; set; }

 protected async Task LoadDataAsync(Func<Task> action)
 {
 try
 {
 IsLoading = true;
 ErrorMessage = null;
 await action();
 }
 catch (Exception ex)
 {
 ErrorMessage = ex.Message;
 }
 finally
 {
 IsLoading = false;
 StateHasChanged();
 }
 }
}

Using the base class

Now in any page component, instead of inheriting from ComponentBase, we inherit from our PageBase:

@page "/users"
@inherits PageBase

@if (IsLoading)
{
 <div class="spinner"></div>
}
else if (ErrorMessage is not null)
{
 <div class="alert alert-danger">@ErrorMessage</div>
}
else
{
 <ul>
 @foreach (var user in users)
 {
 <li>@user.Name</li>
 }
 </ul>
}

@code {
 private List<User> users = new();

 protected override async Task OnInitializedAsync()
 {
 await LoadDataAsync(async () =>
 {
 users = await Http.GetFromJsonAsync<List<User>>("api/users");
 });
 }
}

The @inherits PageBase directive is the key. It tells Blazor to use our base class instead of the default ComponentBase. Now we get IsLoading, ErrorMessage, and LoadDataAsync() for free in every page that inherits from it.

Injecting services in the base class

You can also inject services in the base class so they’re available to all child components:

public abstract class PageBase : ComponentBase
{
 [Inject]
 protected NavigationManager Navigation { get; set; } = default!;

 [Inject]
 protected IToastService Toast { get; set; } = default!;

 protected bool IsLoading { get; set; } = true;
 protected string? ErrorMessage { get; set; }

 protected void NavigateBack() => Navigation.NavigateTo("javascript:history.back()");

 protected void ShowSuccess(string message) => Toast.ShowSuccess(message);
}

Every component that inherits from PageBase now has access to Navigation, Toast, NavigateBack(), and ShowSuccess() without having to inject anything.

Going deeper with generic base classes

You can even make generic base classes for common CRUD patterns:

public abstract class CrudPageBase<T> : PageBase
{
 protected List<T> Items { get; set; } = new();
 protected T? SelectedItem { get; set; }

 protected abstract Task<List<T>> FetchItems();
 protected abstract Task DeleteItem(T item);

 protected override async Task OnInitializedAsync()
 {
 await LoadDataAsync(async () =>
 {
 Items = await FetchItems();
 });
 }

 protected async Task OnDelete(T item)
 {
 await LoadDataAsync(async () =>
 {
 await DeleteItem(item);
 Items = await FetchItems();
 ShowSuccess("Item deleted.");
 });
 }
}

Then your actual page becomes super clean:

@page "/products"
@inherits CrudPageBase<Product>

@* just the markup, all logic lives in the base class *@

@code {
 protected override Task<List<Product>> FetchItems()
 => Http.GetFromJsonAsync<List<Product>>("api/products");

 protected override Task DeleteItem(Product item)
 => Http.DeleteAsync($"api/products/{item.Id}");
}

When to use it and when not to

Component inheritance is great for shared behavior like loading states, error handling, authentication checks, or CRUD patterns. But don’t go overboard with deep inheritance hierarchies — if you find yourself going more than two levels deep, you’re probably better off with composition (like the LoadingComponent approach from a previous post).

I usually keep it to one base class per “type” of page: PageBase for regular pages, FormPageBase for forms, and that’s about it.

Hope you liked the post! Feel free to contact me on any social media at @emimontesdeoca.

Resources

ASP.NET Core Razor component inheritance

.NET Aspire: cloud-native applicaties op de juiste manier bouwen

Wed, 20 Aug 2025 00:00:00 +0000

If you’ve ever built a distributed application in .NET, you know the drill. You spin up a Web API, add a background worker, throw in Redis for caching, PostgreSQL for persistence, maybe RabbitMQ for messaging — and suddenly you’re spending more time wiring infrastructure than writing business logic. Connection strings scattered across appsettings.json files, health checks you forgot to configure, observability that’s always “next sprint’s problem.”

I’ve been there. More times than I’d like to admit.

That’s exactly the problem .NET Aspire was designed to solve. After running it in production for several months now, I want to share what I’ve learned — the good, the great, and the gotchas.

What Is .NET Aspire?

.NET Aspire is an opinionated stack for building observable, production-ready, distributed applications with .NET. It’s not a framework in the traditional sense — it doesn’t replace ASP.NET Core or force you into a new programming model. Instead, it sits on top of what you already know and fills the gaps that have always existed when building cloud-native apps.

At its core, Aspire gives you four things:

AppHost — A project that defines your entire distributed application topology. Which services exist, what they depend on, and how they connect.
Service Defaults — A shared project that configures cross-cutting concerns like health checks, resilience policies, and OpenTelemetry — once, for all your services.
Components — NuGet packages that provide standardized integrations with backing services like Redis, PostgreSQL, RabbitMQ, Azure Storage, and more.
Developer Dashboard — A real-time UI that shows logs, traces, and metrics for your entire distributed app during local development.

The philosophy is simple: if every .NET cloud app needs these things, why are we all implementing them from scratch every time?

Setting Up Your First Aspire Project

Getting started is straightforward. You’ll need .NET 8 or later and the Aspire workload installed:

dotnet workload update
dotnet workload install aspire

Now create a new Aspire starter project:

dotnet new aspire-starter -n MyCloudApp

This generates a solution with four projects:

MyCloudApp.AppHost — The orchestrator
MyCloudApp.ServiceDefaults — Shared configuration
MyCloudApp.ApiService — A sample Web API
MyCloudApp.Web — A Blazor frontend

Run the AppHost and you’ll immediately see the Aspire dashboard open in your browser, showing all your services, their logs, and their health. No Docker Compose file. No manual port management. It just works.

dotnet run --project MyCloudApp.AppHost

That first experience is what hooked me. In under a minute, you have a fully orchestrated distributed app with observability baked in.

The AppHost Pattern

The AppHost is where the magic lives. It’s a small console application that uses a builder pattern to define your distributed application’s topology — what resources exist and how services connect to them.

Here’s what a realistic AppHost looks like:

var builder = DistributedApplication.CreateBuilder(args);

// Infrastructure resources
var postgres = builder.AddPostgres("postgres")
 .WithPgAdmin()
 .AddDatabase("catalogdb");

var redis = builder.AddRedis("cache");

var rabbitmq = builder.AddRabbitMQ("messaging")
 .WithManagementPlugin();

// Application services
var catalogApi = builder.AddProject<Projects.CatalogApi>("catalog-api")
 .WithReference(postgres)
 .WithReference(redis)
 .WithReference(rabbitmq);

var orderApi = builder.AddProject<Projects.OrderApi>("order-api")
 .WithReference(postgres)
 .WithReference(rabbitmq);

var frontend = builder.AddProject<Projects.WebFrontend>("frontend")
 .WithExternalHttpEndpoints()
 .WithReference(catalogApi)
 .WithReference(orderApi);

builder.Build().Run();

Read that code out loud. It practically documents itself. “The catalog API references PostgreSQL, Redis, and RabbitMQ. The frontend references the catalog API and order API.” That’s your architecture, expressed in code.

A few things worth noting:

WithReference does the heavy lifting. It automatically injects connection strings and service URLs into the consuming project via environment variables and configuration. Your services don’t need to know where Redis is running — Aspire handles it.
WithPgAdmin() and WithManagementPlugin() spin up admin UIs for PostgreSQL and RabbitMQ alongside the actual services. During development, these are invaluable.
WithExternalHttpEndpoints() marks a service as externally accessible, which matters at deployment time.

Resource Configuration

You can configure resources with fine-grained control:

var postgres = builder.AddPostgres("postgres")
 .WithEnvironment("POSTGRES_MAX_CONNECTIONS", "200")
 .WithDataVolume("postgres-data")
 .AddDatabase("catalogdb");

var redis = builder.AddRedis("cache")
 .WithDataVolume("redis-data");

Data volumes ensure your local development data survives container restarts. Small detail, big quality-of-life improvement.

Service Defaults: The Unsung Hero

The ServiceDefaults project is the most underrated part of Aspire. It’s a shared library that every service in your solution references, and it configures all the cross-cutting concerns you’d otherwise forget or implement inconsistently.

Here’s what a typical Extensions.cs in ServiceDefaults looks like:

public static class Extensions
{
 public static IHostApplicationBuilder AddServiceDefaults(
 this IHostApplicationBuilder builder)
 {
 builder.ConfigureOpenTelemetry();
 builder.AddDefaultHealthChecks();
 builder.Services.AddServiceDiscovery();

 builder.Services.ConfigureHttpClientDefaults(http =>
 {
 http.AddStandardResilienceHandler();
 http.AddServiceDiscovery();
 });

 return builder;
 }

 public static IHostApplicationBuilder ConfigureOpenTelemetry(
 this IHostApplicationBuilder builder)
 {
 builder.Logging.AddOpenTelemetry(logging =>
 {
 logging.IncludeFormattedMessage = true;
 logging.IncludeScopes = true;
 });

 builder.Services.AddOpenTelemetry()
 .WithMetrics(metrics =>
 {
 metrics.AddAspNetCoreInstrumentation()
 .AddHttpClientInstrumentation()
 .AddRuntimeInstrumentation();
 })
 .WithTracing(tracing =>
 {
 tracing.AddAspNetCoreInstrumentation()
 .AddHttpClientInstrumentation()
 .AddGrpcClientInstrumentation();
 });

 builder.AddOpenTelemetryExporters();
 return builder;
 }

 public static IHostApplicationBuilder AddDefaultHealthChecks(
 this IHostApplicationBuilder builder)
 {
 builder.Services.AddHealthChecks()
 .AddCheck("self", () => HealthCheckResult.Healthy(),
 ["live"]);

 return builder;
 }
}

Then in each service’s Program.cs, one line does it all:

var builder = WebApplication.CreateBuilder(args);
builder.AddServiceDefaults();

// Your service-specific configuration...

var app = builder.Build();
app.MapDefaultEndpoints();
app.Run();

That single AddServiceDefaults() call gives you:

OpenTelemetry with structured logging, metrics, and distributed tracing
Health checks with liveness and readiness endpoints
Service discovery so services can find each other by name
Resilience policies on all outgoing HTTP calls (retries, circuit breakers, timeouts)

This is the stuff that separates a “works on my machine” demo from a production-ready system. And Aspire makes it the default, not an afterthought.

Aspire Components

Aspire components are NuGet packages that standardize how your services connect to backing infrastructure. They’re more than just client libraries — they include health checks, logging, tracing, and configurable resilience out of the box.

Redis

var builder = WebApplication.CreateBuilder(args);
builder.AddServiceDefaults();
builder.AddRedisDistributedCache("cache");

That’s it. The connection string comes from the AppHost via WithReference. The component registers an IDistributedCache backed by Redis, with health checks and OpenTelemetry instrumentation already wired up.

You can also use Redis for output caching:

builder.AddRedisOutputCache("cache");

PostgreSQL with Entity Framework Core

builder.AddNpgsqlDbContext<CatalogDbContext>("catalogdb", settings =>
{
 settings.DisableRetry = false;
});

This registers your DbContext with a connection to the catalogdb database defined in the AppHost. It includes connection pooling, health checks, and retry policies.

RabbitMQ

builder.AddRabbitMQClient("messaging");

Registers an IConnection from the RabbitMQ client library, fully configured and health-checked.

Azure Integrations

Aspire also has first-class components for Azure services:

// Azure Blob Storage
builder.AddAzureBlobClient("blobs");

// Azure Service Bus
builder.AddAzureServiceBusClient("servicebus");

// Azure Key Vault
builder.AddAzureKeyVaultClient("secrets");

The pattern is always the same: one line in the AppHost to define the resource, one line in the consuming service to use it. Connection details flow automatically.

The Developer Dashboard

The Aspire dashboard is one of those features that seems like a nice-to-have until you actually use it — then you can’t imagine working without it.

When you run your AppHost locally, the dashboard launches and gives you:

Resource overview — All your services and infrastructure at a glance, with status indicators
Structured logs — Real-time log streaming from every service, filterable and searchable
Distributed traces — End-to-end request traces spanning multiple services, visualized as flame charts
Metrics — HTTP request rates, error rates, latencies, and custom metrics in real-time
Console logs — Raw stdout/stderr from each container and project

The distributed tracing is particularly valuable. When a request hits your frontend, flows through the catalog API, touches Redis and PostgreSQL — you see the entire chain with timing for each hop. No more guessing where the bottleneck is.

I’ve found the dashboard most useful during debugging. Instead of tailing multiple terminal windows or jumping between log files, everything is in one place with correlation IDs linking related events across services.

The dashboard is also available as a standalone container, which means you can use it in staging environments or CI pipelines:

docker run --rm -p 18888:18888 \
 mcr.microsoft.com/dotnet/aspire-dashboard:latest

Deployment

Aspire helps during development, but what about production? This is where things get practical.

Azure Container Apps

The most straightforward deployment path is Azure Container Apps (ACA), which has first-class Aspire support. You can deploy directly using the Azure Developer CLI:

azd init
azd up

The azd init command detects your Aspire AppHost and generates the necessary infrastructure-as-code. azd up provisions everything — container registry, container apps, databases, Redis instances — based on your AppHost topology.

Your AppHost essentially becomes your deployment manifest. The same code that defines “catalog-api depends on PostgreSQL and Redis” drives the infrastructure provisioning.

Kubernetes

For Kubernetes deployments, Aspire doesn’t generate manifests directly, but your AppHost topology maps cleanly to Kubernetes resources. The community tool aspirate (Aspir8) can generate Helm charts or Kubernetes manifests from your AppHost:

dotnet tool install -g aspirate
aspirate generate
aspirate apply

Deployment Considerations

A few things to keep in mind:

Connection strings change between environments. Locally, Aspire spins up containers and injects connection strings automatically. In production, you’ll point to managed services. Aspire uses standard .NET configuration, so environment variables and Azure Key Vault work as expected.
The AppHost doesn’t run in production. It’s a development and deployment orchestration tool. In production, your services run independently, configured through environment variables and orchestrators.
Infrastructure resources become managed services. Your local PostgreSQL container becomes Azure Database for PostgreSQL. Your local Redis container becomes Azure Cache for Redis. The consuming code doesn’t change.

Real-World Tips

After running Aspire in production for a while, here are the lessons that saved us time:

1. Use Custom Resource Lifecycle Checks

Don’t just rely on container startup to determine if a resource is ready. PostgreSQL might accept TCP connections before it’s actually ready to serve queries.

var postgres = builder.AddPostgres("postgres")
 .AddDatabase("catalogdb")
 .WithHealthCheck();

Aspire can run health checks against resources and hold dependent services until they’re actually ready.

2. Extract Common Patterns Into Extensions

If multiple services share similar configurations, create extension methods:

public static class AppHostExtensions
{
 public static IResourceBuilder<ProjectResource> AddWorkerService(
 this IDistributedApplicationBuilder builder,
 string name,
 IResourceBuilder<IResourceWithConnectionString> db,
 IResourceBuilder<IResourceWithConnectionString> messaging)
 {
 return builder.AddProject<Projects.WorkerService>(name)
 .WithReference(db)
 .WithReference(messaging)
 .WithReplicas(3);
 }
}

3. Leverage WithReplicas for Load Testing

var catalogApi = builder.AddProject<Projects.CatalogApi>("catalog-api")
 .WithReference(postgres)
 .WithReference(redis)
 .WithReplicas(5);

WithReplicas spins up multiple instances of a service locally. This is great for testing load balancing, concurrency bugs, and distributed caching behavior without deploying to a cluster.

4. Use Parameters for Sensitive Values

Don’t hardcode credentials, even for local development:

var dbPassword = builder.AddParameter("db-password", secret: true);

var postgres = builder.AddPostgres("postgres", password: dbPassword)
 .AddDatabase("catalogdb");

When running locally, Aspire will prompt for the value or read it from user secrets. In CI/CD, it comes from environment variables.

5. Integration Tests Become Trivial

Aspire includes a testing package that makes integration testing distributed apps remarkably easy:

[Fact]
public async Task CatalogApiReturnsProducts()
{
 var appHost = await DistributedApplicationTestingBuilder
 .CreateAsync<Projects.MyCloudApp_AppHost>();

 await using var app = await appHost.BuildAsync();
 await app.StartAsync();

 var httpClient = app.CreateHttpClient("catalog-api");
 var response = await httpClient.GetAsync("/api/products");

 response.EnsureSuccessStatusCode();

 var products = await response.Content
 .ReadFromJsonAsync<List<Product>>();
 Assert.NotEmpty(products);
}

This spins up your entire distributed application — including databases and message brokers — runs your test against it, and tears it down. Real integration tests against real infrastructure, in your CI pipeline. No mocks.

6. Monitor Resource Usage Locally

When running multiple containers locally, keep an eye on resource consumption. A PostgreSQL, Redis, and RabbitMQ instance with management UI can easily consume 2-3 GB of RAM. If you’re on a constrained machine, consider using lighter resource configurations:

var redis = builder.AddRedis("cache")
 .WithContainerRuntimeArgs("--memory=256m");

Conclusion

.NET Aspire has fundamentally changed how I build distributed applications. Not because it introduces revolutionary concepts — health checks, OpenTelemetry, and container orchestration aren’t new. But because it makes them default. It takes the hundred small decisions you’d normally have to make, implements them with sensible defaults, and lets you override when needed.

The AppHost pattern is, in my opinion, the biggest win. Having your distributed application topology expressed as code — not scattered across Docker Compose files, Kubernetes manifests, and README documents — makes the system comprehensible. New team members can open Program.cs in the AppHost and understand the entire architecture in minutes.

If you’re building distributed applications with .NET, give Aspire a serious look. Start with the aspire-starter template, explore the dashboard, and gradually adopt components as you need them. You don’t have to go all-in on day one — Aspire is additive by design.

The days of spending your first sprint wiring up infrastructure boilerplate are over. Let Aspire handle the plumbing so you can focus on what actually matters: your application.

Authenticatie en autorisatie in Blazor: een praktische gids

Sat, 12 Jul 2025 00:00:00 +0000

If you’ve worked with ASP.NET MVC or Razor Pages, you probably have a mental model for how authentication works: middleware intercepts the request, checks a cookie or token, populates HttpContext.User, and you’re off to the races. Blazor changes that mental model in ways that are subtle but important — and if you don’t understand those differences early, you’ll end up debugging auth issues that feel impossible.

In this post, I want to walk through how authentication and authorization actually work in Blazor, covering both Server and WebAssembly hosting models. We’ll go from the fundamentals all the way through custom providers, external OAuth, and the pitfalls I’ve seen trip up even experienced .NET developers.

Why Auth in Blazor Is Different

In traditional ASP.NET, every user interaction is an HTTP request. The server validates credentials, sets a cookie, and every subsequent request carries that cookie. The auth pipeline is linear and predictable.

Blazor Server operates over a persistent SignalR connection. After the initial HTTP request loads the page, all subsequent interactions happen over WebSockets. There’s no new HTTP request for each button click, so middleware doesn’t re-execute on every interaction. The HttpContext is available during the initial connection, but relying on it throughout the lifetime of a circuit is a recipe for bugs.

Blazor WebAssembly runs entirely in the browser. There’s no server-side HttpContext at all. Authentication state must be fetched from an API, stored client-side, and managed through tokens — typically JWTs. The server trusts the client only as far as the token validation goes.

This means Blazor needs its own abstraction for authentication state, one that works regardless of hosting model. That abstraction is the AuthenticationStateProvider.

Authentication State: The Foundation

At the heart of Blazor’s auth system is AuthenticationStateProvider. This is an abstract class that exposes a single critical method:

public abstract Task<AuthenticationState> GetAuthenticationStateAsync();

The AuthenticationState object wraps a ClaimsPrincipal — the same identity model used throughout .NET. Components don’t talk to cookies or tokens directly; they ask the AuthenticationStateProvider for the current state.

To make this state available to your entire component tree, Blazor provides CascadingAuthenticationState. You typically wrap your router with it in App.razor or your layout:

<CascadingAuthenticationState>
 <Router AppAssembly="@typeof(App).Assembly">
 <Found Context="routeData">
 <AuthorizeRouteView RouteData="@routeData"
 DefaultLayout="@typeof(MainLayout)">
 <NotAuthorized>
 <p>You're not authorized to view this page.</p>
 </NotAuthorized>
 </AuthorizeRouteView>
 </Found>
 <NotFound>
 <LayoutView Layout="@typeof(MainLayout)">
 <p>Page not found.</p>
 </LayoutView>
 </NotFound>
 </Router>
</CascadingAuthenticationState>

The AuthorizeRouteView is doing double duty here: it checks whether the user is authenticated and authorized before rendering the matched page component, and it provides a fallback UI when they’re not.

In .NET 8 and later with the unified Blazor model, you’ll configure this in your App.razor and the framework handles the cascading parameter automatically when you use AddCascadingAuthenticationState() in your service registration.

ASP.NET Identity Integration

For most projects, you don’t need to build auth from scratch. ASP.NET Identity gives you user management, password hashing, two-factor authentication, and account confirmation out of the box.

Setting it up with Blazor starts in Program.cs:

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

builder.Services.AddDefaultIdentity<IdentityUser>(options =>
 {
 options.SignIn.RequireConfirmedAccount = true;
 options.Password.RequireDigit = true;
 options.Password.RequiredLength = 8;
 })
 .AddRoles<IdentityRole>()
 .AddEntityFrameworkStores<ApplicationDbContext>();

builder.Services.AddAuthentication(options =>
 {
 options.DefaultScheme = IdentityConstants.ApplicationScheme;
 options.DefaultSignInScheme = IdentityConstants.ExternalScheme;
 });

With the Blazor Web App template in .NET 8+, the scaffolded Identity UI uses Razor components directly. You get login, registration, and account management pages that integrate naturally with the rest of your Blazor application — no more awkward mix of Razor Pages and Blazor components.

The ApplicationDbContext inherits from IdentityDbContext and you’ll need to run migrations to create the identity tables:

public class ApplicationDbContext : IdentityDbContext<IdentityUser>
{
 public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
 : base(options) { }
}

dotnet ef migrations add InitialIdentity
dotnet ef database update

The AuthorizeView Component

Once authentication state is flowing through your component tree, AuthorizeView lets you conditionally render UI:

<AuthorizeView>
 <Authorized>
 <p>Welcome, @context.User.Identity?.Name!</p>
 <a href="/account/manage">Manage Account</a>
 <form method="post" action="/account/logout">
 <button type="submit">Log Out</button>
 </form>
 </Authorized>
 <NotAuthorized>
 <a href="/account/login">Log In</a>
 <a href="/account/register">Register</a>
 </NotAuthorized>
</AuthorizeView>

The context parameter inside <Authorized> gives you access to the AuthenticationState, so you can inspect claims, roles, and the user’s identity directly in your markup.

You can also use AuthorizeView with roles and policies:

<AuthorizeView Roles="Admin,Moderator">
 <Authorized>
 <button @onclick="DeletePost">Delete Post</button>
 </Authorized>
</AuthorizeView>

<AuthorizeView Policy="CanEditArticles">
 <Authorized>
 <button @onclick="EditArticle">Edit</button>
 </Authorized>
</AuthorizeView>

One thing to keep in mind: AuthorizeView is a UI concern. It hides or shows elements, but it doesn’t protect the underlying logic. If someone can call your API endpoint or invoke your method directly, they bypass AuthorizeView entirely. Always enforce authorization on the server side too.

The [Authorize] Attribute

To protect an entire page, apply the [Authorize] attribute:

@page "/admin/dashboard"
@attribute [Authorize(Roles = "Admin")]

<h1>Admin Dashboard</h1>
<p>Only administrators can see this page.</p>

When an unauthenticated user navigates to this page, the AuthorizeRouteView kicks in and renders the <NotAuthorized> template you defined earlier. You can redirect to a login page instead by handling the NotAuthorized case with navigation:

<NotAuthorized>
 @if (!context.User.Identity?.IsAuthenticated ?? true)
 {
 <RedirectToLogin />
 }
 else
 {
 <p>You don't have permission to access this page.</p>
 }
</NotAuthorized>

A simple RedirectToLogin component might look like:

@inject NavigationManager Navigation

@code {
 protected override void OnInitialized()
 {
 var returnUrl = Uri.EscapeDataString(Navigation.Uri);
 Navigation.NavigateTo($"/account/login?returnUrl={returnUrl}", forceLoad: true);
 }
}

The forceLoad: true is important here — you want an actual HTTP navigation so the server-side auth middleware can handle the login flow properly.

Role-Based and Policy-Based Authorization

Roles are the simplest model: assign users to groups like “Admin” or “Editor,” then check membership. But policies give you much more flexibility.

builder.Services.AddAuthorizationCore(options =>
{
 options.AddPolicy("CanPublish", policy =>
 policy.RequireClaim("Permission", "Publish"));

 options.AddPolicy("MinimumAge", policy =>
 policy.Requirements.Add(new MinimumAgeRequirement(18)));

 options.AddPolicy("PremiumUser", policy =>
 policy.RequireRole("Premium")
 .RequireClaim("Subscription", "Active"));
});

Custom requirements need a handler:

public class MinimumAgeRequirement : IAuthorizationRequirement
{
 public int MinimumAge { get; }
 public MinimumAgeRequirement(int minimumAge) => MinimumAge = minimumAge;
}

public class MinimumAgeHandler : AuthorizationHandler<MinimumAgeRequirement>
{
 protected override Task HandleRequirementAsync(
 AuthorizationHandlerContext context,
 MinimumAgeRequirement requirement)
 {
 var dateOfBirthClaim = context.User.FindFirst("DateOfBirth");

 if (dateOfBirthClaim is null)
 return Task.CompletedTask;

 var dateOfBirth = DateOnly.Parse(dateOfBirthClaim.Value);
 var age = DateOnly.FromDateTime(DateTime.Today).Year - dateOfBirth.Year;

 if (age >= requirement.MinimumAge)
 context.Succeed(requirement);

 return Task.CompletedTask;
 }
}

builder.Services.AddSingleton<IAuthorizationHandler, MinimumAgeHandler>();

In components, you can also check authorization programmatically when you need dynamic logic:

@inject IAuthorizationService AuthorizationService
@inject AuthenticationStateProvider AuthStateProvider

@code {
 private bool canPublish;

 protected override async Task OnInitializedAsync()
 {
 var authState = await AuthStateProvider.GetAuthenticationStateAsync();
 var result = await AuthorizationService.AuthorizeAsync(
 authState.User, "CanPublish");
 canPublish = result.Succeeded;
 }
}

External OAuth Providers

Supporting “Sign in with Google” or “Sign in with GitHub” is straightforward with the ASP.NET authentication middleware. These are configured server-side since the OAuth flow requires HTTP redirects.

builder.Services.AddAuthentication()
 .AddGoogle(options =>
 {
 options.ClientId = builder.Configuration["Auth:Google:ClientId"]!;
 options.ClientSecret = builder.Configuration["Auth:Google:ClientSecret"]!;
 options.Scope.Add("profile");
 })
 .AddMicrosoftAccount(options =>
 {
 options.ClientId = builder.Configuration["Auth:Microsoft:ClientId"]!;
 options.ClientSecret = builder.Configuration["Auth:Microsoft:ClientSecret"]!;
 })
 .AddGitHub(options =>
 {
 options.ClientId = builder.Configuration["Auth:GitHub:ClientId"]!;
 options.ClientSecret = builder.Configuration["Auth:GitHub:ClientSecret"]!;
 });

For GitHub, you’ll need the AspNet.Security.OAuth.GitHub NuGet package, as it’s not included in the default ASP.NET libraries.

The login UI then provides links that trigger the external challenge:

@page "/account/external-login"

<h2>Sign in with an external provider</h2>

<form method="post" action="/api/auth/external-login">
 <button type="submit" name="provider" value="Google">
 Sign in with Google
 </button>
 <button type="submit" name="provider" value="Microsoft">
 Sign in with Microsoft
 </button>
 <button type="submit" name="provider" value="GitHub">
 Sign in with GitHub
 </button>
</form>

The API endpoint triggers the challenge and handles the callback:

app.MapPost("/api/auth/external-login", (string provider, HttpContext context) =>
{
 var properties = new AuthenticationProperties
 {
 RedirectUri = "/api/auth/external-callback"
 };
 return Results.Challenge(properties, [provider]);
});

External auth in Blazor always requires a full page navigation — you can’t complete an OAuth redirect inside a SignalR circuit or a WebAssembly app without going through the server.

Token-Based Auth in Blazor WebAssembly

Blazor WebAssembly runs on the client, so cookie-based auth doesn’t apply in the same way. Instead, you typically use JWTs stored in memory and attached to outgoing HTTP requests.

The framework provides AuthorizationMessageHandler to attach tokens automatically:

builder.Services.AddHttpClient("API",
 client => client.BaseAddress = new Uri("https://api.example.com"))
 .AddHttpMessageHandler<AuthorizationMessageHandler>();

builder.Services.AddScoped(sp =>
 sp.GetRequiredService<IHttpClientFactory>().CreateClient("API"));

For standalone Blazor WASM apps that authenticate against their own API, you’ll implement a custom AuthenticationStateProvider that parses the JWT:

public class JwtAuthenticationStateProvider : AuthenticationStateProvider
{
 private readonly ILocalStorageService _localStorage;
 private readonly HttpClient _httpClient;

 public JwtAuthenticationStateProvider(
 ILocalStorageService localStorage,
 HttpClient httpClient)
 {
 _localStorage = localStorage;
 _httpClient = httpClient;
 }

 public override async Task<AuthenticationState> GetAuthenticationStateAsync()
 {
 var token = await _localStorage.GetItemAsync<string>("authToken");

 if (string.IsNullOrWhiteSpace(token))
 return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));

 _httpClient.DefaultRequestHeaders.Authorization =
 new AuthenticationHeaderValue("Bearer", token);

 var claims = ParseClaimsFromJwt(token);
 var identity = new ClaimsIdentity(claims, "jwt");

 return new AuthenticationState(new ClaimsPrincipal(identity));
 }

 public void NotifyAuthStateChanged()
 {
 NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
 }

 private IEnumerable<Claim> ParseClaimsFromJwt(string jwt)
 {
 var payload = jwt.Split('.')[1];

 var padded = payload.Length % 4 switch
 {
 2 => payload + "==",
 3 => payload + "=",
 _ => payload
 };

 var bytes = Convert.FromBase64String(padded);
 var json = JsonSerializer.Deserialize<Dictionary<string, JsonElement>>(bytes);

 return json?.Select(kvp => new Claim(kvp.Key, kvp.Value.ToString()))
 ?? Enumerable.Empty<Claim>();
 }
}

After a successful login, you store the token and notify the auth state:

public class AuthService
{
 private readonly HttpClient _httpClient;
 private readonly ILocalStorageService _localStorage;
 private readonly JwtAuthenticationStateProvider _authStateProvider;

 public AuthService(
 HttpClient httpClient,
 ILocalStorageService localStorage,
 AuthenticationStateProvider authStateProvider)
 {
 _httpClient = httpClient;
 _localStorage = localStorage;
 _authStateProvider = (JwtAuthenticationStateProvider)authStateProvider;
 }

 public async Task<bool> LoginAsync(string email, string password)
 {
 var response = await _httpClient.PostAsJsonAsync("/api/auth/login",
 new { Email = email, Password = password });

 if (!response.IsSuccessStatusCode)
 return false;

 var result = await response.Content
 .ReadFromJsonAsync<LoginResponse>();

 await _localStorage.SetItemAsync("authToken", result!.Token);
 _authStateProvider.NotifyAuthStateChanged();

 return true;
 }

 public async Task LogoutAsync()
 {
 await _localStorage.RemoveItemAsync("authToken");
 _authStateProvider.NotifyAuthStateChanged();
 }
}

A word of caution: storing JWTs in localStorage exposes them to XSS attacks. For higher-security applications, consider keeping tokens in memory only and using refresh tokens, or adopting the Backend-for-Frontend (BFF) pattern where the server manages tokens and the client uses HTTP-only cookies.

Blazor Server vs. WebAssembly: Security Considerations

The hosting model fundamentally changes your security posture.

Blazor Server keeps all your component logic on the server. The client only sees rendered HTML diffs over SignalR. This means:

Sensitive logic never leaves the server
You can access databases and internal services directly from components
Authentication state comes from the server’s HttpContext on initial connection
The circuit can outlive the auth cookie — if a user’s cookie expires, the circuit stays alive until disconnected
You should handle circuit disconnection gracefully and re-validate auth state on reconnection

Blazor WebAssembly runs entirely in the browser. This means:

All your component code is downloadable and inspectable
Never put secrets, connection strings, or sensitive business logic in WASM components
Auth is only enforced on the client for UX; the real enforcement must happen at your API layer
Token management is your responsibility
Consider using the hosted model where a server project handles auth and serves the WASM app

A pattern I recommend for WebAssembly apps is to treat every component as if it’s “untrusted UI” and every API endpoint as if it’s being called by an unknown client. Validate everything server-side regardless of what the client checks.

Building a Custom AuthenticationStateProvider

Sometimes the built-in providers don’t fit your architecture. Maybe you’re integrating with a legacy auth system, or you need to poll for auth state changes. Here’s a more complete custom provider for Blazor Server:

public class CustomAuthStateProvider : AuthenticationStateProvider
{
 private readonly IHttpContextAccessor _httpContextAccessor;
 private readonly IUserService _userService;

 public CustomAuthStateProvider(
 IHttpContextAccessor httpContextAccessor,
 IUserService userService)
 {
 _httpContextAccessor = httpContextAccessor;
 _userService = userService;
 }

 public override async Task<AuthenticationState> GetAuthenticationStateAsync()
 {
 var httpContext = _httpContextAccessor.HttpContext;

 if (httpContext?.User?.Identity?.IsAuthenticated != true)
 return new AuthenticationState(
 new ClaimsPrincipal(new ClaimsIdentity()));

 var userId = httpContext.User.FindFirstValue(ClaimTypes.NameIdentifier);

 if (userId is null)
 return new AuthenticationState(
 new ClaimsPrincipal(new ClaimsIdentity()));

 var user = await _userService.GetUserWithClaimsAsync(userId);

 if (user is null)
 return new AuthenticationState(
 new ClaimsPrincipal(new ClaimsIdentity()));

 var claims = new List<Claim>
 {
 new(ClaimTypes.NameIdentifier, user.Id),
 new(ClaimTypes.Name, user.DisplayName),
 new(ClaimTypes.Email, user.Email)
 };

 claims.AddRange(user.Roles.Select(r => new Claim(ClaimTypes.Role, r)));
 claims.AddRange(user.Permissions.Select(p => new Claim("Permission", p)));

 var identity = new ClaimsIdentity(claims, "Custom");
 return new AuthenticationState(new ClaimsPrincipal(identity));
 }

 public void MarkUserAsAuthenticated(string userId)
 {
 NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
 }

 public void MarkUserAsLoggedOut()
 {
 var anonymous = new ClaimsPrincipal(new ClaimsIdentity());
 var authState = Task.FromResult(new AuthenticationState(anonymous));
 NotifyAuthenticationStateChanged(authState);
 }
}

builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();
builder.Services.AddScoped<CustomAuthStateProvider>();

The key insight here is NotifyAuthenticationStateChanged — calling it triggers the cascading parameter to update, which re-evaluates every AuthorizeView and AuthorizeRouteView in your component tree. This is how you make the UI react to login/logout events without a full page refresh.

Common Pitfalls and Solutions

After working with Blazor auth across many projects, here are the issues I see most often:

1. Using HttpContext in Blazor Server Components

HttpContext is available during the initial HTTP request, but it’s null or stale during SignalR interactions. Don’t inject IHttpContextAccessor into components that run after the initial render.

Solution: Capture what you need from HttpContext during initialization and store it in a scoped service:

public class UserContext
{
 public string? UserId { get; set; }
 public string? AccessToken { get; set; }
}

// In a component that renders during the initial HTTP request:
@inject IHttpContextAccessor HttpContextAccessor
@inject UserContext UserContext

@code {
 protected override void OnInitialized()
 {
 var context = HttpContextAccessor.HttpContext;
 UserContext.UserId = context?.User.FindFirstValue(ClaimTypes.NameIdentifier);
 UserContext.AccessToken = context?.Request.Headers.Authorization
 .ToString().Replace("Bearer ", "");
 }
}

You call your login API, it succeeds, but the UI still shows “Log In.”

Solution: You must call NotifyAuthenticationStateChanged on your AuthenticationStateProvider after the auth state changes. The framework doesn’t magically detect that a token was stored or a cookie was set.

3. Authorize Attribute Not Working on Components

You add [Authorize] to a component but it doesn’t block unauthenticated users.

Solution: Make sure you’re using AuthorizeRouteView instead of plain RouteView in your App.razor. The standard RouteView ignores authorization attributes entirely.

4. Prerendering Breaks Auth State

During server-side prerendering in Blazor WebAssembly, there’s no auth token available. Components render as unauthenticated, then flicker to authenticated state after WASM loads.

Solution: Either disable prerendering for auth-sensitive pages with @rendermode InteractiveWebAssembly (without prerender), or handle the loading state gracefully:

<AuthorizeView>
 <Authorized>
 <p>Welcome back, @context.User.Identity?.Name</p>
 </Authorized>
 <Authorizing>
 <p>Loading...</p>
 </Authorizing>
 <NotAuthorized>
 <a href="/login">Sign in</a>
 </NotAuthorized>
</AuthorizeView>

5. Token Expiration in Long-Running Circuits

Blazor Server circuits can stay alive for hours. If your token or session expires, the user stays “authenticated” in the UI but API calls start failing.

Solution: Implement a periodic check or use a RevalidatingServerAuthenticationStateProvider:

public class RevalidatingAuthStateProvider
 : RevalidatingServerAuthenticationStateProvider
{
 private readonly IServiceScopeFactory _scopeFactory;

 public RevalidatingAuthStateProvider(
 ILoggerFactory loggerFactory,
 IServiceScopeFactory scopeFactory)
 : base(loggerFactory)
 {
 _scopeFactory = scopeFactory;
 }

 protected override TimeSpan RevalidationInterval => TimeSpan.FromMinutes(30);

 protected override async Task<bool> ValidateAuthenticationStateAsync(
 AuthenticationState authenticationState, CancellationToken cancellationToken)
 {
 await using var scope = _scopeFactory.CreateAsyncScope();
 var userManager = scope.ServiceProvider
 .GetRequiredService<UserManager<IdentityUser>>();

 var user = await userManager.GetUserAsync(authenticationState.User);
 return user is not null;
 }
}

This validates the user still exists (and their security stamp hasn’t changed) every 30 minutes.

Conclusion

Authentication and authorization in Blazor require a shift in thinking from traditional request-response ASP.NET. The AuthenticationStateProvider abstraction is the key to understanding how it all fits together — once you internalize that, the rest follows naturally.

For most applications, start with ASP.NET Identity and the built-in templates. They handle the heavy lifting of user management, password hashing, and token generation. Layer on policies and claims-based authorization as your requirements grow. Add external OAuth providers when your users expect them.

The hosting model matters: Blazor Server gives you a more traditional security posture where code stays on the server, while WebAssembly pushes you toward API-first thinking where the client is untrusted by design. Neither is inherently more secure — they just have different threat models.

Whatever approach you choose, remember the golden rule: authorization in the UI is for user experience, authorization on the server is for security. Always enforce both.

Geïsoleerd JavaScript in Blazor met gecolloceerde JS-bestanden

Wed, 18 Jun 2025 00:00:00 +0000

If you’ve worked with Blazor and JS Interop before, you’ve probably ended up with a massive app.js file full of random functions for different components. It works, but it gets messy fast. Luckily there’s a much cleaner approach: collocated JavaScript files.

The idea

Just like CSS isolation, Blazor lets you place a .razor.js file next to your component. The JavaScript module gets loaded on demand, only when the component actually needs it. No global scripts, no pollution.

Setting it up

Let’s say we have a Clipboard.razor component that copies text to the clipboard. Create a file called Clipboard.razor.js right next to it:

export function copyToClipboard(text) {
 navigator.clipboard.writeText(text).then(() => {
 console.log("Copied to clipboard!");
 });
}

Notice the export keyword — this is important. Blazor loads it as a standard ES module.

Loading the module in Blazor

In your component, you use IJSRuntime to import the module. The path follows a convention: ./_content/{ASSEMBLY_NAME}/{COMPONENT_PATH}.razor.js for libraries, or just the relative path for the current project.

@inject IJSRuntime JS
@implements IAsyncDisposable

<button @onclick="Copy">Copy to clipboard</button>

@code {
 [Parameter]
 public string Text { get; set; }

 private IJSObjectReference? module;

 protected override async Task OnAfterRenderAsync(bool firstRender)
 {
 if (firstRender)
 {
 module = await JS.InvokeAsync<IJSObjectReference>(
 "import", "./Components/Clipboard.razor.js");
 }
 }

 private async Task Copy()
 {
 if (module is not null)
 {
 await module.InvokeVoidAsync("copyToClipboard", Text);
 }
 }

 public async ValueTask DisposeAsync()
 {
 if (module is not null)
 {
 await module.DisposeAsync();
 }
 }
}

A few things to note here:

We load the module in OnAfterRenderAsync because JS Interop isn’t available during server-side prerendering
We keep a reference to the module with IJSObjectReference
We implement IAsyncDisposable to clean up the module when the component is destroyed

Why this is better

Before, I used to dump everything into a single wwwroot/js/app.js. It worked, but finding functions was a pain, and every page loaded JavaScript it didn’t need. With collocated JS files:

Each component owns its own JavaScript
Modules are loaded lazily, only when needed
No global function name conflicts
Easier to maintain and delete — when you delete the component, you delete the JS with it

A gotcha with the path

The path you pass to import depends on whether you’re in a standalone Blazor app or a Razor Class Library. For a regular Blazor app, the path is relative to wwwroot. The .razor.js file gets copied there at build time, so you reference it from the component’s location in the project.

If you’re getting a 404 when loading the module, double check the path and make sure the file ends in .razor.js, not just .js.

Hope you liked the post! Feel free to contact me on any social media at @emimontesdeoca.

Resources

ASP.NET Core Blazor JavaScript with collocated JS

Blazor-interactiviteit in .NET 9 en .NET 10: een complete gids

Sun, 15 Jun 2025 00:00:00 +0000

If you’ve been building web applications with Blazor over the past few years, you know the framework has come a long way. What started as a choice between Blazor Server and Blazor WebAssembly has evolved into a unified, flexible rendering model that lets you pick the right interactivity strategy for each component in your application.

With .NET 8 we got the foundational shift — the introduction of render modes and static server-side rendering (SSR) as the default. Now, .NET 9 and .NET 10 build on top of that foundation with refinements that make the developer experience smoother and the end-user experience faster.

In this post, I want to walk you through the full picture of Blazor interactivity as it stands today: how render modes work, what streaming SSR brings to the table, how enhanced navigation and form handling change the game, and what’s new in the latest releases. If you’re planning a new Blazor project or thinking about upgrading, this is the guide I wish I had when I started digging into all of this.

A Quick Look Back: How We Got Here

Before .NET 8, you had to commit to a hosting model at the project level. Blazor Server meant everything ran on the server over a SignalR connection. Blazor WebAssembly meant everything ran in the browser. Each had trade-offs, and mixing them was painful.

.NET 8 changed the game by introducing a single project template — the Blazor Web App — that unifies both models. The key concept is render modes: you decide per component how it should render and where interactivity happens. The default became static SSR, meaning components render on the server and send plain HTML to the browser — no SignalR, no WebAssembly, just fast HTML.

.NET 9 polished these concepts, improved the developer experience, and optimized performance. .NET 10 takes it further with better reconnection handling, persistent component state across render modes, and improvements to how the Blazor script itself is delivered.

Let’s break it all down.

Render Modes in .NET 9

At the heart of modern Blazor is the concept of render modes. There are four modes you should know about:

1. Static SSR (the default)

When you create a new Blazor Web App, components render statically on the server by default. The server processes the Razor component, generates HTML, and sends it to the browser. There’s no persistent connection, no WebAssembly runtime — just traditional request/response.

This is perfect for content-heavy pages, dashboards that mostly display data, or any page where you don’t need real-time interaction.

@page "/products"

<h1>Our Products</h1>

@foreach (var product in products)
{
 <div class="product-card">
 <h3>@product.Name</h3>
 <p>@product.Description</p>
 <span class="price">@product.Price.ToString("C")</span>
 </div>
}

@code {
 private List<Product> products = new();

 protected override async Task OnInitializedAsync()
 {
 products = await ProductService.GetAllAsync();
 }
}

This component renders on the server, produces HTML, and that’s it. No ongoing connection. Fast initial load, great for SEO, minimal server resource usage.

2. Interactive Server

When you need real-time interactivity — handling button clicks, processing user input, updating the UI dynamically — you can opt into Interactive Server mode. This establishes a SignalR connection between the browser and the server, and UI updates happen over that connection.

@page "/counter"
@rendermode InteractiveServer

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
 private int currentCount = 0;

 private void IncrementCount()
 {
 currentCount++;
 }
}

The @rendermode InteractiveServer directive is all it takes. The component renders initially on the server, and then a SignalR connection is established to handle subsequent interactions. Your C# event handlers run on the server, and the UI diffs are sent to the browser.

When to use it: When you need interactivity, your components need access to server-side resources (databases, APIs, file systems), and you want a fast initial load without waiting for WebAssembly to download.

3. Interactive WebAssembly

If you want interactivity without maintaining a server connection, Interactive WebAssembly runs your component logic directly in the browser using the .NET WebAssembly runtime.

@page "/search"
@rendermode InteractiveWebAssembly

<h1>Product Search</h1>

<input @bind="searchTerm" @bind:event="oninput" placeholder="Search products..." />

@if (filteredProducts.Any())
{
 <ul>
 @foreach (var product in filteredProducts)
 {
 <li>@product.Name — @product.Price.ToString("C")</li>
 }
 </ul>
}

@code {
 private string searchTerm = string.Empty;
 private List<Product> allProducts = new();
 private IEnumerable<Product> filteredProducts => allProducts
 .Where(p => p.Name.Contains(searchTerm, StringComparison.OrdinalIgnoreCase));

 protected override async Task OnInitializedAsync()
 {
 allProducts = await Http.GetFromJsonAsync<List<Product>>("api/products") ?? new();
 }
}

The trade-off: there’s an initial download cost for the .NET runtime and your assemblies. But once loaded, the component runs entirely in the browser with no server round-trips for UI interactions.

When to use it: For highly interactive components where latency matters (think: rich text editors, drawing tools, real-time filtering), when you want to reduce server load, or when you’re building a progressive web app (PWA).

4. Interactive Auto

This is the pragmatic middle ground and one of my favorite features. Interactive Auto starts with server-side rendering via SignalR for the first load, then silently downloads the WebAssembly runtime in the background. On subsequent visits, the component runs on WebAssembly.

@page "/dashboard"
@rendermode InteractiveAuto

<h1>Dashboard</h1>

<DashboardWidget Title="Sales" Value="@salesTotal" />
<DashboardWidget Title="Users" Value="@activeUsers" />

<button @onclick="RefreshData">Refresh</button>

@code {
 private decimal salesTotal;
 private int activeUsers;

 protected override async Task OnInitializedAsync()
 {
 await RefreshData();
 }

 private async Task RefreshData()
 {
 var data = await DashboardService.GetSummaryAsync();
 salesTotal = data.SalesTotal;
 activeUsers = data.ActiveUsers;
 }
}

This gives you the best of both worlds: fast first render (no waiting for WASM download), and eventually the component runs client-side. The user doesn’t notice the transition.

When to use it: When you want both fast initial loads and eventual client-side execution. It’s a great default choice for many interactive components.

Streaming SSR: The Best of Both Worlds

Streaming SSR is one of those features that sounds simple but makes a massive difference in perceived performance. Here’s the idea: instead of waiting for all your data to load before sending any HTML, the server sends the page shell immediately and then streams content updates as data becomes available.

@page "/reports"
@attribute [StreamRendering]

<h1>Monthly Reports</h1>

@if (reports is null)
{
 <div class="loading-spinner">
 <p>Loading reports...</p>
 </div>
}
else
{
 <table class="table">
 <thead>
 <tr>
 <th>Month</th>
 <th>Revenue</th>
 <th>Growth</th>
 </tr>
 </thead>
 <tbody>
 @foreach (var report in reports)
 {
 <tr>
 <td>@report.Month</td>
 <td>@report.Revenue.ToString("C")</td>
 <td class="@(report.Growth >= 0 ? "text-success" : "text-danger")">
 @report.Growth.ToString("P1")
 </td>
 </tr>
 }
 </tbody>
 </table>
}

@code {
 private List<MonthlyReport>? reports;

 protected override async Task OnInitializedAsync()
 {
 // This might take a couple of seconds
 reports = await ReportService.GetMonthlyReportsAsync();
 }
}

With the [StreamRendering] attribute, here’s what happens:

The server immediately sends the HTML with the loading spinner.
OnInitializedAsync runs and fetches the data.
When the data arrives, the server streams the updated HTML (the table) to the browser.
The browser patches the DOM without a full page reload.

The user sees the page instantly with a loading indicator, then the content fills in. No JavaScript framework needed. No WebSocket connection. Just clever use of HTTP streaming.

When to use it: Any static SSR page that fetches data during rendering. Product listing pages, dashboards, reports — anywhere the initial data load might take more than a few hundred milliseconds.

When NOT to use it: If the data loads extremely fast (under 100ms), the streaming overhead isn’t worth it. Also, streaming SSR doesn’t give you ongoing interactivity — for that, you still need an interactive render mode.

One of the subtle but powerful improvements in modern Blazor is enhanced navigation. By default, Blazor intercepts internal link clicks and form submissions, fetching the new page content via fetch and patching the DOM rather than doing a full browser navigation.

This means navigating between static SSR pages feels like an SPA — no full page flash, scroll position can be preserved, and the experience is silky smooth.

How It Works

When the Blazor script (blazor.web.js) is loaded, it automatically intercepts clicks on internal links. Instead of a traditional browser navigation, it:

Makes a fetch request to the target URL.
Receives the HTML response.
Merges the new content into the existing DOM.
Updates the browser’s URL and history.

You don’t have to do anything to enable this — it’s on by default. But you can control it:

<!-- Disable enhanced navigation for a specific link -->
<a href="/legacy-page" data-enhance-nav="false">Legacy Page</a>

<!-- Force a full page reload for external-like behavior -->
<a href="/downloads/report.pdf" data-enhance-nav="false">Download Report</a>

Enhanced Form Handling

Forms get the same treatment. When you use EditForm or the standard <form> element with Blazor’s form handling, submissions are intercepted and handled via fetch:

@page "/contact"

<EditForm Model="contactModel" OnValidSubmit="HandleSubmit" FormName="contact" Enhance>
 <DataAnnotationsValidator />

 <div class="mb-3">
 <label for="name">Name</label>
 <InputText id="name" @bind-Value="contactModel.Name" class="form-control" />
 <ValidationMessage For="() => contactModel.Name" />
 </div>

 <div class="mb-3">
 <label for="email">Email</label>
 <InputText id="email" @bind-Value="contactModel.Email" class="form-control" />
 <ValidationMessage For="() => contactModel.Email" />
 </div>

 <div class="mb-3">
 <label for="message">Message</label>
 <InputTextArea id="message" @bind-Value="contactModel.Message" class="form-control" />
 <ValidationMessage For="() => contactModel.Message" />
 </div>

 <button type="submit" class="btn btn-primary">Send</button>
</EditForm>

@code {
 [SupplyParameterFromForm]
 private ContactModel contactModel { get; set; } = new();

 private async Task HandleSubmit()
 {
 await ContactService.SubmitAsync(contactModel);
 contactModel = new ContactModel();
 }
}

The Enhance attribute on EditForm tells Blazor to intercept the form submission. The form posts to the server, the server processes it and re-renders the page, and the updated HTML is streamed back — all without a full page navigation. It feels interactive, but it’s completely server-rendered.

Notice the [SupplyParameterFromForm] attribute — this is how Blazor binds posted form data to your model in static SSR scenarios. It’s the bridge between traditional form posts and Blazor’s component model.

Per-page and Per-component Interactivity

One of the most powerful aspects of the new model is that you can mix render modes within a single application. Your product listing page can be static SSR, your shopping cart can be Interactive Server, and your product configurator can be Interactive WebAssembly — all in the same app.

Setting Render Modes at the Component Level

You can set the render mode directly on a component using the @rendermode directive:

@* This component is interactive via Server *@
@rendermode InteractiveServer

<h3>Live Chat</h3>
<!-- chat UI here -->

Or you can set it when using a component from a parent:

@page "/product/{Id:int}"

<h1>@product?.Name</h1>
<p>@product?.Description</p>

<!-- This child component gets its own interactive render mode -->
<ProductConfigurator Product="product" @rendermode="InteractiveWebAssembly" />

<!-- This stays static -->
<ProductReviews ProductId="Id" />

@code {
 [Parameter] public int Id { get; set; }
 private Product? product;

 protected override async Task OnInitializedAsync()
 {
 product = await ProductService.GetByIdAsync(Id);
 }
}

In this example, the page itself is static SSR. The ProductConfigurator component runs on WebAssembly for rich client-side interactivity. The ProductReviews component stays static because it’s just displaying data.

Setting Render Modes Globally

If you want all pages to be interactive by default, you can set the render mode at the root level in App.razor:

<Routes @rendermode="InteractiveServer" />

This makes every page interactive via Server rendering. Individual components can still override this if needed.

Important Rules to Remember

There are a few constraints to keep in mind when mixing render modes:

A child component cannot have a “more interactive” render mode than its parent. If a parent is static, children can be static or interactive. But if a parent is Interactive Server, a child can’t be Interactive WebAssembly (it would need to be Server or Auto).
Interactive components can’t directly use scoped services from static parents. If a component runs on WebAssembly, it can’t access server-side DbContext instances directly — you’ll need an API layer.
State doesn’t automatically transfer between render modes. If a component pre-renders on the server and then switches to WebAssembly, you need to handle state persistence explicitly — more on this in the .NET 10 section.

What’s New in .NET 10

.NET 10 continues the incremental improvement approach, focusing on reliability and developer experience. Here are the highlights for Blazor interactivity:

Improved Reconnection Experience

If you’ve used Interactive Server mode in production, you’ve probably encountered the reconnection overlay — that moment when the SignalR connection drops and the user sees a “Reconnecting…” message. In .NET 10, this experience gets significantly better.

The reconnection logic is now smarter about retrying. Instead of a fixed retry interval, it uses a backoff strategy that adapts to the situation. The UI during reconnection is also more polished, and you have better hooks to customize the experience:

<!-- In your App.razor or layout -->
<div id="components-reconnect-modal">
 <div class="reconnect-visible">
 <p>Connection lost. Attempting to reconnect...</p>
 <div class="spinner"></div>
 </div>
 <div class="reconnect-failed">
 <p>Could not reconnect to the server.</p>
 <button onclick="location.reload()">Reload</button>
 </div>
 <div class="reconnect-rejected">
 <p>Your session has expired.</p>
 <a href="/">Return to Home</a>
 </div>
</div>

The framework now also attempts reconnection more aggressively on transient failures, and it can restore the circuit state more reliably. This means fewer “please reload the page” moments for your users.

Persistent Component State Across Render Modes

This is a big one. In .NET 9, when a component pre-renders on the server and then transitions to WebAssembly (or switches between render modes), the component state is lost. The component effectively re-initializes, which can lead to duplicate data fetches and flickering UI.

.NET 10 improves the PersistentComponentState service to work more seamlessly across render mode transitions:

@page "/weather"
@rendermode InteractiveWebAssembly
@inject PersistentComponentState ApplicationState

<h1>Weather Forecast</h1>

@if (forecasts is null)
{
 <p>Loading...</p>
}
else
{
 @foreach (var forecast in forecasts)
 {
 <div class="forecast-card">
 <h4>@forecast.Date.ToShortDateString()</h4>
 <p>@forecast.Summary — @forecast.TemperatureC°C</p>
 </div>
 }
}

@code {
 private List<WeatherForecast>? forecasts;
 private PersistingComponentStateSubscription persistingSubscription;

 protected override async Task OnInitializedAsync()
 {
 persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);

 if (!ApplicationState.TryTakeFromJson<List<WeatherForecast>>(
 "weather-forecasts", out var restored))
 {
 // Data wasn't persisted from prerendering — fetch it
 forecasts = await Http.GetFromJsonAsync<List<WeatherForecast>>("api/weather");
 }
 else
 {
 forecasts = restored;
 }
 }

 private Task PersistData()
 {
 ApplicationState.PersistAsJson("weather-forecasts", forecasts);
 return Task.CompletedTask;
 }

 public void Dispose()
 {
 persistingSubscription.Dispose();
 }
}

With the improvements in .NET 10, this pattern works more reliably. The state serialized during prerendering is properly available when the component initializes in its interactive mode, avoiding double data fetches and the brief flicker users might see.

Blazor Script as a Static Web Asset

In previous versions, the Blazor JavaScript file (blazor.web.js) was served from the framework’s internal endpoint. In .NET 10, it’s delivered as a static web asset. This might sound like a small change, but it has practical benefits:

Better caching: Static web assets get proper cache headers and fingerprinted URLs, so browsers cache them more effectively.
CDN-friendly: Since it’s a regular static file, CDNs can cache and serve it from edge locations.
Compression: Static web asset compression applies automatically, reducing the script size on the wire.

You don’t need to change how you reference it — the framework handles the updated path automatically.

Best Practices: Choosing the Right Render Mode

After working with all these modes across several projects, here’s my decision framework:

Start with Static SSR

Make static SSR your default. Most pages in most applications are primarily about displaying data. Product pages, blog posts, user profiles, settings pages — these don’t need real-time interactivity. Static SSR gives you the best performance, lowest resource usage, and simplest mental model.

Add Interactivity Only Where Needed

Identify the specific components that need to respond to user interactions in real-time. A “like” button, a chat widget, a drag-and-drop interface — these need interactivity. But the page surrounding them probably doesn’t.

Use Interactive Auto as Your Go-To Interactive Mode

When you do need interactivity, Interactive Auto is often the best default choice. It gives you fast initial loads (server rendering) with eventual client-side execution (WebAssembly). The user gets the best of both worlds, and you write your code once.

Reserve Interactive Server for Specific Cases

Use Interactive Server when:

Your component needs direct access to server resources (databases, file system, internal APIs).
WebAssembly download size is a concern and you can’t use Auto.
You need the component to always run on the server for security reasons (e.g., processing sensitive data).

Use Streaming SSR Generously

If your static SSR pages fetch any data, add [StreamRendering]. The cost is minimal and the perceived performance improvement is significant. Users see content appearing progressively rather than staring at a blank page.

Handle State Transitions Carefully

If you’re using Interactive Auto or mixing pre-rendering with WebAssembly, always use PersistentComponentState to avoid duplicate data fetches. Your users will thank you for the absence of flickering content.

Keep the Component Tree in Mind

Remember the render mode hierarchy rules. Plan your component tree so that interactive boundaries make sense. A common pattern is to have a static layout with interactive “islands” embedded where needed:

@* Layout: Static SSR *@
<header>
 <NavMenu />
 <UserMenu @rendermode="InteractiveServer" /> @* Needs real-time auth state *@
</header>

<main>
 @Body
</main>

<footer>
 <ChatWidget @rendermode="InteractiveAuto" /> @* Rich interactivity *@
</footer>

Conclusion

Blazor’s interactivity model in .NET 9 and .NET 10 represents a mature, well-thought-out approach to building web applications. The ability to choose render modes per component, the seamless enhanced navigation, streaming SSR, and the continued improvements in reconnection and state management make it a compelling choice for a wide range of applications.

The key insight is that interactivity is a spectrum, not a binary choice. Most of your application can be static. Some parts need server-driven interactivity. A few might benefit from running in the browser. Blazor now lets you make that choice at the finest granularity — the individual component — without fighting the framework.

If you’re starting a new project, my advice is simple: create a Blazor Web App, start with static SSR, add [StreamRendering] to data-heavy pages, and promote individual components to interactive modes only when you need them. You’ll end up with an application that’s fast, efficient, and scales well.

Happy coding, and as always, feel free to reach out if you have questions!

Minimale API's in .NET: lichte HTTP-API's bouwen

Thu, 10 Apr 2025 00:00:00 +0000

If you’ve been building APIs with ASP.NET Core for a while, you’re probably very familiar with the controller-based approach: create a controller class, decorate it with attributes, inject your services through the constructor, and wire up your routes. It works, and it works well — but sometimes it feels like you’re writing a lot of ceremony for what amounts to “take this request, do something, return a response.”

That’s exactly the problem Minimal APIs set out to solve. Introduced in .NET 6, Minimal APIs let you define HTTP endpoints with very little boilerplate. No controllers, no attributes, no startup class juggling — just direct route-to-handler mappings in a clean, functional style.

In this post I want to walk you through everything you need to know about Minimal APIs: from your first endpoint all the way to organizing large applications, handling authentication, validation, OpenAPI docs, and performance considerations. Let’s get to it.

Why Minimal APIs?

Before we jump in, let’s talk about why you’d pick Minimal APIs over the traditional controller-based approach.

Controllers are great when you need a structured, opinionated framework. They give you model binding, filters, content negotiation, and a clear separation of concerns out of the box. For large enterprise applications with dozens of developers, the consistency that controllers enforce can be a real benefit.

Minimal APIs, on the other hand, shine when you want:

Less boilerplate — no controller classes, no [ApiController] attributes, no separate startup configuration.
Faster startup — fewer reflection-based operations at boot time.
Simpler mental model — a route maps directly to a handler. That’s it.
Microservice-friendly — when your API has 5-10 endpoints, a full controller setup can feel like overkill.

The good news is that this isn’t an either-or decision. You can mix controllers and Minimal APIs in the same project. But once you get comfortable with the minimal approach, you might find yourself reaching for it more often than you’d expect.

Getting Started

Let’s create a Minimal API from scratch. If you have the .NET SDK installed, it’s as simple as:

dotnet new web -n MyMinimalApi
cd MyMinimalApi

This gives you a Program.cs that looks something like this:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/", () => "Hello World!");

app.Run();

That’s it. That’s a working API. No Startup.cs, no controller class, no routing configuration. You run dotnet run, hit http://localhost:5000, and you get “Hello World!” back. The simplicity here is the whole point.

Let’s make it a bit more useful with a classic todo API:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

var todos = new List<Todo>();

app.MapGet("/todos", () => todos);

app.MapGet("/todos/{id:int}", (int id) =>
 todos.FirstOrDefault(t => t.Id == id) is { } todo
 ? Results.Ok(todo)
 : Results.NotFound());

app.MapPost("/todos", (Todo todo) =>
{
 todos.Add(todo);
 return Results.Created($"/todos/{todo.Id}", todo);
});

app.MapDelete("/todos/{id:int}", (int id) =>
{
 var todo = todos.FirstOrDefault(t => t.Id == id);
 if (todo is null) return Results.NotFound();
 todos.Remove(todo);
 return Results.NoContent();
});

app.Run();

record Todo(int Id, string Title, bool IsComplete);

We have full CRUD in under 30 lines. That’s the power of the minimal approach.

Route Handlers

Route handlers are the functions that execute when a request matches a route. You’ve got several options for defining them.

Lambda Expressions

The most common approach, and what you’ll see in most examples:

app.MapGet("/hello", () => "Hello!");
app.MapGet("/hello/{name}", (string name) => $"Hello, {name}!");

Method Groups

For more complex logic, you can point to a named method:

app.MapGet("/products", GetProducts);
app.MapPost("/products", CreateProduct);

static IResult GetProducts(AppDbContext db)
 => Results.Ok(db.Products.ToList());

static IResult CreateProduct(Product product, AppDbContext db)
{
 db.Products.Add(product);
 db.SaveChanges();
 return Results.Created($"/products/{product.Id}", product);
}

This is my preferred approach for anything beyond a one-liner. It keeps your route mapping section clean and readable — you can see at a glance what endpoints exist without wading through implementation details.

Local Functions

You can also use local functions, which is useful when you want to keep handlers close to their route definitions:

app.MapGet("/health", CheckHealth);

IResult CheckHealth()
{
 // Some health check logic
 return Results.Ok(new { Status = "Healthy", Timestamp = DateTime.UtcNow });
}

Parameter Binding

One of the things I really appreciate about Minimal APIs is how intuitive parameter binding is. The framework figures out where to pull values from based on context and type.

Route Parameters

app.MapGet("/users/{id:int}", (int id) => $"User {id}");
app.MapGet("/files/{*path}", (string path) => $"File: {path}"); // catch-all

Query String Parameters

app.MapGet("/search", (string? query, int page = 1, int pageSize = 20) =>
 Results.Ok(new { query, page, pageSize }));

Nullable types become optional parameters. Default values work exactly how you’d expect.

Request Body

app.MapPost("/orders", (Order order) =>
{
 // 'order' is automatically deserialized from the JSON body
 return Results.Created($"/orders/{order.Id}", order);
});

Header and Service Binding

app.MapGet("/protected", (
 [FromHeader(Name = "X-Api-Key")] string apiKey,
 [FromServices] ILogger<Program> logger) =>
{
 logger.LogInformation("Request with API key: {Key}", apiKey[..4] + "****");
 return Results.Ok("Authorized");
});

HttpContext and HttpRequest

When you need lower-level access:

app.MapGet("/info", (HttpContext context) =>
{
 var userAgent = context.Request.Headers.UserAgent.ToString();
 var ip = context.Connection.RemoteIpAddress?.ToString();
 return Results.Ok(new { userAgent, ip });
});

Custom Binding with BindAsync

For complex types, you can implement a static BindAsync method:

public record PaginationParams(int Page, int PageSize)
{
 public static ValueTask<PaginationParams?> BindAsync(HttpContext context)
 {
 int.TryParse(context.Request.Query["page"], out var page);
 int.TryParse(context.Request.Query["pageSize"], out var pageSize);

 var result = new PaginationParams(
 Page: page > 0 ? page : 1,
 PageSize: pageSize > 0 ? Math.Min(pageSize, 100) : 20
 );

 return ValueTask.FromResult<PaginationParams?>(result);
 }
}

app.MapGet("/items", (PaginationParams pagination, AppDbContext db) =>
{
 var items = db.Items
 .Skip((pagination.Page - 1) * pagination.PageSize)
 .Take(pagination.PageSize)
 .ToList();

 return Results.Ok(items);
});

This is incredibly powerful. You define the binding logic once and reuse it across all your endpoints.

Validation

One area where Minimal APIs don’t give you as much out of the box compared to controllers is model validation. There’s no automatic [Required] or [StringLength] enforcement. But there are clean patterns for handling it.

Manual Validation

The simplest approach — just validate in the handler:

app.MapPost("/users", (CreateUserRequest request) =>
{
 if (string.IsNullOrWhiteSpace(request.Email))
 return Results.BadRequest(new { Error = "Email is required" });

 if (request.Name?.Length > 100)
 return Results.BadRequest(new { Error = "Name must be 100 characters or less" });

 // Create user...
 return Results.Created($"/users/{request.Email}", request);
});

Using a Validation Library

For anything non-trivial, I’d recommend reaching for FluentValidation or a similar library:

public class CreateUserValidator : AbstractValidator<CreateUserRequest>
{
 public CreateUserValidator()
 {
 RuleFor(x => x.Email).NotEmpty().EmailAddress();
 RuleFor(x => x.Name).NotEmpty().MaximumLength(100);
 RuleFor(x => x.Age).InclusiveBetween(0, 150);
 }
}

You can wire this into your endpoints through endpoint filters, which brings us to the next section.

Endpoint Filters

Endpoint filters are one of the best features of Minimal APIs. Think of them as middleware, but scoped to specific endpoints instead of the entire pipeline. They were introduced in .NET 7 and they’re fantastic for cross-cutting concerns.

Basic Filter

app.MapPost("/todos", (Todo todo) =>
{
 // Handle the request
 return Results.Created($"/todos/{todo.Id}", todo);
})
.AddEndpointFilter(async (context, next) =>
{
 var todo = context.GetArgument<Todo>(0);

 if (string.IsNullOrEmpty(todo.Title))
 {
 return Results.BadRequest(new { Error = "Title is required" });
 }

 return await next(context);
});

Validation Filter with FluentValidation

Here’s where it gets really powerful — a reusable validation filter:

public class ValidationFilter<T> : IEndpointFilter where T : class
{
 private readonly IValidator<T> _validator;

 public ValidationFilter(IValidator<T> validator)
 {
 _validator = validator;
 }

 public async ValueTask<object?> InvokeAsync(
 EndpointFilterInvocationContext context,
 EndpointFilterDelegate next)
 {
 var model = context.Arguments
 .OfType<T>()
 .FirstOrDefault();

 if (model is null)
 return Results.BadRequest(new { Error = "Request body is required" });

 var result = await _validator.ValidateAsync(model);

 if (!result.IsValid)
 {
 var errors = result.Errors
 .GroupBy(e => e.PropertyName)
 .ToDictionary(g => g.Key, g => g.Select(e => e.ErrorMessage).ToArray());

 return Results.ValidationProblem(errors);
 }

 return await next(context);
 }
}

// Usage
app.MapPost("/users", (CreateUserRequest request) =>
{
 // Only reached if validation passes
 return Results.Created($"/users/{request.Email}", request);
})
.AddEndpointFilter<ValidationFilter<CreateUserRequest>>();

Logging Filter

app.MapGet("/products", (AppDbContext db) => db.Products.ToList())
 .AddEndpointFilter(async (context, next) =>
 {
 var logger = context.HttpContext
 .RequestServices.GetRequiredService<ILogger<Program>>();

 var sw = Stopwatch.StartNew();
 var result = await next(context);
 sw.Stop();

 logger.LogInformation("Endpoint executed in {Elapsed}ms", sw.ElapsedMilliseconds);

 return result;
 });

You can chain multiple filters, and they execute in the order they’re added — just like middleware.

OpenAPI / Swagger Integration

Good API documentation isn’t optional anymore. Thankfully, Minimal APIs have first-class support for OpenAPI through the Microsoft.AspNetCore.OpenApi package.

Basic Setup

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddOpenApi();

var app = builder.Build();

app.MapOpenApi();

app.MapGet("/todos", () => new List<Todo>())
 .WithName("GetTodos")
 .WithDescription("Retrieves all todo items")
 .WithTags("Todos");

app.Run();

Rich Endpoint Metadata

You can provide detailed information about your endpoints:

app.MapPost("/todos", (Todo todo) =>
{
 return Results.Created($"/todos/{todo.Id}", todo);
})
.WithName("CreateTodo")
.WithDescription("Creates a new todo item")
.WithTags("Todos")
.Accepts<Todo>("application/json")
.Produces<Todo>(StatusCodes.Status201Created)
.Produces(StatusCodes.Status400BadRequest)
.ProducesValidationProblem();

Using WithOpenApi for Customization

For fine-grained control over the generated OpenAPI document:

app.MapGet("/todos/{id:int}", (int id) => Results.Ok(new Todo(id, "Sample", false)))
 .WithOpenApi(operation =>
 {
 operation.Summary = "Get a specific todo";
 operation.Description = "Retrieves a single todo item by its unique identifier.";
 operation.Parameters[0].Description = "The unique identifier of the todo item";
 return operation;
 });

This gives you the same level of documentation control you’d get with Swashbuckle XML comments on controllers, but in a more explicit, code-first way.

Authentication & Authorization

Securing Minimal API endpoints follows the same patterns as the rest of ASP.NET Core — you just apply them differently.

Basic Setup

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
 .AddJwtBearer(options =>
 {
 options.Authority = "https://your-identity-provider.com";
 options.Audience = "your-api";
 });

builder.Services.AddAuthorizationBuilder()
 .AddPolicy("AdminOnly", policy => policy.RequireRole("Admin"))
 .AddPolicy("PremiumUser", policy => policy.RequireClaim("subscription", "premium"));

var app = builder.Build();

app.UseAuthentication();
app.UseAuthorization();

Applying Authorization to Endpoints

// Require any authenticated user
app.MapGet("/profile", (ClaimsPrincipal user) =>
{
 return Results.Ok(new
 {
 Name = user.FindFirstValue(ClaimTypes.Name),
 Email = user.FindFirstValue(ClaimTypes.Email)
 });
}).RequireAuthorization();

// Require a specific policy
app.MapDelete("/admin/users/{id}", (int id) =>
{
 // Delete user logic
 return Results.NoContent();
}).RequireAuthorization("AdminOnly");

// Allow anonymous access
app.MapGet("/public/health", () => Results.Ok(new { Status = "Healthy" }))
 .AllowAnonymous();

Notice how you can inject ClaimsPrincipal directly into your handler parameters — the framework takes care of the rest. This is one of those small things that makes Minimal APIs feel really elegant.

Organizing Large APIs

The elephant in the room with Minimal APIs is organization. When your Program.cs has 50 endpoints, it becomes a mess. Here are the patterns I use to keep things manageable.

Route Groups

Route groups (introduced in .NET 7) let you share configuration across related endpoints:

var todos = app.MapGroup("/todos")
 .WithTags("Todos")
 .RequireAuthorization();

todos.MapGet("/", (AppDbContext db) => db.Todos.ToListAsync());
todos.MapGet("/{id:int}", (int id, AppDbContext db) => db.Todos.FindAsync(id));
todos.MapPost("/", (Todo todo, AppDbContext db) =>
{
 db.Todos.Add(todo);
 db.SaveChangesAsync();
 return Results.Created($"/todos/{todo.Id}", todo);
});

All endpoints in the group share the /todos prefix, the Todos tag, and the authorization requirement. Clean.

Extension Methods

This is the pattern that really scales. Move each group of endpoints into its own static class:

// Endpoints/TodoEndpoints.cs
public static class TodoEndpoints
{
 public static RouteGroupBuilder MapTodoEndpoints(this WebApplication app)
 {
 var group = app.MapGroup("/todos").WithTags("Todos");

 group.MapGet("/", GetAll);
 group.MapGet("/{id:int}", GetById);
 group.MapPost("/", Create);
 group.MapPut("/{id:int}", Update);
 group.MapDelete("/{id:int}", Delete);

 return group;
 }

 private static async Task<IResult> GetAll(AppDbContext db)
 => Results.Ok(await db.Todos.ToListAsync());

 private static async Task<IResult> GetById(int id, AppDbContext db)
 => await db.Todos.FindAsync(id) is { } todo
 ? Results.Ok(todo)
 : Results.NotFound();

 private static async Task<IResult> Create(Todo todo, AppDbContext db)
 {
 db.Todos.Add(todo);
 await db.SaveChangesAsync();
 return Results.Created($"/todos/{todo.Id}", todo);
 }

 private static async Task<IResult> Update(int id, Todo updated, AppDbContext db)
 {
 var todo = await db.Todos.FindAsync(id);
 if (todo is null) return Results.NotFound();

 todo.Title = updated.Title;
 todo.IsComplete = updated.IsComplete;
 await db.SaveChangesAsync();

 return Results.Ok(todo);
 }

 private static async Task<IResult> Delete(int id, AppDbContext db)
 {
 var todo = await db.Todos.FindAsync(id);
 if (todo is null) return Results.NotFound();

 db.Todos.Remove(todo);
 await db.SaveChangesAsync();

 return Results.NoContent();
 }
}

// Program.cs — stays clean
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapTodoEndpoints();
app.MapUserEndpoints();
app.MapOrderEndpoints();

app.Run();

Your Program.cs becomes a table of contents for your API. Each endpoint group lives in its own file. This is the approach I recommend for production applications.

The Carter Library

If you want even more structure, the Carter library provides a module-based approach:

public class TodoModule : ICarterModule
{
 public void AddRoutes(IEndpointRouteBuilder app)
 {
 app.MapGet("/todos", async (AppDbContext db) =>
 await db.Todos.ToListAsync());

 app.MapPost("/todos", async (Todo todo, AppDbContext db) =>
 {
 db.Todos.Add(todo);
 await db.SaveChangesAsync();
 return Results.Created($"/todos/{todo.Id}", todo);
 });
 }
}

Carter automatically discovers and registers all modules. It’s a nice middle ground between the raw Minimal API approach and full controllers.

TypedResults and Response Types

Starting with .NET 7, you can use TypedResults instead of Results for type-safe responses. This might seem like a small change, but it has real benefits for OpenAPI documentation and testability.

app.MapGet("/todos/{id:int}", async Task<Results<Ok<Todo>, NotFound>> (int id, AppDbContext db) =>
{
 var todo = await db.Todos.FindAsync(id);
 return todo is not null
 ? TypedResults.Ok(todo)
 : TypedResults.NotFound();
});

The return type Results<Ok<Todo>, NotFound> explicitly tells the framework (and your OpenAPI docs) exactly which response types this endpoint can produce. No more guessing, no more manual Produces<>() calls for basic cases.

For multiple possible outcomes:

app.MapPost("/todos",
 async Task<Results<Created<Todo>, ValidationProblem, Conflict>>
 (Todo todo, AppDbContext db) =>
{
 if (string.IsNullOrEmpty(todo.Title))
 return TypedResults.ValidationProblem(
 new Dictionary<string, string[]>
 {
 { "Title", new[] { "Title is required" } }
 });

 if (await db.Todos.AnyAsync(t => t.Title == todo.Title))
 return TypedResults.Conflict();

 db.Todos.Add(todo);
 await db.SaveChangesAsync();

 return TypedResults.Created($"/todos/{todo.Id}", todo);
});

I’ve started using TypedResults in all new projects. The compiler catches mismatches between your declared return types and what you actually return, which eliminates an entire class of runtime surprises.

Performance Considerations

One of the selling points of Minimal APIs is performance, and it’s worth understanding why they’re faster.

Reduced startup overhead. Controllers rely heavily on reflection to discover endpoints, bind models, and apply filters. Minimal APIs use source generators (starting in .NET 7) to generate binding code at compile time. This means less work at startup and less memory allocation per request.

No MVC pipeline. Controller-based APIs go through the full MVC pipeline: action selection, model binding, action filters, result execution. Minimal APIs skip all of that and go straight from routing to your handler.

RequestDelegate compilation. The framework compiles your lambda expressions into optimized RequestDelegate instances. The resulting code is very close to what you’d write by hand if you were working directly with HttpContext.

Here are some practical tips for maximizing performance:

// Use AsNoTracking for read-only queries
app.MapGet("/products", async (AppDbContext db) =>
 await db.Products.AsNoTracking().ToListAsync());

// Return results directly — avoid unnecessary allocations
app.MapGet("/count", async (AppDbContext db) =>
 await db.Products.CountAsync());

// Use cancellation tokens for long-running operations
app.MapGet("/report", async (AppDbContext db, CancellationToken ct) =>
 await db.Orders
 .AsNoTracking()
 .GroupBy(o => o.Status)
 .Select(g => new { Status = g.Key, Count = g.Count() })
 .ToListAsync(ct));

It’s also worth mentioning that the performance gap between controllers and Minimal APIs keeps narrowing with each .NET release. For most applications, the difference won’t be your bottleneck — your database queries and external service calls will. Choose based on developer experience and project needs, not benchmarks.

Conclusion

Minimal APIs have come a long way since their introduction in .NET 6. What started as a “hello world” demo feature has matured into a legitimate choice for production APIs. With endpoint filters, route groups, typed results, and solid OpenAPI support, you have everything you need to build well-structured, maintainable services.

My recommendation? If you’re starting a new API project — especially a microservice or a focused internal API — give Minimal APIs a serious try. Use the extension method pattern for organization, lean on endpoint filters for cross-cutting concerns, and leverage TypedResults for type safety.

For existing controller-based projects, there’s no rush to migrate. Both approaches work well, and you can even use them side by side. But next time you need to add a small service or a quick internal API, skip the controllers and go minimal. You might not go back.

Happy coding!

Geïsoleerde CSS gebruiken in Blazor-componenten

Wed, 12 Mar 2025 00:00:00 +0000

One thing that always bugged me when working with Blazor was how easy it was to accidentally break styles across components. You’d add a class in one component and suddenly something else on a completely different page looked off. Turns out, Blazor has a built-in solution for this: CSS isolation.

What is CSS isolation?

CSS isolation lets you scope styles to a specific component. Blazor does this by generating a unique attribute for each component at build time and appending it to the CSS selectors. So your styles only apply to the component they belong to.

No need for BEM naming, no need for crazy specificity hacks. Just clean, scoped CSS.

How to use it

Let’s say you have a component called Card.razor:

<div class="card">
 <h3 class="card-title">@Title</h3>
 <p class="card-body">@ChildContent</p>
</div>

@code {
 [Parameter]
 public string Title { get; set; }

 [Parameter]
 public RenderFragment ChildContent { get; set; }
}

To add isolated styles, you just create a file with the same name but with .razor.css extension. In this case: Card.razor.css.

.card {
 border: 1px solid var(--color-border);
 border-radius: 8px;
 padding: 1rem;
 background: var(--color-bg-secondary);
}

.card-title {
 font-size: 1.1rem;
 font-weight: 600;
 margin-bottom: 0.5rem;
}

.card-body {
 color: var(--color-text-secondary);
 font-size: 0.9rem;
}

And that’s it! Blazor will automatically pick it up and scope those styles to the Card component only. If you have another .card class somewhere else, it won’t be affected.

How it works under the hood

When you build your project, Blazor rewrites the HTML and CSS. Your component gets a unique attribute like b-3x8qz7k2f1, and the CSS selectors get that attribute appended:

.card[b-3x8qz7k2f1] {
 border: 1px solid var(--color-border);
 /* ... */
}

The generated CSS bundle is served as {ProjectName}.styles.css. Make sure you have this in your index.html or _Host.cshtml:

<link href="YourApp.styles.css" rel="stylesheet" />

If you’re missing that link, your isolated styles won’t show up and you’ll spend 30 minutes wondering what’s going on. Trust me, I’ve been there.

Targeting child elements

One thing to keep in mind is that by default, isolated CSS only applies to the current component’s elements. If you want to style elements inside a child component, you need the ::deep combinator:

::deep .child-element {
 color: red;
}

This tells Blazor to apply the style to matching elements within child components too. Pretty handy when you have a wrapper component that needs to style its children.

When to use it

I use CSS isolation for pretty much every component now. It keeps things clean and predictable. The only time I don’t use it is for truly global styles like resets, typography, or theme variables — those go in a shared CSS file.

Hope you liked the post! Feel free to contact me on any social media at @emimontesdeoca.

Resources

ASP.NET Core Blazor CSS isolation

Kerstuitgaven beheren met Semantic Kernel

Sat, 28 Dec 2024 00:00:00 +0000

## Introduction

As the holiday season approaches, managing expenses can become a challenge, especially with the flurry of shopping and gift purchases. In this blog post, we’ll explore how to leverage artificial intelligence to help keep track of your Christmas spending using .NET technologies. By analyzing receipts with the power of the Semantic Kernel and AI, we can efficiently extract key details such as store names, dates, item lists, and total amounts. This solution allows you to effortlessly monitor and manage your Christmas spending, ensuring you stay on top of your budget without the hassle of manually reviewing receipts.

Calendario de Adviento de Inteligencia Artificial 2024 en Español

This project was inspired by my participation in the Calendario de Adviento de Inteligencia Artificial 2024 en Español, an online event dedicated to AI. You can find more about the event on this Dev.to link.

The project

For this project, we will be using Azure OpenAI, a service that allows us to utilize powerful AI models such as GPT-4 to process and analyze images. The process involves several steps, from setting up the backend API service to integrating with a Blazor front end for image uploads. We will also be using .NET Aspire, a component that helps connect everything seamlessly.

Prerequisites

Before we dive into the code, make sure you have the following prerequisites:

.NET 9
Azure OpenAI access (API key)
Visual Studio or Visual Studio Code
Basic knowledge of Blazor, HTTP clients, and API development

The Visual Studio solution

We will end up having something like this, I like to keep stuff separated and with cool names so here’s how it looks:

But let’s go step by step creating stuff!

Step 0: The models

The core of the Receipt Scanner application relies on several key models that facilitate the interaction between the front-end, API, and AI services. Below are the main models used in this project:

AnalyzeReceiptRequest
This model represents the request structure for analyzing a receipt. It contains the ImageBytes property, which holds the byte array of the receipt image that will be processed.
```
public class AnalyzeReceiptRequest
{
 public byte[] ImageBytes { get; set; }
}
```
ReceiptAnalyzeResult
This model captures the result after processing a receipt. It holds the structured data extracted from the receipt, such as the store name, date, items, and total amount.
```
public class ReceiptAnalyzeResult
{
 public DateTime CreatedAt { get; set; }
 public ReceiptData Result { get; set; }
}
```

ReceiptData
This is the model that holds the structured receipt data. It includes properties for the store name, date, a list of items (with each item’s name and price), and the total amount on the receipt.

public class ReceiptData
{
 public string Store { get; set; }
 public DateTime? Date { get; set; }
 public List<ReceiptItem> Items { get; set; }
 public decimal? Total { get; set; }
}

ReceiptItem
Each item on the receipt is represented by this model. It holds the item name and its price.

public class ReceiptItem
{
 public string Name { get; set; }
 public decimal? Price { get; set; }
}

These models serve as the foundation for passing data between the client and server, ensuring a smooth flow of information. The API receives the receipt image, and in return, it processes and returns a structured JSON object that can be easily consumed by the front-end.

Step 1: Setting Up the Backend API Service

The first step in building this application is setting up an API service to analyze receipt images. We’ll use the Azure OpenAI API to extract information from the receipt images. Here’s a breakdown of how everything fits together:

AI Service - A Deep Dive

The AI service is at the core of our receipt analysis system. It’s responsible for communicating with Azure OpenAI’s API to process the image data and return meaningful insights. The AiApiClient class is the client that will handle all interactions with the Azure OpenAI API.

AI Client Implementation

The AiApiClient is the key component responsible for sending the receipt image (in byte array format) to the Azure OpenAI API. It handles the communication, error logging, and data parsing:

public class AiApiClient
{
 private readonly HttpClient _httpClient;
 private readonly ILogger<AiApiClient> _logger;

 public AiApiClient(HttpClient httpClient, ILogger<AiApiClient> logger)
 {
 _httpClient = httpClient;
 _logger = logger;
 }

 public async Task<ReceiptAnalyzeResult?> AnalyzeAsync(byte[] imageBytes, CancellationToken cancellationToken = default)
 {
 if (imageBytes == null || imageBytes.Length == 0)
 {
 _logger.LogWarning("ImageBytes is null or empty.");
 return null;
 }

 _logger.LogInformation("Sending analyze request with image bytes of length: {Length}", imageBytes.Length);

 var request = new AnalyzeReceiptRequest
 {
 ImageBytes = imageBytes
 };

 try
 {
 var response = await _httpClient.PostAsJsonAsync("/analyze-receipt", request, cancellationToken);

 if (!response.IsSuccessStatusCode)
 {
 _logger.LogWarning("Failed to analyze receipt. StatusCode: {StatusCode}", response.StatusCode);
 return null;
 }

 var analyzeResult = await response.Content.ReadFromJsonAsync<ReceiptAnalyzeResult>(cancellationToken: cancellationToken);

 if (analyzeResult == null)
 {
 _logger.LogWarning("No content received from AI API service.");
 return null;
 }

 _logger.LogInformation("Analysis result received: {AnalyzeResult}", analyzeResult);

 return analyzeResult;
 }
 catch (Exception ex)
 {
 _logger.LogError(ex, "An error occurred while analyzing the receipt.");
 return null;
 }
 }
}

In this part of the code, we define the AnalyzeAsync method, which is responsible for:

Sending the image byte array to the Azure OpenAI API.
Handling any errors or unsuccessful responses from the API.
Parsing the returned JSON data into a structured result (ReceiptAnalyzeResult).

The benefits of separating this functionality into a dedicated service (AiApiClient) include:

Error Handling: Centralized handling of errors like network issues or invalid responses.
Logging: Proper logging of requests and responses to monitor system behavior.

API Service - Handling Requests and Responses

The API Service acts as the intermediary between the frontend Blazor application and the AI service. This service is responsible for accepting the image data, passing it to the AI service, and returning the analysis results to the client.

API Endpoint

In this step, we define a simple API endpoint to accept receipt images, forward them to the AI service for processing, and return the results to the client:

using ReceiptScanner.Shared.Clients;
using ReceiptScanner.Shared.Models;

var builder = WebApplication.CreateBuilder(args);

// Add service defaults & Aspire client integrations.
builder.AddServiceDefaults();

// Add services to the container.
builder.Services.AddProblemDetails();

// Register AiApiClient with HttpClient
builder.Services.AddHttpClient<AiApiClient>(client =>
{
 client.BaseAddress = new Uri("https+http://aiservice");
});

// Learn more about configuring OpenAPI at https://aka.ms/aspnet/openapi
builder.Services.AddOpenApi();

var app = builder.Build();

// Configure the HTTP request pipeline.
app.UseExceptionHandler();

if (app.Environment.IsDevelopment())
{
 app.MapOpenApi();
}

// POST endpoint to analyze receipt
app.MapPost("/api/analyze-receipt", async (AnalyzeReceiptRequest request, AiApiClient aiApiClient, ILogger<Program> logger) =>
{
 if (request.ImageBytes == null || request.ImageBytes.Length == 0)
 {
 logger.LogWarning("ImageBytes is null or empty.");
 return Results.BadRequest("ImageBytes is required.");
 }

 logger.LogInformation("Received analyze receipt request with image bytes of length: {Length}", request.ImageBytes.Length);

 try
 {
 var result = await aiApiClient.AnalyzeAsync(request.ImageBytes);

 if (result == null)
 {
 logger.LogWarning("Failed to analyze the receipt.");
 return Results.Problem("Unable to process the receipt at this time. Please try again later.");
 }

 logger.LogInformation("Analysis completed successfully. Result: {Result}", result);

 return Results.Ok(result);
 }
 catch (Exception ex)
 {
 logger.LogError(ex, "An error occurred while processing the receipt.");
 return Results.Problem("An error occurred while processing the receipt. Please try again later.");
 }
});

app.MapDefaultEndpoints();

app.Run();

This endpoint:

Accepts the receipt image as part of the request body.
Calls the AiService endopint method to send the image to Azure OpenAI for processing.
Returns the analysis result back to the client.

Step 2: Setting Up the Blazor Frontend

Now that we have the backend set up, let’s turn our attention to the Blazor frontend. This is where users can upload their receipt images for analysis and see the results.

Blazor Page Implementation

The Blazor page provides a simple interface where users can upload multiple receipt images and then see the analysis results displayed in a table. Here’s the code for the page:

@page "/analyzer"
@using ReceiptScanner.Shared.Clients
@using ReceiptScanner.Shared.Models
@using System.Globalization
@inject ApiServiceClient ApiClient
@inject ILogger<Program> Logger

@attribute [StreamRendering]
@rendermode InteractiveServer

<PageTitle>Receipt Analyzer</PageTitle>

<h1 class="text-center my-4">Receipt Analyzer</h1>

<div class="container">
 <p class="lead text-center mb-4">Upload receipt images below to extract their data.</p>

 <!-- File Upload Section -->
 <div class="card mb-4">
 <div class="card-body">
 <InputFile OnChange="HandleFileSelected" multiple class="form-control mb-3" />
 <button class="btn btn-primary w-100" @onclick="ProcessReceipts" disabled="@(!hasFiles)" type="button">
 <span class="@(!processing ? "d-none" : "") spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
 @if (processing)
 {
 <span>Processing...</span>
 }
 else
 {
 <span>Process Receipts</span>
 }
 </button>
 </div>
 </div>

 <!-- Uploaded Images Preview -->
 @if (fileBytesList.Any())
 {
 <div class="card mb-4">
 <div class="card-header">
 <h5 class="mb-0">Uploaded Receipt Images</h5>
 </div>
 <div class="card-body">
 <div class="row">
 @foreach (var fileBytes in fileBytesList)
 {
 <div class="col-12 col-md-4 mb-3">
 <img src="@($"data:image/jpeg;base64,{Convert.ToBase64String(fileBytes)}")" class="img-fluid rounded" alt="Uploaded receipt" />
 </div>
 }
 </div>
 </div>
 </div>
 }

 <!-- Processing Indicator -->
 @if (processing)
 {
 <div class="alert alert-info text-center" role="alert">
 <strong>Processing receipts...</strong> Please wait while we analyze the uploaded files.
 </div>
 }

 <!-- Analysis Results Section -->
 @if (analyzedReceipts != null && analyzedReceipts.Any())
 {
 <div class="card">
 <div class="card-header">
 <h5 class="mb-0">Analysis Results</h5>
 </div>
 <div class="card-body">
 <table class="table table-striped table-bordered">
 <thead>
 <tr>
 <th>Store</th>
 <th>Date</th>
 <th>Total</th>
 <th>Items</th>
 </tr>
 </thead>
 <tbody>
 @foreach (var receipt in analyzedReceipts)
 {
 <tr>
 <td>@(receipt.Result?.Store ?? "Unknown")</td>
 <td>@(receipt.Result?.Date?.ToString() ?? "Unknown")</td>
 <td>@(receipt.Result?.Total?.ToString("C", ci) ?? "Unknown")</td>
 <td>
 <ul class="list-unstyled">
 @if (receipt.Result?.Items is not null)
 {
 @foreach (var item in receipt.Result?.Items!)
 {
 <li><strong>@item.Name</strong> - @item.Price?.ToString("C", ci)</li>
 }
 }
 </ul>
 </td>
 </tr>
 }
 </tbody>
 </table>
 </div>
 </div>
 }
 else if (processed && (analyzedReceipts == null || !analyzedReceipts.Any()))
 {
 <div class="alert alert-warning text-center" role="alert">
 <strong>No results found.</strong> Please try again with different images or ensure they are clear and legible.
 </div>
 }
</div>

@code {
 private bool hasFiles;
 private bool processing;
 private bool processed;
 private List<byte[]> fileBytesList = new();
 private List<ReceiptAnalyzeResult> analyzedReceipts = new();
 CultureInfo ci = new CultureInfo("es-es");

 private async Task HandleFileSelected(InputFileChangeEventArgs e)
 {
 try
 {
 fileBytesList.Clear();

 foreach (var file in e.GetMultipleFiles())
 {
 var memoryStream = new MemoryStream();
 await file.OpenReadStream().CopyToAsync(memoryStream);
 fileBytesList.Add(memoryStream.ToArray());
 }

 hasFiles = fileBytesList.Any();
 }
 catch (Exception ex)
 {
 Logger.LogError(ex, "Error while handling file upload.");
 }
 }

 private async Task ProcessReceipts()
 {
 if (!hasFiles)
 return;

 processing = true;
 analyzedReceipts.Clear();

 try
 {
 foreach (var fileBytes in fileBytesList)
 {
 var result = await ApiClient.AnalyzeReceiptAsync(fileBytes);
 if (result != null)
 {
 analyzedReceipts.Add(result);
 }
 }
 }
 catch (Exception ex)
 {
 Logger.LogError(ex, "Error while processing receipts.");
 }
 finally
 {
 processing = false;
 processed = true;
 }
 }
}

This page allows users to upload receipts and shows the analysis results in a table with store names, dates, total amounts, and the list of items.

Step 3: .NET Aspire

What is .NET Aspire?

.NET Aspire is a set of powerful tools, templates, and packages for building observable, production ready apps. .NET Aspire is delivered through a collection of NuGet packages that handle specific cloud-native concerns. Cloud-native apps often consist of small, interconnected pieces or microservices rather than a single, monolithic code base. Cloud-native apps generally consume a large number of services, such as databases, messaging, and caching. For information on support, see the .NET Aspire Support Policy.

A distributed application is one that uses computational resources across multiple nodes, such as containers running on different hosts. Such nodes must communicate over network boundaries to deliver responses to users. A cloud-native app is a specific type of distributed app that takes full advantage of the scalability, resilience, and manageability of cloud infrastructures.

Using .NET Aspire for this project provides several benefits that improve the overall system quality, such as:

1. Centralized Logging

.NET Aspire automatically integrates logging across the entire application, which means you don’t have to manually configure logging for each service. This ensures that logs are consistent and stored in a centralized location, making debugging and monitoring much easier.

For instance, the AiApiClient class uses logging to record the image bytes sent to the AI service, the API responses, and any errors that occur during the analysis process.

_logger.LogInformation("Sending analyze request with image bytes of length: {Length}",

 imageBytes.Length);

2. Automatic Metrics Collection

.NET Aspire also automatically tracks and reports important application metrics such as response times, request counts, and error rates. This helps you understand how the application is performing and quickly detect any bottlenecks or issues.

3. Improved Performance

.NET Aspire optimizes HTTP calls, which helps to keep response times low and reduce unnecessary resource consumption. It provides features like connection pooling, request retries, and intelligent routing.

4. Seamless Integration

.NET Aspire simplifies the integration of various services (like the AI and API services in this project) and streamlines the deployment process. You don’t need to worry about low-level configurations, as Aspire takes care of the infrastructure-related tasks for you.

Conclusion

AI is no longer just a buzzword or something we see in sci-fi movies. It’s actively solving real-world problems today, like the one we tackled in this project—extracting structured data from receipts. With the help of Azure OpenAI, .NET Aspire, and Blazor, we can automate what would otherwise be a time-consuming and error-prone manual task. AI doesn’t just chat or respond to prompts like ChatGPT; it interprets images, extracts valuable information, and gives us actionable insights in seconds.

By using Azure OpenAI for receipt analysis and .NET Aspire for seamless integration with logging and metrics, we’ve created a solution that is both powerful and scalable. The potential of AI to streamline business processes, automate tedious tasks, and improve accuracy is enormous, and this is just one example of how it can be applied.

This post is part of the Calendario de Adviento de Inteligencia Artificial 2024 en Español, an event that showcases real-world AI applications and educates the Spanish-speaking tech community on the latest trends. If you’re looking to dive deeper into AI and its possibilities, this event is a great place to start.

AI is transforming how we work, and this project is just a glimpse of what’s possible. The real power of AI is in its ability to solve real problems—whether it’s processing receipts, analyzing images, or predicting trends. We’re just scratching the surface.

Source Code

The full source code for this project is available on GitHub. Feel free to download it, explore how the AI and API services work together, and adapt it for your own use cases. If you run into any issues, or if you have ideas for improvements, don’t hesitate to create an issue or submit a pull request. Contributions are always welcome, and your feedback will help make this project even better!

Happy coding!

Containers gebruiken om... de prijzen van kerstcadeaus bij te houden?

Thu, 12 Dec 2024 00:00:00 +0000

Christmas is around the corner, and with it comes the joyous task of finding the perfect gifts for loved ones. If you’re anything like me, you probably love getting a good deal, but navigating the skyrocketing prices of popular items during the holiday season can feel like a real-life sleigh ride—exciting but a bit overwhelming! This year, instead of driving myself crazy with daily price checks, I decided to put my tech skills to good use and automate the process.

As a software developer and someone passionate about leveraging technology to solve everyday problems, I found a way to automate the process of checking prices. Instead of manually visiting multiple online stores every day to compare prices, I decided to create a system that can do it for me. This not only saves time but also ensures I get the best deals without the stress of daily checks.

Why Automate Price Monitoring?

Automating price monitoring is like having your own team of Santa’s elves working around the clock to ensure you get the best deals without lifting a finger. Here’s why you’ll love it:

Expensive Items: We all know Christmas presents can get pretty pricey, especially when gadgets and toys are on your list. Saving money on these can be as satisfying as finding the last tree-topper in stock.
Daily Checks: Who has the time (or the patience) to check prices every day? Not me!
Automation: Embrace the holiday spirit of giving—give yourself the gift of efficiency.
Accuracy: Automation ensures your price checks are as accurate as Rudolph’s nose is bright.

Core Technologies

To build my own Santa’s little helper, I decided to use several key technologies:

Containers

Containers are like the Christmas wrapping for software. They bundle up your applications with all their goodies (dependencies) so everything runs as smoothly as a sleigh ride in fresh snow. Docker is our go-to for creating these containers.

Blazor

Blazor is a cool framework for building interactive web applications using .NET. It’s like replacing generic Christmas carols with your very own holiday playlist—tailored, efficient, and so much fun.

Docker-Compose

Docker-Compose is the manager of our North Pole’s operation. It helps us keep all our services—like the API and the Blazor front end—running together in perfect harmony. Think of it as the conductor of our holiday symphony.

Step-by-Step Guide

Now, let’s dive into Santa’s workshop and bring this project to life!

Step 1: Creating the API

1.1 Setting up the Project

Throw on your coding Santa hat and set up a new ASP.NET Core Web API project. Open your terminal (it’s a bit like opening your advent calendar) and run:

dotnet new webapi -o PriceMonitorApi
cd PriceMonitorApi

This command creates a new directory named PriceMonitorApi and sets up a basic Web API project. Imagine it’s like creating a sturdy base for your gingerbread house.

1.2 Adding HttpClient and Scraping Libraries

Next, add HttpClient and a library to parse HTML. This will be our trusty sleigh for fetching and reading price data.

dotnet add package HtmlAgilityPack

HtmlAgilityPack is the elf that helps us parse HTML documents.

1.3 Creating Models

Models are like the blueprint for our toys. Let’s create a model to represent the product information:

namespace PriceMonitorApi.Models
{
 public class ProductInfo
 {
 public string Title { get; set; }
 public decimal Price { get; set; }
 public DateTime Date { get; set; }
 }
}

We’ve just created the perfect template for our data.

1.4 Implementing the Scraper Service

Our scraper service is like Santa’s little helper—fetching and processing information for us:

using HtmlAgilityPack;
using PriceMonitorApi.Models;
using System.Globalization;

namespace PriceMonitorApi.Services
{
 public class ScraperService
 {
 private readonly HttpClient _httpClient;

 public ScraperService(HttpClient httpClient)
 {
 _httpClient = httpClient;
 }

 public async Task<ProductInfo> ScrapeProductInfoAsync(string url)
 {
 var response = await _httpClient.GetStringAsync(url);

 var htmlDoc = new HtmlDocument();
 htmlDoc.LoadHtml(response);

 var title = htmlDoc.DocumentNode.SelectSingleNode("//h1[@class='product-title']").InnerText.Trim();
 var priceString = htmlDoc.DocumentNode.SelectSingleNode("//span[@class='product-price']").InnerText.Trim();

 if (decimal.TryParse(priceString, NumberStyles.Currency, CultureInfo.InvariantCulture, out var price))
 {
 return new ProductInfo
 {
 Title = title,
 Price = price,
 Date = DateTime.UtcNow
 };
 }

 throw new Exception("Unable to parse price");
 }
 }
}

This snippet turns our HtmlAgilityPack into a holiday magic wand.

1.5 Creating the API Controller

Let’s create a controller that will act like the gatekeeper to our data:

using Microsoft.AspNetCore.Mvc;
using PriceMonitorApi.Models;
using PriceMonitorApi.Services;

namespace PriceMonitorApi.Controllers
{
 [ApiController]
 [Route("api/[controller]")]
 public class ScraperController : ControllerBase
 {
 private readonly ScraperService _scraperService;

 public ScraperController(ScraperService scraperService)
 {
 _scraperService = scraperService;
 }

 [HttpGet("productinfo")]
 public async Task<ActionResult<ProductInfo>> GetProductInfo(string url)
 {
 try
 {
 var productInfo = await _scraperService.ScrapeProductInfoAsync(url);
 return Ok(productInfo);
 }
 catch (Exception ex)
 {
 return BadRequest(new { Message = ex.Message });
 }
 }
 }
}

Our controller ensures data is delivered faster than Santa down the chimney.

1.6 Registering Services in DI Container

Lastly, register your ScraperService to make sure it’s available when needed.

services.AddHttpClient<ScraperService>();

Now your API is at the ready—like Santa’s sleigh on Christmas Eve!

Step 2: Creating the Blazor Application

Blazor helps us decorate our project like a Christmas tree—making it visually appealing and interactive.

2.1 Setting up the Blazor Project

Next, we’ll create a Blazor project that acts as the interface for our price monitoring sleigh ride.

dotnet new blazor -o PriceMonitorBlazor
cd PriceMonitorBlazor

This command sprinkles some holiday magic to set up a basic Blazor WebAssembly project.

2.2 Adding Models

Just like setting up ornaments, add a ProductInfo model in the Blazor project:

namespace PriceMonitorBlazor.Models
{
 public class ProductInfo
 {
 public string Title { get; set; }
 public decimal Price { get; set; }
 public DateTime Date { get; set; }
 }
}

2.3 Creating the Service for API Calls

Create a service to fetch data from our API—think of it as our online shopping buddy:

using PriceMonitorBlazor.Models;
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;

namespace PriceMonitorBlazor.Services
{
 public class ScraperService
 {
 private readonly HttpClient _httpClient;

 public ScraperService(HttpClient httpClient)
 {
 _httpClient = httpClient;
 }

 public async Task<ProductInfo> GetProductInfoAsync(string url)
 {
 var response = await _httpClient.GetFromJsonAsync<ProductInfo>($"https://localhost:5001/api/scraper/productinfo?url={url}");
 return response;
 }
 }
}

2.4 Registering Services in DI Container

Ensure ScraperService is registered so we can inject it into our components.

builder.Services.AddScoped<ScraperService>();

2.5 Creating the Blazor Component

Update Pages/Index.razor to include a fun and interactive interface:

@page "/"
@using PriceMonitorBlazor.Models
@using PriceMonitorBlazor.Services
@inject ScraperService ScraperService

<h3>Price Monitor</h3>

<p>
 <label for="urlInput">Product URL:</label>
 <input id="urlInput" @bind="productUrl" />
 <button @onclick="FetchProductInfo">Fetch Price</button>
</p>

@if (productInfos.Any())
{
 <table class="table">
 <thead>
 <tr>
 <th>Title</th>
 <th>Price</th>
 <th>Date</th>
 </tr>
 </thead>
 <tbody>
 @foreach (var product in productInfos)
 {
 <tr>
 <td>@product.Title</td>
 <td>@product.Price</td>
 <td>@product.Date</td>
 </tr>
 }
 </tbody>
 </table>
}

@code {
 private string productUrl;
 private List<ProductInfo> productInfos = new List<ProductInfo>();

 private async Task FetchProductInfo()
 {
 if (!string.IsNullOrEmpty(productUrl))
 {
 var productInfo = await ScraperService.GetProductInfoAsync(productUrl);
 productInfos.Add(productInfo);
 }
 }
}

It’s like setting up a festive holiday display—making our app interactive and delightful.

Step 3: Connecting Everything Using Docker-Compose

Now let’s connect everything using Docker-Compose, turning our project into a well-oiled sleigh ride.

3.1 Creating Dockerfiles

Create Dockerfiles for both the API and Blazor projects:

PriceMonitorApi/Dockerfile:

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["PriceMonitorApi/PriceMonitorApi.csproj", "PriceMonitorApi/"]
RUN dotnet restore "PriceMonitorApi/PriceMonitorApi.csproj"
COPY . .
WORKDIR "/src/PriceMonitorApi"
RUN dotnet build "PriceMonitorApi.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "PriceMonitorApi.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "PriceMonitorApi.dll"]

PriceMonitorBlazor/Dockerfile:

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["PriceMonitorBlazor/PriceMonitorBlazor.csproj", "PriceMonitorBlazor/"]
RUN dotnet restore "PriceMonitorBlazor/PriceMonitorBlazor.csproj"
COPY . .
WORKDIR "/src/PriceMonitorBlazor"
RUN dotnet build "PriceMonitorBlazor.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "PriceMonitorBlazor.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "PriceMonitorBlazor.dll"]

3.2 Creating docker-compose.yml

Connect all the dots (Christmas lights) with a single docker-compose.yml file:

version: '3.4'

services:
 api:
 image: pricemonitorapi
 build:
 context: ./PriceMonitorApi
 dockerfile: Dockerfile
 ports:
 - "5000:80"
 networks:
 - price-monitor-network

 blazor:
 image: pricemonitorblazor
 build:
 context: ./PriceMonitorBlazor
 dockerfile: Dockerfile
 ports:
 - "5001:80"
 depends_on:
 - api
 networks:
 - price-monitor-network

networks:
 price-monitor-network:
 driver: bridge

Diagrams

Below are the diagrams to help visualize the different components and the data flow, this will help us undestand what’s really going on in our santa world:

System Architecture Diagram

Data Flow Diagram

Sequence Diagram

Component Diagram for Docker Setup

Step 4: URL Management, Refresh, and Automated Periodic Refresh

In this demo we will just store it in memory, but in a real application, you would use a database. For this fun project, let’s stick to in-memory storage.

4.1 Modifying the Service to Manage URLs

First, we’ll make sure our service can handle adding and retrieving URLs, as well as fetching product information:

Update Services/ScraperService.cs:

using PriceMonitorBlazor.Models;
using System.Collections.Generic;
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;

namespace PriceMonitorBlazor.Services
{
 public class ScraperService
 {
 private readonly HttpClient _httpClient;
 private List<string> urls = new List<string>();

 public ScraperService(HttpClient httpClient)
 {
 _httpClient = httpClient;
 }

 public async Task<ProductInfo> GetProductInfoAsync(string url)
 {
 var response = await _httpClient.GetFromJsonAsync<ProductInfo>($"http://localhost:5000/api/scraper/productinfo?url={url}");
 return response;
 }

 public void AddUrl(string url)
 {
 if (!urls.Contains(url))
 {
 urls.Add(url);
 }
 }

 public List<string> GetUrls()
 {
 return urls;
 }

 public void ClearUrls()
 {
 urls.Clear();
 }
 }
}

4.2 Updating the Blazor Component for URL Management and Refresh

Next, update Pages/Index.razor to add URL management, refresh, and automated periodic refresh:

@page "/"
@using PriceMonitorBlazor.Models
@using PriceMonitorBlazor.Services
@inject ScraperService ScraperService

<h3>Price Monitor</h3>

<p>
 <label for="urlInput">Product URL:</label>
 <input id="urlInput" @bind="productUrl" />
 <button @onclick="AddUrl">Add URL</button>
</p>

<p>
 <button @onclick="RefreshPrices">Refresh All Prices</button>
</p>

@if (productInfos.Any())
{
 <table class="table">
 <thead>
 <tr>
 <th>Title</th>
 <th>Price</th>
 <th>Date</th>
 </tr>
 </thead>
 <tbody>
 @foreach (var product in productInfos)
 {
 <tr>
 <td>@product.Title</td>
 <td>@product.Price</td>
 <td>@product.Date</td>
 </tr>
 }
 </tbody>
 </table>
}

@code {
 private string productUrl;
 private List<ProductInfo> productInfos = new List<ProductInfo>();
 private Timer _timer;

 protected override void OnInitialized()
 {
 StartTimer();
 }

 private void StartTimer()
 {
 // Set up the timer to call RefreshPrices every minute (60000 ms)
 _timer = new Timer(async _ => await InvokeAsync(RefreshPrices), null, TimeSpan.Zero, TimeSpan.FromMinutes(1));
 }

 private void AddUrl()
 {
 if (!string.IsNullOrEmpty(productUrl))
 {
 ScraperService.AddUrl(productUrl);
 productUrl = string.Empty;
 }
 }

 private async Task RefreshPrices()
 {
 productInfos.Clear();
 var urls = ScraperService.GetUrls();

 foreach (var url in urls)
 {
 var productInfo = await ScraperService.GetProductInfoAsync(url);
 productInfos.Add(productInfo);
 }
 StateHasChanged();
 }
}

In this updated component:

We use a Timer to periodically call the RefreshPrices method every minute.
The StartTimer method initializes the timer to start immediately and then trigger every 60 seconds.
The OnInitialized lifecycle method calls StartTimer when the component is initialized to start the periodic refresh.

4.3 Running the Solution

To run the updated Blazor application with the new features, rebuild and restart your Docker containers:

docker-compose build
docker-compose up

After loading http://localhost:5001 in your browser, the Blazor app should now automatically refresh product prices every minute in addition to allowing manual refreshes and URL management.

Conclusion

Building this price monitoring system has been a festive blast! Not only did it save me from the stress of daily price checks, but it also showcased the magic of modern web technologies.

Festive Tech Calendar 2024

I created this post as part of the Festive Tech Calendar 2024 event, which brings together tech enthusiasts, innovators, and digital dreamers to share knowledge and celebrate the fusion of festive spirit and technological marvels. This initiative is not just about learning and connecting but also about giving back.

Festive Tech Calendar 2024 is supporting the Beatson Cancer Charity this year. The Beatson Cancer Charity is dedicated to supporting people affected by cancer, their families, and the healthcare professionals who care for them. More information about their incredible work can be found at https://www.beatsoncancercharity.org/.

Check out the Festive Tech Calendar website at https://festivetechcalendar.com for frequently asked questions and more details about the event.

HO HO HO!

Creating this project has been a wonderful way to contribute to the festive tech community and support a great cause at the same time.

I hope you found this guide helpful and that it inspires you to explore more ways to use technology to simplify everyday tasks.

If you have any questions or need further assistance, please don’t hesitate to reach out.

Happy coding!

Aangepaste ValidationAttribute en Blazor-validatie

Fri, 29 Mar 2024 00:00:00 +0000

# Custom everything

As you have probably seen on all my post I really try to keep everything as clean as possible, as I’ve already wrote posts regarding custom attributes, custom exception handling, service collection injection, etc.

I’ve realized with time that this kind of way of coding gives me and my team a way to improve overtime, find issues easier and separate the code as much as possible.

Yeah after this cool story I have you just now, I’ve been working on Blazor lately as usual and I found that, after years and years of developing, you can create custom validation attributes.

Yeah it’s funny, after all this years…

Custom validation attributes

The idea came from work actually, we always do validation on all places but I had some fields that required kind of the same validation process, so I thought that there might be something there…. like custom validation attributes!

So I fired up Microsoft documentation for that and found out that yeah, you can create custom validation attributes and assign them to the properties, just like this:

public class StringLengthRangeAttribute : ValidationAttribute
{
 public int Minimum { get; set; }
 public int Maximum { get; set; }

 public StringLengthRangeAttribute()
 {
 this.Minimum = 0;
 this.Maximum = int.MaxValue;
 }

 public override bool IsValid(object value)
 {
 string strValue = value as string;
 if (!string.IsNullOrEmpty(strValue))
 {
 int len = strValue.Length;
 return len >= this.Minimum && len <= this.Maximum;
 }
 return true;
 }
}

and use it in a simple class like this:

[Required]
[StringLengthRange(Minimum = 10, ErrorMessage = "Must be >10 characters.")]

[StringLengthRange(Maximum = 20)]

[Required]
[StringLengthRange(Minimum = 10, Maximum = 20)]

Custom validator

So I have this validator that I need to have for some specific business case that will countain 20 first characters that will bye 9 numbers and a hyphen, and end with 2 chars that will usually be the country code, so something like this: 123456789-123456789-ES

I ended up coming with something like this, it’s really simple but it works:

using System;
using System.ComponentModel.DataAnnotations;
using System.Text.RegularExpressions;

public class SpecialStringValidatorAttribute : ValidationAttribute
{
 private const int TotalLength = 22;
 private const string Pattern = @"^(\d{10})-(\d{10})-([A-Za-z]{2})$";

 protected override ValidationResult IsValid(object value, ValidationContext validationContext)
 {
 string strValue = value as string;

 if (!string.IsNullOrEmpty(strValue))
 {
 if (strValue.Length != TotalLength)
 {
 return new ValidationResult($"The string must be {TotalLength} characters long.");
 }

 if (!Regex.IsMatch(strValue, Pattern))
 {
 return new ValidationResult("The string must follow the pattern: 1234567890-1234567890-AB");
 }

 return ValidationResult.Success;
 }

 return new ValidationResult("The string cannot be null or empty.");
 }
}

Tests

I wrote some test for them too, just in case:

public class SpecialStringValidatorTests
{
 [Theory]
 [InlineData("1234567890-1234567890-AB", true)]
 [InlineData("1234567890-1234567890-XY", true)]
 [InlineData("1234567890-1234567890-A1", false)]
 [InlineData("1234567890-1234567890-A", false)]
 [InlineData("1234567890-123456789-AB", false)]
 [InlineData("1234567890-1234567890", false)]
 [InlineData("1234567890-1234567890-ABCDE", false)]
 public void SpecialStringValidatorTest(string input, bool expectedResult)
 {
 // Arrange
 var validator = new SpecialStringValidatorAttribute();

 // Act
 var result = validator.IsValid(input);

 // Assert
 Assert.Equal(expectedResult, result);
 }
}

And when ran I had this results:

Microsoft (R) Test Execution Command Line Tool Version 16.9.1
Copyright (c) Microsoft Corporation. All rights reserved.

Starting test execution, please wait...

A total of 1 test files matched the specified pattern.

Test run in progress...

Passed! - SpecialStringValidatorTests.SpecialStringValidatorTest(input: "1234567890-1234567890-AB", expectedResult: True)
Passed! - SpecialStringValidatorTests.SpecialStringValidatorTest(input: "1234567890-1234567890-XY", expectedResult: True)
Passed! - SpecialStringValidatorTests.SpecialStringValidatorTest(input: "1234567890-1234567890-A1", expectedResult: False)
Passed! - SpecialStringValidatorTests.SpecialStringValidatorTest(input: "1234567890-1234567890-A", expectedResult: False)
Passed! - SpecialStringValidatorTests.SpecialStringValidatorTest(input: "1234567890-123456789-AB", expectedResult: False)
Passed! - SpecialStringValidatorTests.SpecialStringValidatorTest(input: "1234567890-1234567890", expectedResult: False)
Passed! - SpecialStringValidatorTests.SpecialStringValidatorTest(input: "1234567890-1234567890-ABCDE", expectedResult: False)

Test Run Successful.
Total tests: 7
 Passed: 7
 Total time: 1.7296 Seconds

Custom validation and Blazor

So now that I know that his can be used, it’s clearly a good idea to implement it into Blazor right?

Let’s assume I have this form, that will use the model Person that I showed before:

@using Models
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<EditForm Model=@Person FormName="PersonForm">
 <DataAnnotationsValidator/>
 <ValidationSummary/>
 <div class="form-group">
 <label for="Name">Name</label>
 <InputText @bind-Value=Person.Name class="form-control" id="Name" />
 <ValidationMessage For="() => Person.Name"/>
 </div>
 <div class="form-group">
 <label for="MySpecialString">My special string</label>
 <InputText @bind-Value=Person.MySpecialString class="form-control" id="Name" />
 <ValidationMessage For="() => Person.MySpecialString"/>
 </div>
 <div class="form-group">
 <label for="Age">Age</label>
 <InputNumber @bind-Value=Person.Age class="form-control" id="Age" />
 <ValidationMessage For=@(() => Person.Age) />
 </div>
 <input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>

@code {
 Person Person = new Person();
}

As soon as we run this, we get the following errors:

And if we just put what we want, we get the following thing, all clear:

To be honest for me it’s quite clear that we should move the logic at least to validate those forms into custom validation attribues, it gives us freedom to store the code for that login in a single place, and we can use it later for an API or another application.

Hope you liked it, if you have any questions or you want to get in touch, don’t hestiate and contact me!

Aangepaste uitzonderingsafhandeling in .NET API

Sun, 01 Oct 2023 00:00:00 +0000

Exceptions are bad, we know right? But what if we have to handle them?

What happens when we have an exception, for example, on an API, it displays a stack message that includes a lot of information that we might want to remove from the response that our users get.

For the demo, I’ve created an dotnet API and added a method that will throw an exception:

[HttpGet]
[Route("GetWithoutExceptionHandler")]
public Task GetWithoutExceptionHandler()
{
 throw new Exception("This is a custom exception!");
}

If we throw an exception, it looks like this:

System.Exception: This is a custom exception!
 at CustomExceptionHandleDemo.Controllers.WeatherForecastController.GetWithoutExceptionHandler()
 at lambda_method16(Closure , Object , Object[] )
 at Microsoft.AspNetCore.Mvc.Infrastructure.ActionMethodExecutor.AwaitableResultExecutor.Execute(IActionResultTypeMapper mapper, ObjectMethodExecutor executor, Object controller, Object[] arguments)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.<InvokeActionMethodAsync>g__Logged|12_1(ControllerActionInvoker invoker)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.<InvokeNextActionFilterAsync>g__Awaited|10_0(ControllerActionInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Rethrow(ActionExecutedContextSealed context)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeInnerFilterAsync()
--- End of stack trace from previous location ---
 at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeFilterPipelineAsync>g__Awaited|20_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
 at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
 at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
 at Swashbuckle.AspNetCore.SwaggerUI.SwaggerUIMiddleware.Invoke(HttpContext httpContext)
 at Swashbuckle.AspNetCore.Swagger.SwaggerMiddleware.Invoke(HttpContext httpContext, ISwaggerProvider swaggerProvider)
 at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

This looks normal, this is what you get from an exception, but for me, it’s displaying a lot of information, if you have libraries and stuff, it could show sensible information regarding your client, your project or other stuff to someone that could be trying to see stuff.

This is what it looks on Swagger:

Creating a custom exception

This step could be avoided, since we know what exception will be throw, in this case a Exception, but for me, having your custom exceptions is the better since you have more control of what you’re throwing.

In this case, I just created an object CustomException that inherits from Exception:

namespace CustomExceptionHandleDemo.Exceptions
{
 public class CustomException : Exception
 {
 /// <summary>
 /// Constructor for <see cref="CustomException"/>
 /// </summary>
 public CustomException() { }

 /// <summary>
 /// Constructor for <see cref="CustomException"/>
 /// </summary>
 /// <param cref="string" name="message">Parameter for message</param>
 public CustomException(string message) : base(message) { }

 /// <summary>
 /// Constructor for <see cref="CustomException"/>
 /// </summary>
 /// <param cref="string" name="message">Parameter for message</param>
 /// <param cref="Exception" name="inner">Parameter for inner</param>
 public CustomException(string message, Exception inner) : base(message, inner) { }
 }
}

After we have created our custom exception, let’s update our method to throw CustomException instead of Exception:

[HttpGet]
[Route("GetWithoutExceptionHandler")]
public Task GetWithoutExceptionHandler()
{
 throw new CustomException("This is a custom exception!");
}

This for now will not change anything but the stack trace will show that the object that was thrown is a CustomException instead of Exception, take a look at the start of the stack trace:

CustomExceptionHandleDemo.Exceptions.CustomException: This is a custom exception!
 at CustomExceptionHandleDemo.Controllers.WeatherForecastController.GetWithoutExceptionHandler()
 at lambda_method24(Closure , Object , Object[] )
 at Microsoft.AspNetCore.Mvc.Infrastructure.ActionMethodExecutor.AwaitableResultExecutor.Execute(IActionResultTypeMapper mapper, ObjectMethodExecutor executor, Object controller, Object[] arguments)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.<InvokeActionMethodAsync>g__Logged|12_1(ControllerActionInvoker invoker)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.<InvokeNextActionFilterAsync>g__Awaited|10_0(ControllerActionInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Rethrow(ActionExecutedContextSealed context)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeInnerFilterAsync()
--- End of stack trace from previous location ---
 at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeFilterPipelineAsync>g__Awaited|20_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
 at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
 at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
 at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
 at Swashbuckle.AspNetCore.SwaggerUI.SwaggerUIMiddleware.Invoke(HttpContext httpContext)
 at Swashbuckle.AspNetCore.Swagger.SwaggerMiddleware.Invoke(HttpContext httpContext, ISwaggerProvider swaggerProvider)
 at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

Creating a ExceptionFilterAttribute

Microsoft has given us a way to handle exceptions after they have thrown, you can check more information here.

But so far the documentation that they give us is:

An abstract filter that runs asynchronously after an action has thrown an Exception. Subclasses must override OnException(ExceptionContext) or OnExceptionAsync(ExceptionContext) but not both.

So let’s create one then, we’re going to create CustomExceptionFilterAttribute in which we are going to override OnException:

using Microsoft.AspNetCore.Mvc.Filters;
using Microsoft.AspNetCore.Mvc;
using CustomExceptionHandleDemo.Exceptions;

namespace CustomExceptionHandleDemo.ExceptionFilterAttributes
{
 public class CustomExceptionFilterAttribute : ExceptionFilterAttribute
 {
 /// <summary>
 /// OnException
 /// </summary>
 /// <param cref="ExceptionContext" name="context">Parameter for context</param>
 public override void OnException(ExceptionContext context)
 {
 if (context.Exception is CustomException)
 {
 context.HttpContext.Response.StatusCode = 500;
 context.Result = new ObjectResult(context.Exception.Message);
 }
 }
 }
}

As you can see, we are taking a look at the ExceptionContext, when the exception is a type of CustomException, we do something.

This something is updating the response and the status code of what we are going to return.

In order to update the status code, we must update context.HttpContext.Response.StatusCode and in order to return the result, we have to update the context.Result by giving it an object that is inherited from ActionResult.

This is a filter, so it means we have to add it something by adding [CustomExceptionFilter].

Using the filter

Now, let’s replicate the method we have and add this filter so it takes action, our API endpoint will end up like this:

using CustomExceptionHandleDemo.ExceptionFilterAttributes;
using CustomExceptionHandleDemo.Exceptions;
using Microsoft.AspNetCore.Mvc;

namespace CustomExceptionHandleDemo.Controllers
{
 [ApiController]
 [Route("[controller]")]
 public class WeatherForecastController : ControllerBase
 {
 public WeatherForecastController()
 {
 }

 [HttpGet]
 [Route("GetWithoutExceptionHandler")]
 public Task GetWithoutExceptionHandler()
 {
 throw new CustomException("This is a custom exception!");
 }

 [HttpGet]
 [Route("GetWithExceptionHandler")]
 [CustomExceptionFilter]
 public Task GetWithExceptionHandler()
 {
 throw new CustomException("This is a custom exception!");
 }
 }
}

As you can see, we have a new method called GetWithExceptionHandler, that has the same logic that GetWithoutExceptionHandler has, but in this case, we’ve added the filter [CustomExceptionFilter] to the method .

The result is the following after we run the method, I’ll display an image, because it’s not showing the stack trace anymore:

So with this we’ve created a custom exception, a filter to override what happens when we throw and exception and use it on a method.

This can be used for a lot of stuff like logging and knowing what, when and where the error happens.

Een betere manier om afhankelijkheden te injecteren

Mon, 04 Sep 2023 00:00:00 +0000

Whenever I’m building stuff like services, repositories, attributes or whatever to inject into my applications, there’s this step that we must do, which is actually adding the services to the application.

This is always the same, you go to Program.cs, then proceed to at some part of the file add builder.Services.AddScoped<MyService>(); in order to inject the service.

Something like this:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

// Repositories
builder.Services.AddScoped<ARepository>(); // 👀
builder.Services.AddScoped<BRepository>(); // 👀

// Services
builder.Services.AddScoped<AService>(); // 👀
builder.Services.AddScoped<BService>(); // 👀
builder.Services.AddScoped<CService>(); // 👀
builder.Services.AddScoped<DService>(); // 👀

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
 app.UseExceptionHandler("/Error");
 // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
 app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

I mean, it works, but I’m picky, and I don’t really like it.

Let’s say that we have multiple dependency injections that we want to do, and they are not really the same stuff, in my case this could be something like having a library that contains all the repositories, another library that has all the services and lastly, another library that contains attributes.

In that case, can you imagine the amount of lines we have to add to Program.cs.

Let’s say that we have a library that contains some services, if we want to include all our services, we have to work with IServiceCollection.

So we’re going to create a static class that will have a static method called AddServices that returns a IServiceCollection.

In this case, it will be named IServiceCollectionServicesExtensions.

/// <summary>
/// IServiceCollectionServicesExtensions class
/// </summary>
public static class IServiceCollectionServicesExtensions
{
 /// <summary>
 /// AddCoreServices
 /// </summary>
 /// <param cref="IServiceCollection" name="services">Parameter for <see cref="IServiceCollection"/></param>
 /// <returns>An object of type <see cref="IServiceCollection"/></returns>
 public static IServiceCollection AddServices(this IServiceCollection services)
 {
 services
 .AddScoped<AService>()
 .AddScoped<BService>()
 .AddScoped<CService>()
 .AddScoped<DService>();

 return services;
 }
}

Not only that, we also have another library that include some repositories which are being used by this services, so let’s do the same.

/// <summary>
/// IServiceCollectionServicesExtensions class
/// </summary>
public static class IServiceCollectionServicesExtensions
{
 /// <summary>
 /// AddCoreServices
 /// </summary>
 /// <param cref="IServiceCollection" name="services">Parameter for <see cref="IServiceCollection"/></param>
 /// <returns>An object of type <see cref="IServiceCollection"/></returns>
 public static IServiceCollection AddRepositories(this IServiceCollection services)
 {
 services
 .AddScoped<ARepository>()
 .AddScoped<BRepository>();

 return services;
 }
}

Now, we have our repositories and services methods to inject created, but how do we use them?

Let’s go back to our Program.cs and add the following:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

// Repositories
builder.Services.AddRepositories(); // 👀

// Services
builder.Services.AddServices(); // 👀

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
 app.UseExceptionHandler("/Error");
 // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
 app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

This looks way cleaner, isn’t it? Well with that, we have successfully injected some services and repositories, but now it looks nicer and we actually have what we inject in the external library.

Dependency injection met attributen in .NET API

Tue, 22 Aug 2023 00:00:00 +0000

Dependency injection is probably one of the best features we have on .NET at this point. There’s no way in any posible case that you’re not using it, so if you are like me, you pretty much want to add it to all the implementations you make.

Filters, as per the official Microsoft’s documentation:

Filters in ASP.NET Core allow code to be run before or after specific stages in the request processing pipeline.

Built-in filters handle tasks such as:

Authorization, preventing access to resources a user isn’t authorized for.

Response caching, short-circuiting the request pipeline to return a cached response.

Custom filters can be created to handle cross-cutting concerns. Examples of cross-cutting concerns include error handling, caching, configuration, authorization, and logging. Filters avoid duplicating code.

I work a lot with APIs and there are some stuff that must run every single request, or pretty much all of them so, ideally what we want to do is work with it plus…. dependency injection!

But it’s a bit trick sometimes, it doesn’t work as we want if we want to inherit from ActionAttribute so we need to work with TypeFilterAttribute, which let us do stuff when overriding OnActionExecutionAsync.

I usually create this filters to do some logging, so we’re gonna use that as example:

/// <summary>
/// LoggedQueryAttribute class
/// </summary>
public class LoggedQueryTypeFilterAttribute : TypeFilterAttribute
{
 /// <summary>
 /// Constructor for <see cref="LoggedQueryTypeFilterAttribute"/>
 /// </summary>
 public LoggedQueryTypeFilterAttribute() : base(typeof(LoggedQueryFilter))
 {
 }

 /// <summary>
 /// LoggedQueryFilter class
 /// </summary>
 private class LoggedQueryFilter : IAsyncActionFilter
 {
 /// <summary>
 /// <see cref="_loggingService"/> object
 /// </summary>
 private readonly LoggingService _loggingService;

 /// <summary>
 /// Constructor for <see cref="LoggedQueryFilter"/>
 /// </summary>
 /// <param cref="LoggingService" name="loggingService">Parameter for loggingService</param>
 public LoggedQueryFilter(LoggingService loggingService)
 {
 _loggingService = loggingService;
 }

 /// <summary>
 /// OnActionExecutionAsync
 /// </summary>
 /// <param cref="ActionExecutingContext" name="context">Parameter for context</param>
 /// <param cref="ActionExecutionDelegate" name="next">Parameter for next</param>
 public async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
 {
 // Get properties
 var properties = (Request)context.ActionArguments.First().Value!;

 // Get call from context
 var call = context.HttpContext.Request.Path.Value!;

 // Logging
 _loggingService.LogCustomEvent(call);

 // Continue call
 await next();
 }
 }
}

Logic is pretty simple, we get the body by accessing the context object with context.ActionArguments.First().Value, alsowe ge the method call with context.HttpContext.Request.Path.Value.

Then we just call our method from our service, in this case is _loggingService.LogCustomEvent(call).

Then, we must call await next();, because the pipeline must continue.

This is for the attribute, now, we must actually include this attribute to a method.

[LoggedQueryTypeFilterAttribute]
public ActionResult<string> TestFilter()
{
 return Ok("Hello world!");
}

Hope you liked it, if you have any questions or you want to get in touch, don’t hestiate and contact me!

Swagger-documentatie met externe bibliotheken

Fri, 17 Feb 2023 00:00:00 +0000

Using mutiple libraries to split your code for future cases is a good thing. Personally I love doing it, if I can split my logic so it can be reused in other projects or parts of the projects.

For me at least, it’s a must to split the data models, that includes the Entity Framework, so it can be referenced and used in a Console application, a Blazor application or an API.

Let’s take a look to an example of how I do things, this is an screenshot of a project that have a few applications and a shared library that has all the models.

This is an example of a class that I moved from the API project with documentation with summary on each property and class.

namespace CustomLibrariesDocumentation.Models
{
 /// <summary>
 /// WeatherForecast class
 /// </summary>
 public class WeatherForecast
 {
 /// <summary>
 /// Gets or sets the Date
 /// </summary>
 public DateOnly Date { get; set; }

 /// <summary>
 /// Gets or sets the TemperatureC
 /// </summary>
 public int TemperatureC { get; set; }

 /// <summary>
 /// Gets or sets the TemperatureF
 /// </summary>
 public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

 /// <summary>
 /// Gets or sets the Summary
 /// </summary>
 public string? Summary { get; set; }
 }
}

If we reference it to the Console application and we start to use the model, we can see the documentation, that’s a standard feature in Visual Studio so it works fine, as you can see here:

But then, if we reference it to the API and we go to Swagger, there’s no summary documentation.

How do we fix this?

First, we have to enable XML comments on the library, in order to do this, you need to update the projects settings and enable ``:

This will generate some files on the build folder that end with the file extension xml, as you can see here:

Now that we have this done, we have to add some stuff on the Program.cs, in order to swagger to read those files, this is because by default it only loads the XML definition of the project it’s on.

It uses a method that we have inside the AddSwaggerGen that is called IncludeXmlComments.

The idea is that if we have all the xml files, we are going to force loading them onto the Swagger.

builder.Services.AddSwaggerGen(s =>
{
 // Comments
 var allXmlFiles = Directory.GetFiles(AppContext.BaseDirectory, "*.xml");

 foreach (string xmlFiles in allXmlFiles)
 {
 s.IncludeXmlComments(xmlFiles);
 }
});

It’s straight forwared, we get the xml files from the build directory and add them with the IncludeXmlComments method.

Now we load again the API and we check if we can see the documentation.

And you can see that we can see the documentation!

I hope it helped you, if you have any question feel free to contact me!

Lokale branches opruimen in Git

Mon, 30 Jan 2023 00:00:00 +0000

Have you ever got to a point where you had too many local branches? It happens to me a lot, since we use branches for each feature, bug, or chore.

I end up with something like this and it get’s super dirty after a while

It really anoys me, so I’ll just share a quick command you can run on your console to do this cleanup!

I found this command in Stack Overflow in the following answer by Robert Corvus, which is a version that runs on Powerhsell.

Please be careful when running this command becase you can lose your changes

Before running it, remember to update the MY_MASTER_BRANCH_NAME to your main branch, which can be master like I use or the new ones that come by default called main.

git branch | %{ $_.Trim() } | ?{ $_ -ne 'MY_MASTER_BRANCH_NAME' } | %{ git branch -D $_ }

After you run this command, you will get an output like this

Hope it’s helpful to you!

Identity-routes bijwerken in ASP.NET Core 7

Mon, 23 Jan 2023 00:00:00 +0000

Even wondering how Microsoft name stuff so rare? I’ve always thouth that they don’t really do it that great but, well that’s what it is!

The good thing about this is that you can pretty much can change everything while you are developing!

Have you ever gotten into a page and you instantly realize this is an ASP.NET Web project just by doing the register or login process?

It has happened to me a lot because by default in the project you create, you have these urls to do the login and register process(also you have a lot of other pages too).

So this tutorial shows a way to update those URLs so the look nicer on your project!!

Default behavior

When we are creating a Blazor project and we decide to use it with Identity, it displays something like this:

And the when we try to do the login or register process, we go either /Identity/Account/Login or /Identity/Account/Register.

But what if I tell you that you can acutally update those URLs to be different?

Scaffolding the `Login` and `Register` pages

In order to update these pages, Microsoft hides them, but you can scaffold them quickly and do the changes you want!

In order to do that you need to go and Add Scaffolded Item in the context menu of the project, just like this:

Then it will popup a modal and you have to select Identity twice and click on Add:

After this one, it will popup yet another modal, where you can select which pages from the entire Identity you want to update. There’s a lot of pages that you can update, but we’re going to focus on Account/Login and Account/Register:

Now let it work for a little bit and then check the Solution Explorer, you’ll find a few new files:

These new files are the login and register page that ASP.NET adds to your project when you select it to add Identity!

Updating urls

As you’ve probably noticed, this files are razor files, since their extension is cshtml, so we’re just going to use a directive to update the page’s url:

@page "/login"
@model LoginModel

@{
 ViewData["Title"] = "Log in";
}

<h1>@ViewData["Title"]</h1>
<div class="row">
 <div class="col-md-4">
 <section>
 <form id="account" method="post">
 <h2>Use a local account to log in.</h2>
 <hr />
 <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
 <div class="form-floating mb-3">
 <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="name@example.com" />
 <label asp-for="Input.Email" class="form-label">Email</label>
 <span asp-validation-for="Input.Email" class="text-danger"></span>
 </div>
 <div class="form-floating mb-3">
 <input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" placeholder="password" />
 <label asp-for="Input.Password" class="form-label">Password</label>
 <span asp-validation-for="Input.Password" class="text-danger"></span>
 </div>
 <div class="checkbox mb-3">
 <label asp-for="Input.RememberMe" class="form-label">
 <input class="form-check-input" asp-for="Input.RememberMe" />
 @Html.DisplayNameFor(m => m.Input.RememberMe)
 </label>
 </div>
 <div>
 <button id="login-submit" type="submit" class="w-100 btn btn-lg btn-primary">Log in</button>
 </div>
 <div>
 <p>
 <a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
 </p>
 <p>
 <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
 </p>
 <p>
 <a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
 </p>
 </div>
 </form>
 </section>
 </div>
 <div class="col-md-6 col-md-offset-2">
 <section>
 <h3>Use another service to log in.</h3>
 <hr />
 @{
 if ((Model.ExternalLogins?.Count ?? 0) == 0)
 {
 <div>
 <p>
 There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article
 about setting up this ASP.NET application to support logging in via external services</a>.
 </p>
 </div>
 }
 else
 {
 <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
 <div>
 <p>
 @foreach (var provider in Model.ExternalLogins!)
 {
 <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
 }
 </p>
 </div>
 </form>
 }
 }
 </section>
 </div>
</div>

@section Scripts {
 <partial name="_ValidationScriptsPartial" />
}

As you can see most of the stuff is the same, but if you take a look at the very first line in the class, I’ve updated what we had before from:

@page

@page "/login"

Well, that was easy, wasn’t it? Now let’s do a quick test to see if it works.

First of all, let’s go to the default page that we have at first, to check if that’s still working:

Which it doesn’t! So now let’s go and test our new url which is /login:

And it works!!

Now let’s do the same for the register, we update its page and add the path we want in the @page directive and let’s do a test!

@page "/register"
@model RegisterModel
@{
 ViewData["Title"] = "Register";
}

<h1>@ViewData["Title"]</h1>

<div class="row">
 <div class="col-md-4">
 <form id="registerForm" asp-route-returnUrl="@Model.ReturnUrl" method="post">
 <h2>Create a new account.</h2>
 <hr />
 <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
 <div class="form-floating mb-3">
 <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="name@example.com" />
 <label asp-for="Input.Email">Email</label>
 <span asp-validation-for="Input.Email" class="text-danger"></span>
 </div>
 <div class="form-floating mb-3">
 <input asp-for="Input.Password" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
 <label asp-for="Input.Password">Password</label>
 <span asp-validation-for="Input.Password" class="text-danger"></span>
 </div>
 <div class="form-floating mb-3">
 <input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
 <label asp-for="Input.ConfirmPassword">Confirm Password</label>
 <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
 </div>
 <button id="registerSubmit" type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
 </form>
 </div>
 <div class="col-md-6 col-md-offset-2">
 <section>
 <h3>Use another service to register.</h3>
 <hr />
 @{
 if ((Model.ExternalLogins?.Count ?? 0) == 0)
 {
 <div>
 <p>
 There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article
 about setting up this ASP.NET application to support logging in via external services</a>.
 </p>
 </div>
 }
 else
 {
 <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
 <div>
 <p>
 @foreach (var provider in Model.ExternalLogins!)
 {
 <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
 }
 </p>
 </div>
 </form>
 }
 }
 </section>
 </div>
</div>

@section Scripts {
 <partial name="_ValidationScriptsPartial" />
}

I’ve updated the top part with @page "/login" and now we test if it works:

Also works!!

That’s it

I hope you learned how to update this urls, mostly because on some projects when you’re doing the urls a certain way and then the Identity looks different, it sucks haha!

If you need anything just tweet at me or send me an email and I’ll try to give a hand!

Aangepaste attributen in .NET 6 Core API

Fri, 09 Dec 2022 00:00:00 +0000

Custom attributes are really a good thing to use, I’ve come to start using them very recently, because they allow me to create a single one of them and reusing them on either the controller, the class, or the method itself.

They really help when you want to do some security stuff like checking for headers, or check the value of a parameter that you definitely need.

In my case we are going to use it on the an .NET Core API project, where we are going to check if all the request contain a certain header.

HeaderCheckAttribute

So after we created our cool .NET Core API, let’s create a folder to store our stuff, because we like using folders.

And then we are going to add the logic to our HeaderCheckAttribute class.

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Filters;

namespace DotNet6CustomAttribute.Attributes
{
 public class HeaderCheckAttribute : ActionFilterAttribute
 {
 public override void OnActionExecuting(ActionExecutingContext context)
 {
 // Get all headers
 var headers = context.HttpContext.Request.Headers;

 // Check if headers has x-dotnet-6-custom-attribute
 if (!headers.ContainsKey("x-dotnet-6-custom-attribute"))
 {
 context.Result = new BadRequestObjectResult("The header x-dotnet-6-custom-attribute is missing");
 }
 else if (string.IsNullOrEmpty(headers["x-dotnet-6-custom-attribute"]))
 {
 context.Result = new BadRequestObjectResult("The header x-dotnet-6-custom-attribute can't be null or empty");
 }

 base.OnActionExecuting(context);
 }
 }
}

Basically the logic is, first it checks for a header with the key x-dotnet-6-custom-attribute and the if it’s there, it check if it has values.

If both of those expressions are true, it will reutnr a BadRequestObjectResult with a certain message.

Adding it to the controller

We can add this logic to multiple places, we can add directly to the entire controller, or we can add it to some of the methods, we are going to add it first to methods and then to the entire controller.

So let’s decorate the WeatherForecastController class with them.

using DotNet6CustomAttribute.Attributes;
using Microsoft.AspNetCore.Mvc;

namespace DotNet6CustomAttribute.Controllers
{
 [ApiController]
 [Route("[controller]")]
 public class WeatherForecastController : ControllerBase
 {
 private static readonly string[] Summaries = new[]
 {
 "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
 };

 private readonly ILogger<WeatherForecastController> _logger;

 public WeatherForecastController(ILogger<WeatherForecastController> logger)
 {
 _logger = logger;
 }

 [HttpGet]
 [Route("GetWeatherForecastWithCheck")]
 [HeaderCheckAttribute]
 public IEnumerable<WeatherForecast> GetWithCheck()
 {
 return Enumerable.Range(1, 5).Select(index => new WeatherForecast
 {
 Date = DateTime.Now.AddDays(index),
 TemperatureC = Random.Shared.Next(-20, 55),
 Summary = Summaries[Random.Shared.Next(Summaries.Length)]
 })
 .ToArray();
 }

 [HttpGet]
 [Route("GetWeatherForecastWithoutCheck")]
 public IEnumerable<WeatherForecast> GetWithoutCheck()
 {
 return Enumerable.Range(1, 5).Select(index => new WeatherForecast
 {
 Date = DateTime.Now.AddDays(index),
 TemperatureC = Random.Shared.Next(-20, 55),
 Summary = Summaries[Random.Shared.Next(Summaries.Length)]
 })
 .ToArray();
 }
 }
}

Let’s run the project!

We have 2 functions in there: GetWeatherForecastWithCheck and GetWeatherForecastWithoutCheck, one of them will fail and other will not, but let’s check it out on Swagger!

As you can see one of the returns an 400 error with our message, and the other returns the values, now to fully test this, let’s run Postman and add a header so we also see the data using GetWeatherForecastWithCheck.

Postman

Now running on Postman, we add the header and we see that the error message has changed, since now we do supply the header but there’s no value to it

If we add a value to it, we finally get the values!

That’s it

Well that’s it! Pretty simple right? Well now you know how to create an attribute adn assign it to methods and controllers!

Have fun with them!

Code

This entire project is on Github and you can find it here!

If you have any issues or question, feel free to contact me on any social media at @emimontesdeoca (in Twitter is actually @emimontesdeocaa with two aa at the end). You can also find most of my socials on the blog’s header.

Hope you liked the post! Cya!

Laadcomponenten afhandelen in Blazor

Tue, 19 Jul 2022 00:00:00 +0000

Blazor is awesome, truly awesome, specially when we do async stuff like loading boxes and it just looks good.

I’ve been trying to do multiple ways on how to handle loading pages, states, components, etc. And I think I finally found the perfect way to do it the way I want.

Idea

Instead of rewritting the logic for loading on each page or component, we build parent component with a ChildComponent, this will give us the change to just reuse multiple times.

LoadingComponent code

Code is pretty simple tho, theres not so much to do, a basic if with a loading property, a toggle function inside and it’s done!

@if (_loaded)
{
 <div class="text-center">
 <div class="spinner-border" role="status">
 <span class="sr-only"></span>
 </div>
 </div>
}
else
{
 @ChildContent
}

@code {
 private bool _loaded = true;

 [Parameter]
 public RenderFragment? ChildContent { get; set; }

 public void ToggleLoad(bool state)
 {
 _loaded = state;
 }
}

Usage

Usage is pretty simple, for the sake of testing we are going to use a new page and we put our content inside the created LoadingComponent component that we just created.

@page "/loading"
@using LoadingBoxes.Components

<LoadingBoxes.Components.LoadingComponent @ref=loadingComponent>
 This is some content
</LoadingBoxes.Components.LoadingComponent>

@code {
 private LoadingComponent loadingComponent;


 protected override async Task OnInitializedAsync()
 {
 // We are going to simulate some load
 await Task.Delay(5000);

 loadingComponent.ToggleLoad(false);
 }

}

This is how it looks

More funny example

Let’s say that we have multiple components that each of them have their loading times, we can build something that looks good on that!

Let’s create a fake loading component that we can reuse called FakeLoadingComponent.

@using LoadingBoxes.Components

<LoadingBoxes.Components.LoadingComponent @ref=loadingComponent>
 It took @ellapsedTime seconds!
</LoadingBoxes.Components.LoadingComponent>

@code {
 private LoadingComponent loadingComponent = new();
 private int ellapsedTime = 0;
 private Random rnd = new();

 protected override async Task OnInitializedAsync()
 {
 var random = rnd.Next(0, 5000);

 // We are going to simulate some load
 await Task.Delay(random);

 ellapsedTime = random/ 1000;

 loadingComponent.ToggleLoad(false);
 StateHasChanged();
 }
}

Then we just update the Loading page with multiple FakeLoadingComponent components and check the result!!

@page "/loading"
@using LoadingBoxes.Components

<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>

Now this looks way better

And that’s it!

Hope you liked the post!

De vervaldatum van een certificaat ophalen

Fri, 27 May 2022 00:00:00 +0000

There’s this few web apps that help you check the current status of the certificates from the domains we use, and we have a few of them.

I created an Azure Function that runs once a day and checks a few of the domains I need to take a look, it’s a super simple console application that if the expiration date of the certificate is less than 30 days, it will send an email.

The logic itself of how the function works won’t be shown, I’d like to show the function that does the base check of the certificate and what data we get.

The function

static async Task<X509Certificate2> CheckCertificateAsync(string urlPath)
{
 var certificate = new X509Certificate2();
 var httpClientHandler = new HttpClientHandler
 {
 ServerCertificateCustomValidationCallback = (request, cert, chain, policyErrors) =>
 {
 certificate = new X509Certificate2(cert);
 return true;
 }
 };

 using HttpClient httpClient = new HttpClient(httpClientHandler);
 await httpClient.SendAsync(new HttpRequestMessage(HttpMethod.Head, urlPath));

 return certificate;
}

This method CheckCertificateAsync will return us a X509Certificate2 certificate that will let us do a bunch of stuff, including taking a look at the expiration date.

Serialized result

This is the serialized value of the certificate object:

{
 "Archived":false,
 "Extensions":[
 {
 "KeyUsages":160,
 "Critical":true,
 "Oid":{
 "Value":"2.5.29.15",
 "FriendlyName":"Key Usage"
 },
 "RawData":"AwIFoA=="
 },
 {
 "EnhancedKeyUsages":[
 {
 "Value":"1.3.6.1.5.5.7.3.1",
 "FriendlyName":"Server Authentication"
 },
 {
 "Value":"1.3.6.1.5.5.7.3.2",
 "FriendlyName":"Client Authentication"
 }
 ],
 "Critical":false,
 "Oid":{
 "Value":"2.5.29.37",
 "FriendlyName":"Enhanced Key Usage"
 },
 "RawData":"MBQGCCsGAQUFBwMBBggrBgEFBQcDAg=="
 },
 {
 "CertificateAuthority":false,
 "HasPathLengthConstraint":false,
 "PathLengthConstraint":0,
 "Critical":true,
 "Oid":{
 "Value":"2.5.29.19",
 "FriendlyName":"Basic Constraints"
 },
 "RawData":"MAA="
 },
 {
 "SubjectKeyIdentifier":"634E1585565AA49402C21642A4A5979A38025797",
 "Critical":false,
 "Oid":{
 "Value":"2.5.29.14",
 "FriendlyName":"Subject Key Identifier"
 },
 "RawData":"BBRjThWFVlqklALCFkKkpZeaOAJXlw=="
 },
 {
 "Critical":false,
 "Oid":{
 "Value":"2.5.29.35",
 "FriendlyName":"Authority Key Identifier"
 },
 "RawData":"MBaAFBQusxe3WFbLrlAJQOYfr52LFMLG"
 },
 {
 "Critical":false,
 "Oid":{
 "Value":"1.3.6.1.5.5.7.1.1",
 "FriendlyName":"Authority Information Access"
 },
 "RawData":"MEcwIQYIKwYBBQUHMAGGFWh0dHA6Ly9yMy5vLmxlbmNyLm9yZzAiBggrBgEFBQcwAoYWaHR0cDovL3IzLmkubGVuY3Iub3JnLw=="
 },
 {
 "Critical":false,
 "Oid":{
 "Value":"2.5.29.17",
 "FriendlyName":"Subject Alternative Name"
 },
 "RawData":"MB6CHGJsb2cuZW1pbGlhbm9tb250ZXNkZW9jYS5jb20="
 },
 {
 "Critical":false,
 "Oid":{
 "Value":"2.5.29.32",
 "FriendlyName":"Certificate Policies"
 },
 "RawData":"MEMwCAYGZ4EMAQIBMDcGCysGAQQBgt8TAQEBMCgwJgYIKwYBBQUHAgEWGmh0dHA6Ly9jcHMubGV0c2VuY3J5cHQub3Jn"
 },
 {
 "Critical":false,
 "Oid":{
 "Value":"1.3.6.1.4.1.11129.2.4.2",
 "FriendlyName":"SCT List"
 },
 "RawData":"BIH0APIAdwBByMqx3yJGShDGoToJQodeTjGLGwPr60vHaPCQYpYG9gAAAYCeJIwYAAAEAwBIMEYCIQCG8sf4iBitUjNCc1dsxVd5mdRQCKapRqqnTHKxSKHjHgIhAJFGNXEZkCHKygT1T7bE4orpd6p2l1+GmifMEIuRsgHbAHcARqVV63X6kSAwtaKJafTzfREsQXS+/Um4havy/HD+bUcAAAGAniSMNgAABAMASDBGAiEAoxv1LBn/vfyR7s67kRLB/n1tq3eicuA/8/V0S2YzQCYCIQDXaS3FZbdIVNxQvKxPFxM1awBO/sGxBXafz0lspOoWSA=="
 }
 ],
 "FriendlyName":"",
 "HasPrivateKey":false,
 "PrivateKey":null,
 "IssuerName":{
 "Name":"CN=R3, O=Let's Encrypt, C=US",
 "Oid":{
 "Value":null,
 "FriendlyName":null
 },
 "RawData":"MDIxCzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQDEwJSMw=="
 },
 "NotAfter":"2022-08-05T10:50:35+01:00",
 "NotBefore":"2022-05-07T10:50:36+01:00",
 "PublicKey":{
 "EncodedKeyValue":{
 "Oid":{
 "Value":"1.2.840.113549.1.1.1",
 "FriendlyName":"RSA"
 },
 "RawData":"MIIBCgKCAQEAq8cbDO3GAfjqqbPPCBdPost8NMRmEubv85gXecll7mZMH5qSfTPuB/ouFWL3tPMf1U8usWeoSUK/48yatzBGwmj1KKlkaW9MS2QkydztRp+kH8LvbzbQvGknuOLWGHBALLT17o/3DYxuA5LnXdY+vLvJWygQoFr2N/XhnhUjcm6OaQEJpIykydfbBQGQSEuQIIw4egpgdHkYJjCOYAsXuSSggN8/FADTCec0RzVjfFTSoJ3hV9HLE9M8MCSXjuo0AJ/MbAxq91S8XmDcRjHCCd7Zw+NjHo8cxZCQ6NqGvn3xwx8ahmmbC+CyDEcIyJJZK2Yv+qE4oS8QZfaX/RaHMwIDAQAB"
 },
 "EncodedParameters":{
 "Oid":{
 "Value":"1.2.840.113549.1.1.1",
 "FriendlyName":"RSA"
 },
 "RawData":"BQA="
 },
 "Key":{
 "Key":{
 "Algorithm":{
 "Algorithm":"RSA"
 },
 "AlgorithmGroup":{
 "AlgorithmGroup":"RSA"
 },
 "ExportPolicy":0,
 "Handle":{
 "IsInvalid":false,
 "IsClosed":false
 },
 "IsEphemeral":true,
 "IsMachineKey":false,
 "KeyName":null,
 "KeySize":2048,
 "KeyUsage":16777215,
 "ParentWindowHandle":{
 "value":0
 },
 "Provider":{
 "Provider":"Microsoft Software Key Storage Provider"
 },
 "ProviderHandle":{
 "IsInvalid":false,
 "IsClosed":false
 },
 "UIPolicy":{
 "ProtectionLevel":0,
 "FriendlyName":null,
 "Description":null,
 "UseContext":null,
 "CreationTitle":null
 },
 "UniqueName":null
 },
 "LegalKeySizes":[
 {
 "MinSize":512,
 "MaxSize":16384,
 "SkipSize":64
 }
 ],
 "KeyExchangeAlgorithm":"RSA",
 "SignatureAlgorithm":"RSA",
 "KeySize":2048
 },
 "Oid":{
 "Value":"1.2.840.113549.1.1.1",
 "FriendlyName":"RSA"
 }
 },
 "RawData":"MIIFQDCCBCigAwIBAgISBNwTmwP/RTcrEeIgAdMrpaFtMA0GCSqGSIb3DQEBCwUAMDIxCzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQDEwJSMzAeFw0yMjA1MDcwOTUwMzZaFw0yMjA4MDUwOTUwMzVaMCcxJTAjBgNVBAMTHGJsb2cuZW1pbGlhbm9tb250ZXNkZW9jYS5jb20wggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCrxxsM7cYB+Oqps88IF0+iy3w0xGYS5u/zmBd5yWXuZkwfmpJ9M+4H+i4VYve08x/VTy6xZ6hJQr/jzJq3MEbCaPUoqWRpb0xLZCTJ3O1Gn6Qfwu9vNtC8aSe44tYYcEAstPXuj/cNjG4Dkudd1j68u8lbKBCgWvY39eGeFSNybo5pAQmkjKTJ19sFAZBIS5AgjDh6CmB0eRgmMI5gCxe5JKCA3z8UANMJ5zRHNWN8VNKgneFX0csT0zwwJJeO6jQAn8xsDGr3VLxeYNxGMcIJ3tnD42MejxzFkJDo2oa+ffHDHxqGaZsL4LIMRwjIklkrZi/6oTihLxBl9pf9FoczAgMBAAGjggJZMIICVTAOBgNVHQ8BAf8EBAMCBaAwHQYDVR0lBBYwFAYIKwYBBQUHAwEGCCsGAQUFBwMCMAwGA1UdEwEB/wQCMAAwHQYDVR0OBBYEFGNOFYVWWqSUAsIWQqSll5o4AleXMB8GA1UdIwQYMBaAFBQusxe3WFbLrlAJQOYfr52LFMLGMFUGCCsGAQUFBwEBBEkwRzAhBggrBgEFBQcwAYYVaHR0cDovL3IzLm8ubGVuY3Iub3JnMCIGCCsGAQUFBzAChhZodHRwOi8vcjMuaS5sZW5jci5vcmcvMCcGA1UdEQQgMB6CHGJsb2cuZW1pbGlhbm9tb250ZXNkZW9jYS5jb20wTAYDVR0gBEUwQzAIBgZngQwBAgEwNwYLKwYBBAGC3xMBAQEwKDAmBggrBgEFBQcCARYaaHR0cDovL2Nwcy5sZXRzZW5jcnlwdC5vcmcwggEGBgorBgEEAdZ5AgQCBIH3BIH0APIAdwBByMqx3yJGShDGoToJQodeTjGLGwPr60vHaPCQYpYG9gAAAYCeJIwYAAAEAwBIMEYCIQCG8sf4iBitUjNCc1dsxVd5mdRQCKapRqqnTHKxSKHjHgIhAJFGNXEZkCHKygT1T7bE4orpd6p2l1+GmifMEIuRsgHbAHcARqVV63X6kSAwtaKJafTzfREsQXS+/Um4havy/HD+bUcAAAGAniSMNgAABAMASDBGAiEAoxv1LBn/vfyR7s67kRLB/n1tq3eicuA/8/V0S2YzQCYCIQDXaS3FZbdIVNxQvKxPFxM1awBO/sGxBXafz0lspOoWSDANBgkqhkiG9w0BAQsFAAOCAQEAjSEID5MWonbSiyHbmPYWO8ImCCOjkLGxgY8WJODbrWxFy+xU44UwrWOCkqYZUlv2LRmPqSyZDrIeeHK9VMbGh71oXX+XovikgAr6PpI0Mp897nPWj0XvOBaSYG0s+f+CXMtyt0tWCsQOcl+iT82+Ja71f8gbVL6l7xESewEE78pTKEH8EqD22r8VSD7FNICD8EYQr13v3AuVWObSU/R8Td6SrSVEknw1HgJS4e9nvmrMxBGKOJ+aWrAGiUydehg8M9o2gbGckMhz6D7cwB5l618cYaXKkW1dEOYZHl++qUj1/VPK+FNkiDZOPVNN//PbZuOLwAUIlZvhqGWX5/9PBg==",
 "SerialNumber":"04DC139B03FF45372B11E22001D32BA5A16D",
 "SignatureAlgorithm":{
 "Value":"1.2.840.113549.1.1.11",
 "FriendlyName":"sha256RSA"
 },
 "SubjectName":{
 "Name":"CN=blog.emilianomontesdeoca.com",
 "Oid":{
 "Value":null,
 "FriendlyName":null
 },
 "RawData":"MCcxJTAjBgNVBAMTHGJsb2cuZW1pbGlhbm9tb250ZXNkZW9jYS5jb20="
 },
 "Thumbprint":"28CF960F772ABFF22AA193C291492C27F8E13D4D",
 "Version":3,
 "Handle":{
 "value":2658150705632
 },
 "Issuer":"CN=R3, O=Let's Encrypt, C=US",
 "Subject":"CN=blog.emilianomontesdeoca.com"
}

Expiration date

In order to know the expiration time, we need to take a look at the NotAfter and NotBefore, which are inside this object:

 "NotAfter":"2022-08-05T10:50:35+01:00",
 "NotBefore":"2022-05-07T10:50:36+01:00",

Console application

The following snippet is a simple console application built on .NET 6, that will produce the following result, in which you can check any of the certifications that you want:

using Newtonsoft.Json;
using System.Net;
using System.Security.Cryptography.X509Certificates;
using System.Text.Json;

var url = "https://blog.emilianomontesdeoca.com/";

static async Task<X509Certificate2> CheckCertificateAsync(string urlPath)
{
 var certificate = new X509Certificate2();
 var httpClientHandler = new HttpClientHandler
 {
 ServerCertificateCustomValidationCallback = (request, cert, chain, policyErrors) =>
 {
 certificate = new X509Certificate2(cert);
 return true;
 }
 };

 using HttpClient httpClient = new HttpClient(httpClientHandler);
 await httpClient.SendAsync(new HttpRequestMessage(HttpMethod.Head, urlPath));

 return certificate;
}

var cert = await CheckCertificateAsync(url);

var serializedValue = JsonConvert.SerializeObject(cert);

Console.WriteLine(serializedValue);

Console.ReadLine();

Demo project

You can find the console application in my Github, in the repository called expiration-date-certificate.

Focus instellen op een element in Blazor

Thu, 05 May 2022 00:00:00 +0000

After working on the Wordlzor game that I recently did, I needed to add a pretty simple functionality: focus the entire game when entering.

This needed to be done because the user could actually type on the game and not only use the on screen keyboard.

Javascript file

In order to do this, we have to create a Javascript file called app.js that will hold a function

window.FocusElement = (element) => {
 element.focus();
};

After we have done that, we need to include the script in the index.html file:

<script src="js/app.js"></script>

Blazor component

Once we have initialized the script, we need to find an element to focus on, so in any of our components, we need to reference that element to an object.

So in our blazor component let’s add a div wit the @ref property:

<div @ref=@elementToFocus tabindex="0" >
 This is my focus component
</div>

Then on the component logic you can have the property as an ElementReference:

/// <summary>
/// Reference to element
/// </summary>
private ElementReference elementToFocus;

Injecting JSInterop

Now, in order to call the function that we have in our Javascript file, we need to use JSInterop.

First of all we must inject it on component with the following syntax:

[Inject]
public IJSRuntime JSRuntime { get; set; }

With the service injected, we now are able to call any of the methods that it have, like InvokeVoidAsync, which will call the function:

public async Task Focus()
{
 // Focus when initializing
 await JSRuntime.InvokeVoidAsync("window.FocusElement", elementToFocus);
}

And when you call the funciton Focus(), it will focus the elemetn that we created, obviously you can refactor and pass the element itself as a parameter.

If you want to take a look at how I implemented it, take a look at the Wordlzor source code, I used it for alerts and focusing when closing the instruction modal.

*.dacpac-bestanden genereren vanuit VS Database-project in GitHub Actions

Mon, 18 Apr 2022 00:00:00 +0000

If you need to work with databases and you want to do agile development, you have to have a flow where whenever you add or modify a table, SP, function, it will compile that and the generate the deployment file for the database.

I’ve been doing this apporach for a long time now, we do the changes on local, compare to our database project and then when we commit and push our changes, they generate a bacpac file that will be going to the database.

It eliminates all the trouble to do it by hand, which can cause a human error and in a database that’s really bad news.

Database project

When we create our database project on Visual Studio and import a database, it will end up like this

When we run a compilation on this project, it will generate a dacpac file that will include all our structure

Github pipeline

Now that we have our code published on the repository, we now need to create an action that will compile this project, generate this dacpac file and put it somewhere that we can either download or use it for another step.

name: DacpacGithubActions project build

on:
 push:
 branches: main

jobs:
 build:
 runs-on: windows-latest

 steps:
 - uses: actions/checkout@v2

 - name: Setup MSBuild
 uses: microsoft/setup-msbuild@v1

 - name: Navigate to Workspace
 run: cd $GITHUB_WORKSPACE

 - name: Create Build Directory
 run: mkdir artifacts

 - name: Build Solution
 run: |
 msbuild.exe /t:DacpacGithubActions /p:DebugSymbols=false /p:DebugType=None /p:DeployOnBuild=true /p:WebPublishMethod=FileSystem /p:OutDir="../artifacts"
 
 - name: Upload artifact
 uses: actions/upload-artifact@v1.0.0
 with:
 name: DacpacGithubActionsArtifacts
 path: "../artifacts"

This action will do a bunch of things, builds the solution and places the result into artifacts folder, created beforehand, then it will upload the files from that folder to the artifacts.

Running the pipeline

Now go ahead an trigger a build, the result should be the following

If we actually download the artifact and take a look at the content, is what we need for the future, when we implement a continuous deployment step, the dacpac file!

Code

This entire project is on Github and you can find it here!

Hope you liked the post! Cya!

Thema's wisselen met Javascript Interop in Blazor

Fri, 01 Apr 2022 00:00:00 +0000

For people like me that suffer from flashbacks every time I open a webpage, I’ve come up with a super simple solution on how to toggle between light and dark mode using Javascript and calling it from Blazor using Javascript Interop.

Setting the parent attribute

First of all, we have to identity the parent element with an identifier, this is because we change the colors depending on the value of that identifier.

In order to do that in Javascript, we would have to run this command

document.documentElement.setAttribute('data-theme', 'YOUR_IDFENTIFIER');

In our case, we want to have two identifiers for each type of style, which are light and dark.

Creating Javascript file to handle the logic

We now have the function to update the identifier, now let’s create a Javscript file with a function that runs that logic. Our file is going to be called app.js

In that file, we will have a function that will call the code we mentioned earlier.

var toggleTheme = function (identifier) {
 document.documentElement.setAttribute('data-theme', identifier);
}

Adding Javascript file to Blazor

Add the script to the Blazor application by adding it where the scripts are located.

<script src="~/js/app.js"></script>

Creating the service

Now that we have the Javascript code, we need to create a service that’s going to be called ThemeToggleService.

This service will handle the logic to toggle between the light and dark theme.

Injecting JSInterop

In order to call any Javascipt, we have to call the JSInterop, so we have to create a property that will inject.

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace BlazorDarkmodeToggle.Data
{
 private readonly IJSRuntime jSRuntime;

 public ThemeToggleService(IJSRuntime jSRuntime)
 {
 this.jSRuntime = jSRuntime;
 }
}

Function to set the identifier

Now that we have the service created, let’s create the function to set the identifier, this function will just update the data-theme in the page.

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace BlazorDarkmodeToggle.Data
{
 public class ThemeToggleService
 {
 private readonly IJSRuntime jSRuntime;

 public ThemeToggleService(IJSRuntime jSRuntime)
 {
 this.jSRuntime = jSRuntime;
 }

 public bool IsLightTheme { get; set; } = true;
 public string GetIdentifier => IsLightTheme ? "light" : "dark";

 public async Task ToggleTheme() {
 IsLightTheme = !IsLightTheme;
 await jSRuntime.InvokeVoidAsync("toggleTheme", GetIdentifier);
 }
 }
}

Add service to startup

In order to make the service available for all the components and pages, we have to add it to the Program.cs file.

builder.Services.AddSingleton<ThemeToggleService>();

So the file will end up like this

using BlazorDarkmodeToggle.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddSingleton<ThemeToggleService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
 app.UseExceptionHandler("/Error");
 // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
 app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

Keep in mind that this can change depending on if you use Blazor Server or Blazor WebAssembly.

Baking the CSS

Now that we have part of the code ready, we have to start working on the CSS. What we have to do is to set all the css properties that handle the css colors, background, etc to a variable.

:root {
 --background-color:#ffffff;
 --text-color:#000000;
}

Once we have done this, using the identifier, we can easily change between the identifiers, and it will use either one of other value.

[data-theme="dark"] {
 --background-color: #000000;
 --text-color: #ffffff;
}

For the cool animation fading, we’ll just add a transition property to all, so it looks good.

* {
 transition: all 250ms;
}

Now we will assign this variables to some css classes, so we can see them on the Blazor page.

.app-background {
 background-color: var(--background-color);
 width: 200px;
 height: 200px;
}

.app-text {
 color: var(--text-color);
}

Remember to add the file to the Blazor application by adding it on the head.

<link href="css/app.css" rel="stylesheet" />

Calling from Blazor

So how are we going to test this? To keep it simple, we are just going to add a div with the app-background class, and inside it’ll have a p with the app-text class.

So let’s create a page called Theme.razor under the Pages folder and add some code for that

@page "/theme"
@using BlazorDarkmodeToggle.Data
@inject ThemeToggleService ThemeToggleService

<button class="btn btn-primary" @onclick=Toggle>Toggle theme</button>

<br />

<div class="app-background">
 <p class="app-text">Hello world!</p>
</div>

@code{
 public async Task Toggle()
 {
 await this.ThemeToggleService.ToggleTheme();
 }
}

We could test this by going to /theme, but let’s also add it to the navbar

<div class="nav-item px-3">
 <NavLink class="nav-link" href="theme">
 <span class="oi oi-list-rich" aria-hidden="true"></span> Theme togle
 </NavLink>
</div>

Testing

As you can see, as soon as we toggle the theme, background and font color changes, now you can see how powerful this is, if you actually develop the entire page using this variables on CSS, you could have different themes and just toggle them!

How awesome!!

Code

This entire project is on Github and you can find it here!

Hope you liked the post!

Resources

Call JavaScript functions from .NET methods in ASP.NET Core Blazor

Bestanden uploaden naar Azure Blob Storage in Blazor

Wed, 23 Mar 2022 00:00:00 +0000

Azure Blob storage service is one of the most used services on the Azure ecosystem, it allows you to upload a lot of files to the cloud while being super cheap. It also has an intuitive web that you can access them or download it by a direct link.

Overall quite a good service, I’ve been using it for both work and personal projects and honestly the best thing is the simplicity of how to make it work.

Most of the cases that I’ve used Azure Blob Storage is in the backend, directly uploading something that’s a result from an operation or something. So I don’t really have done any kind of upload a file from a website or so. Unlucky!

Since I’m a Blazor fanboy, I’m bringing you a way to upload files to an Azure Blob Storage using the native file input from HTML5.

Prequisites

Azure account (if you dont have it go here to with a bunch of $$$).
An IDE (VS, Code, any will work)
.NET Core 3.0 or above

Creating an Azure Blob Storage

Go to your Azure portal and let’s proceed to create a storage account.

First search for Storage accounts and click on the result.

After it has loaded, click on Create.

A form will appear with a bunch of steps so go ahead and fill them.

After filling everything with the settings you want, pass the validation and create the resource.

After it has been created, click on Go to resource. We are going to get a connection string that will let us play with the API.

Get the resource keys

After we got to our newly created resource, go to Acccess keys under the Security + networking. After loading you will see a Connection string and Key, copy them because we are going to need them later!

Creating a cool Blazor Server project

I’m going to be using Visual Studio 2022 for this tutorial, but as I said before, you can use any other IDE and just create the project using the dotnet CLI.

Then let’s go ahead and create a Blazor poject real quick using Visual Studio in just a bunch of steps.

If we run what we just created it will look like this, just a plain normal Blazor application.

Now that we have the project created, let’s do some UI stuff so we have a new page with a bunch of inputs so we can fill with out keys from the resource, an InputFile for the file(s), a button to do something and a message that will result from the action.

Creating the Model

We are going to need some models to do this properly. First we will have the BlobRequest class that will handle the connection string, container name and the files.

Also, to keep everything neatly, we will create a class called BlobFile in which we will store the Name and the Data.

I’ve created a folder called Models so we have everything separated.

The classes are very simple.

using System.ComponentModel.DataAnnotations;

namespace UploadingFilesAzBlobBlazor.Models {
 public class BlobRequest
 {
 [Required(ErrorMessage = "Connection string is required")]
 public string? ConnectionString { get; set; }
 [Required(ErrorMessage = "Container name is required")]
 public string? Container { get; set; }
 public List<BlobFile>? Files { get; set; }
 }
}

namespace UploadingFilesAzBlobBlazor.Models
{
 public class BlobFile
 {
 public string? Name { get; set; }
 public byte[]? Data { get; set; }
 }
}

Modifying the UI

Now that we have our model created, let’s go ahead and do some magic on the UI with it!

First of all create a page under the Pages folder called Upload.razor.

In this page we are going to add a little form that will fill our BlobRequest class, so we have to add inputs for ConnectionString, Container, and Files.

@page "/upload"
@using UploadingFilesAzBlobBlazor.Models
@inject IJSRuntime JsRuntime
<PageTitle> Upload</PageTitle>

<h1> Azure blob storage uploader!</h1>

<EditForm Model="@modal" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />

<div class="mb-3">
<label for="connectionString" class="form-label"> Connection string</label>
<InputText class="form-control" id="connectionString" @bind-Value="modal.ConnectionString" />
</div>

<div class="mb-3">
<label for="container" class="form-label"> Container name</label>
<InputText class="form-control" id="container" @bind-Value="modal.Container" />
</div>

<div class="mb-3">
<label for="formFileMultiple" class="form-label"> Files</label>
<InputFile OnChange="OnInputFileChange" class="form-control" id="formFileMultiple" multiple />
</div>

<div class="mb-3">
<button type="submit" class="btn btn-primary"> Submit</button>
</div>
</EditForm>

@code {
 private BlobRequest modal = new();
 private EditContext editContext;
 IReadOnlyList <IBrowserFile> selectedFiles;
 private void OnInputFileChange(InputFileChangeEventArgs e)
 {
 selectedFiles = e.GetMultipleFiles();
 this .StateHasChanged();
 }

 private async Task HandleValidSubmit() {
 // This is where we are going to upload stuff ! 
 await JsRuntime.InvokeVoidAsync("alert", "Files uploaded!");
 }
}

It’s a bit of code but basically will render the form and handle the validation.

If you press the button to upload and everything is okay, it will display an alert.

Uploading to Azure Blob Storage

Now that we have most of the UI done, let’s now install the package that will handle the Azure Blob Storage API and will let us upload files. Pretty simple.

Add the NuGet package

Let’s manage the NuGet packages from the project and add Azure.Storage.Blob.

Upload to Azure Blob Stoare

Now let’s do the logic for actually uploading the file, normally we would use the connection string and the key from the app.config but for the sake of this tutorial, we use inputs and we supply the data there.

First, let’s add the using for the Azure Blob Storage class

@using Azure.Storage.Blobs
@using Azure.Storage.Blobs.Models

Then we are going to work on the HandleValidSubmit method, which is going to connect to the blob storage, create the container if it doesn’t exist and then upload the files.

private async Task HandleValidSubmit()
{
 try
 {
 // Instantiate container
 var container = new BlobContainerClient(modal.ConnectionString, modal.Container);
 // Create container if not exists
 var createResponse = await container.CreateIfNotExistsAsync();
 // Set access policy
 if (createResponse != null && createResponse.GetRawResponse().Status == 201)
 {
 await container.SetAccessPolicyAsync(Azure.Storage.Blobs.Models.PublicAccessType.Blob);
 }

 // For each file that we have uploaded
 foreach (var file in selectedFiles)
 {
 // New blob
 var blob = container.GetBlobClient(file.Name);
 // Delete any blob with the same name
 await blob.DeleteIfExistsAsync(Azure.Storage.Blobs.Models.DeleteSnapshotsOption.IncludeSnapshots);
 // Create a file stream and use the UploadSync method to upload the Blob.
 using (var fileStream = file.OpenReadStream())
 {
 await blob.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = file.ContentType });
 }
 }

 // Display success message
 await JsRuntime.InvokeVoidAsync("alert", "Files uploaded!");
 }
 catch (Exception e)
 {
 // Display error message
 await JsRuntime.InvokeVoidAsync("alert", "An error ocurred!");
 }
}

Testing the code

Now is time to test the code, in order to do so, just fill the form and click on submit.

We will display an alert and the file should be uploaded to the Azure Blob Storage, go to the Azure Portal and take a look.

As you can see, the container was also created, now if we get inside the container, we see the file we uploaded.

Good job!

Refactor

Now that everything is worked, let’s move the code from the .razor page to a .razor.cs class so it looks better.

If you are using Visual Studio 2022, there’s lightbulb when you hovering are right in the @code, it will show you an option to Extract block to code behind, and it will do as it says!

Now you are going to have everything separated and done!

Code

This entire project is on Github and you can find it here!

Hope you liked the post! Cya!

Resources

Een kerncontroller van Pimcore overschrijven

Thu, 10 Dec 2020 00:00:00 +0000

I’ve been working on a Pimcore project for some time now, never touched PHP and Symfony in my life so it’s been a great challenge.

The documentation is great, I mean, seriously it’s great, but looks like it’s not made for beginners on the langauge/framework so everything that I’ve done I had to takes notes of it.

After learning that you can extend Pimcore by using bundles, I’ve spent hours and hours trying to override controllers, javascript methods and more stuff.

So in this post I’ll explain how I’ve managed to override a controller. How to override javascript files will come later 😎.

Creating the bundle

First of all we need to create a bundle for it, it’s pretty simple as its documented on the Pimcore documentation, we just need to run bin/console pimcore:generate:bundle --namespace=EmiDemo/EmiDemoBundle on the project folder.

It will prompt some questions but nothing to worry about.

It will create a new folder under the src folder with the namespace that we declared before, and inside we will have all the necessary files for the bundle.

Also, the plugin will be detected by the Pimcore admin site, but it will be disabled, you have to enable it to start using it.

Overriding a method from a controller

For overriding a method in a controller, first obviously you need to find the action that you want to update, this seems easy but I’ll give you the way I usually do (learnt from my teammate Cesar).

First go into the page that you think the controller takes action, in my case I want to check the one that loads when we open an asset

Then just open the console and go in the network tab, make the same steps again and try to find the action

With this information you can see that the action that loads the asset is http://localhost/admin/asset/get-data-by-id?_dc=1607601778450&id=2&type=image. From that we can see that the controller action is get-data-by-id.

Find the action in the core controller

For me, the simplest way to do it is just to find in all files in the Visual Studio Code

Probably it will find more than one so you must take a look and decide which one is the one, in our case we are working with assets so it’s clear that we want to use the AssetController.php.

Modify the core controller

It’s depends on the developer, I don’t usually do it because it’s faster to just override the controller and develop from there. But I’d recommend first to update the controller in the core bundle to see if your changes work.

In our case I will just return a message at the beginning of the method to check that it works.

return $this->adminJson(['success' => false, 'message' => "Overriding the getDataByIdAction in the core!!"]);

Then let’s reload our asset and check the network tab

Let’s keep what we have in there, so later we know that we are using the bundle message instead of the core one.

Now let’s just copy that to a temporary file to have track what we did.

Move those changes to the bundle

Now in order to move those changes to our bundle, but first we need some stuff from our core controller:

Namespace
Imports
Controller name

And obviously the method getDataByIdAction which is the one that we want to override.

Expose the controller

We need to expose the controller, in order to do this you need to go into the file /src/EmiDemo/EmiDemoBundle/Resources/config/pimcore/routing.yml and add

options:
 expose: true

Also we need to change the prefix to the one we are going to override, in our case the admin controller.

So in the end ti will look like this

emi_demo_emi_demo:
 resource: "@EmiDemoEmiDemoBundle/Controller/"
 type: annotation
 prefix: /admin
 options:
 expose: true

DefaultController.php

In our file, we will add the imports and extend the controller with the one we will overide

Then we will just copy the method from the core controller, and, in our case, update the message that we return.

If you remember, we have a message in the core controller already: Overriding the getDataByIdAction in the core!! and now we should be seeing Overriding the getDataByIdAction in the bundle!!

Let’s just not return anything and see that we can now see the page like it was before

Comment out the return statement and reload

That’s it

And with this little demo you can see how easy you can override an existing Pimcore core controller. There are some steps that you have to follow but it’s nothing hard. Just make sure you expose the controller and clear the cache from time to time while you are making changes, sometimes it get cached and you are stuck thinking it’s not working and it’s just cached.

If you are wondering about how to override the javascript files, it will come in another tutorial 😁.

Apple Magic Keyboard 2 configureren op Windows 10

Wed, 11 Nov 2020 00:00:00 +0000

Just yesterday I bought an Apple Magic Keyboard 2, even if I have like 5 mechanical keyboards, because I wanted to try it and it was wireless.

My main OS is Windows 10, I love it and I don’t want to change it so with that in mind I knew that it would be necessary to do some things to make the keyboard work perfectly. I know how Apple works and how they like to keep their devices to their ecosystem.

Issues

If you pair the keyboard, you will recognize a few things:

Function keys don’t work
Some keys are mapped wrong (this happened to me in the spanish version)

Documentation

In order to make it work, I had to read a lot from the web, but these two links are the ones that helped me to make it work:

Installing the Apple Keyboard driver

Some of this steps are from the documentation noted before:

Install 7zip to your computer if you don’t have it.
Install Python (version 2.x) to your computer if you don’t have it.
- IMPORTANT: The latest version of the Python is 3.x. But, you need version 2.x because the brigadier script is not compatible with version 3.x.
- (option) The installer, by default, doesn’t add python.exe to your PATH. If you want, you need to enable this option. (see the screenshot on the right)
- If you already have another version of Python, you probably don’t want to enable this option.
Download brigadier (a Python script that helps you to download the latest Boot Camp version).
Please right-click the following link and save the file using “Save link as…”. https://raw.githubusercontent.com/timsutton/brigadier/master/brigadier
Open command prompt window (aka. DOS box) and change directory to where you downloaded the brigadier script.
Assuming the brigadier script was saved as “brigadier.txt”, please run the following command:
- If Python version 2.x is in your PATH: python brigadier.txt –model=MacBook13,2
- Otherwise: [Path to the Python version 2.x]\python.exe brigadier.txt –model=MacBook13,2
It will download a big bundle with all the drivers from bootcamp
Create a folder called BootCamp and copy the BootCamp-xxx-yyyyyy\BootCamp\Drivers\Apple\BootCamp.msi and BootCamp-xxx-yyyyyy\BootCamp\Drivers\Apple\AppleKeyboardMagic2 into it.
Run an admin powershell and execute the BootCamp.msi, it will install some stuff but we need to update the driver using the contents of the AppleKeyboardMagic2 folder
Start Device Manager (devmgmt.msc)
Expand Human Interface Devices node
Look for Bluetooth HID Device
Update the driver using the contents of the AppleKeyboardMagic2 folder
Reboot computer

You should see the bluetooth keyboard now detected as a Apple Keyboard

Update FN keys behavior

If you installed everything properly you will notice that the FN keys are enabled by default, it means that you need to press fn + F5 to actually press the F5 button.

In order to fix this, I found a solution, noted in the documentation section, that works by changing some entry in the regedit.

Open regedit
Go to HKEY_CURRENT_USER\SOFTWARE\Apple Inc.\Apple Keyboard Support
Create or update OSXFnBehavior andset it to 0
Reboot computer

Update keys mapping

If you have a problem with the mappings, you can use SharpKeys and update them.

It’s really simple to use, but remember to logout or restart the computer to enable the updates, since it updates the registry.

For my case, I had to update the Windows, alt, º and <> keys.

Gecompileerde bibliotheken toevoegen aan een NuGet-pakket

Thu, 01 Oct 2020 00:00:00 +0000

Just the other day I found a bug about a NullReferenceException on a missing library that should have been there since it comes from a nuget package we have uploaded.

Basically, I compiled a library class that referenced a few projects. On the build phase it would add the dll files to the bin folder but when packaging it as a nuget package and installing them in another solution, the dll files that I referenced and should be copied into the bin folder, are not there.

How to solve it

Solving this issue is pretty simple, you have to update the nuspec file and for each of the libraries that you want to copy, add the file in the files part.

<?xml version="1.0" encoding="utf-8"?>
<package >
 <metadata>
 <id>$id$</id>
 <version>$version$</version>
 <title>$title$</title>
 <authors>$author$</authors>
 <owners>$author$</owners>
 <requireLicenseAcceptance>false</requireLicenseAcceptance>
 <license type="expression">MIT</license>
 <projectUrl>$projectUrl$</projectUrl>
 <iconUrl>$projectIconUrl$</iconUrl>
 <description>$description$</description>
 <releaseNotes></releaseNotes>
 <copyright>$copyright$</copyright>
 <tags></tags>
 </metadata>
 <files>
 <file src="bin\Release\MyFile1.dll" target="lib\net47" />
 <file src="bin\Release\MyFile2.dll" target="lib\net47" />
 <file src="bin\Release\MyFile3.dll" target="lib\net47" />
 <file src="bin\Release\MyFile4.dll" target="lib\net47" />
 </files>
</package>

Terminal instellen om bash in WSL-homedirectory te laden

Tue, 22 Sep 2020 00:00:00 +0000

Been loving WSL for development and testing since the day it came out, then the Terminal app dropped and I couldn’t be happier, looks good, works perfectly and great performance.

It would be stupid to not use it with the WSL distro instead of using the console that gives you.

This console is obviously good, but after you’ve used Terminal, there’s no going back. It’s just so much better, also c o l o r s.

Now if you fire up the terminal and open a new tab to load your WSL distro, it loads your mounted user folder.

This is not really an issue, because if you just do cd ~ it just loads the distro user folder.

The thing is that I don’t want to do it again and again so let’s update a file to do it by itself.

.bashrc

Fire up the terminal or the console, and go into your profile folder and then edit the .bashrc file using your favourite text editor.

Add cd ~ at the end of the file before the last instruction.

Save, reopen the WSL console with the terminal and you should be on the profiles folder.

Keep in mind that you’ll have to do this for all your WSL installations, since we are updating the bashrc file for a single one.

Dynamische objectgeneratie met ExpandoObject

Fri, 06 Mar 2020 00:00:00 +0000

I’ve been in the need of converting an Excel files with its own defined columns to a new one with dynamic columns, and I was kinda confused on how to do it properly without some serious performance issues.

I came up to a tutorial that you can find here that uses .NET ExpandoObject which pretty much lets you create an object and add dynamic memebers.

ExpandoObject

The Microsoft definition is:

Represents an object whose members can be dynamically added and removed at run time.

And it has a few remarks:

The ExpandoObject class enables you to add and delete members of its instances at run time and also to set and get values of these members. This class supports dynamic binding, which enables you to use standard syntax like sampleObject.sampleMember instead of more complex syntax like sampleObject.GetAttribute(“sampleMember”).

Current behaviour

We have an ExcelExportService that, by passing a List<T>, in this case ExcelItem, will use Reflection to create an xlsx file.

So far, our code looks like this:

class ExcelItem
 {
 public int Id { get; set; }
 public string Name { get; set; }
 public string Surname { get; set; }
 public string Age { get; set; }
 public string CreatedAt { get; set; }
 public string UpdatedAt { get; set; }
 }

ExcelItem is the object with all the properties that are being used to generate the excel file.

public static byte[] GetExcelBytes() {
 List<ExcelItem> excelItems = new List<ExcelItem>();
 ExcelExportService exportService = new ExcelExportService();

 foreach (var items in itemsToExcel)
 {
 excelItems.Add(new ExcelItem()
 {
 Id = item.Id,
 Name = item.Name,
 Surname = item.Surname,
 Age = item.Age,
 CreatedAt = item.CreatedAt
 UpdatedAt = item.UpdatedAt
 });
 }

 return exportService.ExportToExcel(excelItems);
}

This approach works perfectly, the xlsx file is generated without problems with each column being each property, you would use this GetExcelBytes method like this, for example, to save it into a file:

File.WriteAllBytes("path-to-somewhere/my-file.xlsx", GetExcelBytes());

The problem

Since what we are doing right know is using all the properties of the ExcelItem object, all I want is to actually not use all of them, just using maybe 2 o 3 of them.

Also a requirement is that I don’t want to be changing the code, eveything should be done by the administrator, who will decide which columns should be shown, and he may or may not know the properties in the code.

TLDR: everything should be dynamic, we have an object with properties and we must make sure that the generated file have N properties of that object, but obviously not hardcoded.

Dynamic columns

The change would be to use a dynamic object, because we would like to set what properties of the object will be used to generate the list of columns.

Let’s say that we have an object with a lot of properties, like, a ton of them, and we don’t really want to be changing the ExcelItem object everytime that we make a change, we create a ColumnExcelItem table, which will be used to generate that ExcelItem.

Database structure

We save this definition in our database with something like this:

Id PropertyName
---------------------
1 Name
2 Surname
3 Age

Note that we have less values that the existing properties of the ExcelItem object, with it having 6 properties and we only having 3 listed on the database.

Also note that the PropertyName must match the property name of the object that I’ll use for the dynamic assignment.

Building the object

Now that we have the database table, we need to build the repository to get that and be able to use them in the code.

I will not be making a tutorial of this part, I’ll skip right at the start of the new GetExcelBytes() function.

public static byte[] GetExcelBytes(List<string> columns) {
 List<ExcelItem> excelItems = new List<ExcelItem>();
 List<dynamic> objectsToExcel = new List<dynamic>();
 ExcelExportService exportService = new ExcelExportService();

 foreach (var item in itemsToExcel)
 {
 dynamic newObject = new ExpandoObject();
 foreach (var col in columns)
 {
 this.AddProperty(newObject, col, product.GetType().GetProperty(col).GetValue(item, null));
 }

 objectsToExcel.Add(newObject);
 }

 return exportService.ExportToExcel(objectsToExcel);
}

Now we will be having creating an object with some of the properties of ExcelItem, but completely dynamic. Instead of using all the 6 properties, we are just using 3 of them, the one that we only want to send.

Now let’s pretend that this ExcelItem object has 200 properties, crazy, but it could happen.

The only thing that I have to do is to insert those properties that I want to render into the Excel file to that ColumnExcelItem table and that’s it.

Cases

In this case we just used a single case, but let’s say that you want to have different reports for some users. Let’s say that the admin role should get all the properties, then you would create something like this structure in the database

ReportingTemplates

Id PropertyName
---------------------
1 Admin
2 Users

ReportingTemplateItems

Id TemplateId PropertyName
---------------------
1 1 Id
2 1 Name
3 1 Surname
4 1 Age
5 1 CreatedAt
6 1 UpdatedAt
7 2 Name
8 2 Surname
9 2 Age

Then by getting the template you could have different columns, all dynamically and no code related.

If we have an user with the role Admins, the file will contain columns Id, Name, Surname, Age, CreatedAt, UpdatedAt.

In the case if you generate it using the Users role, it will have Name, Age. Surname.

Conclusion

This is a cool way of learing how the dynamic works in .NET, and it’s a really good solution when you need to have different roles or templates for different users, and not really interested on investing time hardcoding stuff.

Continuous delivery van NuGet-pakketten met TravisCI

Tue, 21 Jan 2020 00:00:00 +0000

Recently I did a tutorial on how to use Travis CI as a tool to automatically test your code that you just pushed or trying to push to master branch. Making it to be compiled and tested and finally report you the status of that change.

But we can keep making it better, for example, the core library that was made on that last tutorial, I want to make it public using the NuGet feed, so everyone can make easy operation in their libraries!

But how? How are we going to compile, test and then publish that package into the feed for everyone to download it in their projects?

Well, that’s this tutorial for 😁!

What’s new?

There’s almost no changes regarding the code, the things that we need to change are packing, publication and then how we can automate it.

.NET Core CLI

We are going to use the .NET Core CLI, we used it in the previous tutorial with commands like dotnet restore, dotnet build and dotnet test.

Now we are going to use a new set of commands!

`dotnet nuget`

You can check the documentation for this set of tools right here, but a briefly explanation:

dotnet nuget is a set of essentials tools that include installing, restoring, removing and publishing packages.

NuGet feed

NuGet is the package manager for .NET. The NuGet client tools provide the ability to produce and consume packages. The NuGet Gallery is the central package repository used by all package authors and consumers.

NuGet is free, so you can sign up and pick up your API key and start uploading packages. They will be uploaded, verified and then listed for everyone.

Get the API key

In order to upload your package you will need to get your API key after the sign up, so go the API keys page and create a new one.

Keep in mind that the API key has an expiration of 365 days.

Then copy your key and store it somewhere, as said in the page, you won’t be able to see it again, and if you didn’t save it you’ll have to regenerate it.

Generate NuGet package

Now that we have the API key, our next step is to generate that NuGet package from the solution, so go ahead and open the solution where you have your class library.

I will be using the solution from my last tutorial, which has a .NET Core library class called CalculatorCLI.Core.

Now go to the project properties and then Package, you will see a lot of information regarding the package like the package version, authors, descriptions and more.

Next is filling this, you don’t really have to fill everything, but the important and mandatory ones are Package id, Package version, Authors and Description. Also if you try and upload the file by yourself, it will be asking for License, we will need to add it too.

Then you can save, right click in the project and select Pack.

1>------ Build started: Project: CalculatorCLI.Core, Configuration: Debug Any CPU ------
1>CalculatorCLI.Core -> D:\Development\Personal\CalculatorCLI-demo\CalculatorCLI\CalculatorCLI.Core\bin\Debug\netstandard2.1\CalculatorCLI.Core.dll
1>Successfully created package 'D:\Development\Personal\CalculatorCLI-demo\CalculatorCLI\CalculatorCLI.Core\bin\Debug\CalculatorCLI.Core.1.0.0.1.nupkg'.
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

The output will show that if everything is alright, it will print Successfully created package.

Using `dotnet`

As in the previous tutorial, we used different commands in order to build and test the solution. Now, we are going to add more commands to pack and publish the packages.

Those commands are:

dotnet pack -c <configuration>
dotnet nuget push <package> <k <apikey> -s <source>

Deployment scripts

As we are going to change how the build is going to be, I belive that having different files, each of them containing a build definition depending on the enviroment, would be the best idea.

So let’s create a folder called scripts with three bash scripts in the root of the repository.

scripts\compile.sh

#!/bin/sh

echo "Restoring..."
dotnet restore ".\CalculatorCLI\CalculatorCLI.sln"

echo "Building..."
dotnet build ".\CalculatorCLI\CalculatorCLI.sln" -c Release

scripts\test.sh

#!/bin/sh

echo "Testing..."
dotnet test ".\CalculatorCLI\CalculatorCLI.sln" -c Release -v n

scripts\push.sh

#!/bin/sh

echo "Packing..."
dotnet pack ./CalculatorCLI/CalculatorCLI.Core/CalculatorCLI.Core.csproj -c Release

echo "Pushing..."
dotnet nuget push ./CalculatorCLI/CalculatorCLI.Core/bin/Release/*.nupkg -s "https://nuget.org" -k $NUGET_API_KEY

Improving the `.travis.yml` file

Now that we have the source code updated, we know the commands that we need to use, we need to integrate our continuous delivery with continuous integration. With that we don’t really have to do anything but code, test, review and push.

What we are going to do now, to the .travis.yml file, is the following:

Add different stages
Each stage depends on the branch
If your build is on master, it means that the package must be updated, therefore we are going to push our package to the NuGet feeds
If you build is a pull request, we still are going to check if the build compiles and test, but we are not going to publish it.

Stages

From their documentation:

You can filter out and reject builds, stages and jobs by specifying conditions in your build configuration (your .travis.yml file).

You can find more information regarding TravisCI stages in their documentation page.

So we are going to change the file and add the stages, which ends up like this:

language:
 csharp
sudo: required
mono: none 
dotnet: 3.0

os:
 - linux

jobs:
 include:
 - stage: compile
 script: bash scripts/compile.sh

 - stage: test
 script: bash scripts/test.sh

 - stage: deploy-prod
 if: branch = master AND type = push
 name: "Deploy to NuGet"
 script: bash scripts/push.sh

As you can see we have three different stages compile, test and push, which the last one only is going to run when the branch is master and it’s not a pull request to it, only a push.

If you don’t undestand about this, just go into the documentation and it’s explained quite easy.

With that in mind, all the pull request won’t be pushing anything to the NuGet feed.

Setting the API key as an environment variable

Go to your repository build’s settings and add a new environment variable, called NUGET_API_KEY with the value being the copied api key from the NuGet page.

Create a `pull request`

Now that we have everything set up, it’s time to make a pull request and check if the compilation for that pull request is ignoring out last stage.

Check the builds

Right as you make the pull request, a build will be queued in the TravisCI dashboard, and as you can see that we have 2 different builds there and not three.

Now let’s accept the pull request and check the build again to see that we now have three jobs instead of two.

And as soon as you can see the build being queued, you can see the three jobs including the Deploy-prod at the end.

As soon as this entire build complete, you can see in the logs that the package has been pushed to the sources.

And obviously you can see it in the NuGet page

That’s it

In this tutorial we found out about how to automate our NuGet package delivery. We used some tools like TravisCI, stages and dotnet nuget.

In my opinion, even if it’s something that would take time to set up properly and could be way too complex in some cases. Investing time in this kind of techniques in order to leave everything perfect and automated worth it.

You can find the source code, with the .travis.yml file right here, if you have any questions feel free to contact me on my twitter!

Continuous integration voor een .NET Core 3.0-project met TravisCI

Tue, 14 Jan 2020 00:00:00 +0000

This last weekeend I decided that I wanted to properly start my scraper-checker-downloader project that I’ve been doing in different repositories.

After starting yet another project, this had to be cool, like real cool, using CI/CD, pull request, documentation, badges in readme, everything that I’ve seen that it’s cool and indeed are the best practices.

And after a good weekend I ended up creating Dramarr, a set of tools that scrap and download shows from different sources.

It has different repositories in the organization and most of them are libraries that are being compiled, tested and deployed themselves in the pull request and when they’re merged in the master branch.

That is what it’s called CI/CD or continuous intregration/continuous delivery.

But for this tutorial we are just going to talk about CI.

Continuous integration

What is it?

Taken from Martin Fowler’s blog, which is the best explanation that I’ve read:

Continuous Integration is a software development practice where members of a team integrate their work frequently, usually each person integrates at least daily - leading to multiple integrations per day. Each integration is verified by an automated build (including test) to detect integration errors as quickly as possible.

Tools

There are many tools to integrate your workflow with CI/CD, but for this tutorial we’ll be using Github to store our code and the TravisCI tools to setup the CI. Regarding the language and frameworks, we will use C# and the new.NET Core 3.0.

Requirements

In order to make this work you need three simple things:

Latest version of Visual Studio 2019
Github account
Travis-CI account linked to your Github account

Project

For the sake of this tutorial, we will be doing a simple Calculator. We will be creating a library, a command line tool and a testing project to test everything.

This testing project will also be running when we set up the CI, meaning that if in the future we make a change to the code and the tests that we initially created are not passing, we will be getting a notification or we could simply reject the pull request.

Creating the Github repository

First, we will be creating a Github repository, so reach over to Github and create the repository and the clone it to your local environment. I decided to call this new repository CalculatorCLI-demo.

Creating the solution

Now let’s create an empty solution called CalculatorCLI, in the root folder of the cloned repository

Core library

As it would be in a real world project, we will be storing our logic in a separate project that generates a library, so let’s create it.

Go and create a Class Library (.NET Standard) and name it CalculatorCLI.Core

NET Core version

As soon as you create the project, go to the project properties and change the Target framework to .NET Standard 2.1, in order to make it compatible with projects built in .NET Core 3.0.

Code

For the sake of the tutorial, let’s make a simple class that handles operations.

using System;

namespace ConsoleCalculator.Core
{
 public enum OperatorsEnum
 {
 ADD,
 SUBSTRACT,
 MULTIPLY,
 DIVIDE
 }

 public class Operation
 {
 public OperatorsEnum OperatorEnum { get; set; }
 public int LeftValue { get; set; }
 public int RightValue { get; set; }

 public Operation(string operatorString, int leftValue, int rightValue)
 {
 switch (operatorString)
 {
 case "+":
 OperatorEnum = OperatorsEnum.ADD;
 break;
 case "-":
 OperatorEnum = OperatorsEnum.SUBSTRACT;
 break;
 case "*":
 OperatorEnum = OperatorsEnum.MULTIPLY;
 break;
 case "/":
 OperatorEnum = OperatorsEnum.DIVIDE;
 break;
 default:
 throw new Exception("Operator invalid");
 }

 LeftValue = leftValue;
 RightValue = rightValue;
 }

 public int DoOperation()
 {
 switch (OperatorEnum)
 {
 case OperatorsEnum.ADD:
 return LeftValue + RightValue;
 case OperatorsEnum.SUBSTRACT:
 return LeftValue - RightValue;
 case OperatorsEnum.MULTIPLY:
 return LeftValue * RightValue;
 case OperatorsEnum.DIVIDE:
 return LeftValue / RightValue;
 default:
 throw new Exception("Operator is not valid");
 }
 }
 }
}

CLI

Now that we have the core project, let’s create the application. In this case it will be a simple console application that accepts arguments and it shows a ouputs a result.

So let’s go ahead and create a new Console App (.NET Core), I named it CalculatorCLI.CLI.

NET Core version

As we did before, as soon as you create the project, go to the project properties and change the Target framework to .NET Core 3.0, if it’s not like that already.

Then add the reference to the ConsoleCLI.Core to our newly created project.

Code

Now for the code, this is simpler than before.

using ConsoleCalculator.Core;
using System;
using System.Text.RegularExpressions;

namespace ConsoleCalculator.CLI
{
 public class Program
 {
 public static void Main(string[] args)
 {
 if (args.Length == 0)
 {
 PrintUsage();
 }
 else
 {
 var joinedArgs = string.Join(" ", args);
 var regex = @"-op [\+\-\*\/] -l [-0-9]+ -r [-0-9]+";

 if (Regex.IsMatch(joinedArgs, regex))
 {
 int _left = Int32.Parse(args[3]);
 int _right = Int32.Parse(args[5]);
 string _operator = args[1];

 var _operation = new Operation(_operator, _left, _right);
 var _result = _operation.DoOperation();

 Console.WriteLine($"Result is: {_result}");
 }
 else
 {
 PrintUsage();
 }
 }
 }

 public static void PrintUsage()
 {
 Console.WriteLine($"Welcome to ConsoleCalculator!");
 Console.WriteLine($"");
 Console.WriteLine($"-op Operator, it must be +,-,*,/");
 Console.WriteLine($"-l Left number");
 Console.WriteLine($"-r Left number");
 Console.WriteLine($"");
 Console.WriteLine($"Example usage: -op + -l 5 -r 6");
 }
 }
}

We will be using this application from command like, so in order to make it work, we have to call it passing some parameters. For example:

ConsoleCalculator.CLI.exe -op + -l 10 -r 20

Which translates to:

ConsoleCalculator.CLI.exe -operator + -leftValue 10 -rightValue 20

The code for that is pretty simple, if it doesn’t match a certain regex pattern, it’s a wrong call and it call the PrintUsage(). This means that if we enter a something different than a number, because it’s set on the regex, it won’t even try to make hte calculation.

That means, if we call it like this:

ConsoleCalculator.CLI.exe -operator + -leftValue asdfg -rightValue ghjk

It won’t ever enter inside the operations logic and we are saving future checks like TryParseing the values.

Test

We have the core library and the command line, but we need now testing, because that’s what we want to do in the CI.

So let’s go ahead and create a new MSTest Test Project (.NET Core) and name it CalculatorCLI.Tests.

NET Core version

As we did before, as soon as you create the project, go to the project properties and change the Target framework to .NET Core 3.0, if it’s not like that already.

Then add the reference to the ConsoleCLI.Core and ConsoleCLI.Core to our newly created test project.

Code

We are going to split the test in two different files: CoreTests.cs and CLITests.cs

using CalculatorCLI.Core;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using System;
using System.Collections.Generic;
using System.Text;

namespace CalculatorCLI.Tests
{
 [TestClass]
 public class CoreTests
 {
 public int _left = 2;
 public int _right = 2;

 [TestMethod]
 public void ShouldAdd()
 {
 var expectedResult = 4;
 var operation = new Operation("+", _left, _right);
 var functionResult = operation.DoOperation();

 Assert.AreEqual(functionResult, expectedResult);
 }

 [TestMethod]
 public void ShouldSubstract()
 {
 var expectedResult = 0;
 var operation = new Operation("-", _left, _right);
 var functionResult = operation.DoOperation();

 Assert.AreEqual(functionResult, expectedResult);
 }

 [TestMethod]
 public void ShouldMultiply()
 {
 var expectedResult = 4;
 var operation = new Operation("*", _left, _right);
 var functionResult = operation.DoOperation();

 Assert.AreEqual(functionResult, expectedResult);
 }

 [TestMethod]
 public void ShouldDivide()
 {
 var expectedResult = 1;
 var operation = new Operation("/", _left, _right);
 var functionResult = operation.DoOperation();

 Assert.AreEqual(functionResult, expectedResult);
 }

 [TestMethod]
 [ExpectedException(typeof(System.DivideByZeroException))]
 public void ShouldThrowExceptionForDivideByZero()
 {
 var operation = new Operation("/", _left, 0);
 operation.DoOperation();
 }

 [TestMethod]
 [ExpectedException(typeof(System.Exception), "Operator invalid")]
 public void ShouldThrowExceptionForWrongOperator()
 {
 var operation = new Operation("text", _left, 0);
 operation.DoOperation();
 }
 }
}

using Microsoft.VisualStudio.TestTools.UnitTesting;
using System;
using System.Collections.Generic;
using System.Text;

namespace CalculatorCLI.Tests
{
 [TestClass]
 public class CLITests
 {
 public string _left = "2";
 public string _right = "2";

 [TestMethod]
 public void ShouldAdd()
 {
 var args = new string[] { "-op", "+", "-l", "45", "-r", "96" };
 CalculatorCLI.CLI.Program.Main(args);
 }

 [TestMethod]
 public void ShouldSubstract()
 {
 var args = new string[] { "-op", "-", "-l", "45", "-r", "96" };
 CalculatorCLI.CLI.Program.Main(args);
 }

 [TestMethod]
 public void ShouldMultiply()
 {
 var args = new string[] { "-op", "*", "-l", "45", "-r", "96" };
 CalculatorCLI.CLI.Program.Main(args);
 }

 [TestMethod]
 public void ShouldDivide()
 {
 var args = new string[] { "-op", "/", "-l", "45", "-r", "96" };
 CalculatorCLI.CLI.Program.Main(args);
 }
 }
}

With everything created we will end up with a solution like this:

And with this we can now run the Tests, so go to the Test Explorer in the Visual Studio and run them!

Travis CI

If you don’t already now, TravisCI is a hosted continuous integration and deployment system.

There are some steps that we have to here, but first we are going to link our Github repository to be listened by the TravisCI agents in order to build and test our project.

Enable repository

In order to do this, login to the Travis CI page and go to your repositories, then filter for the project that you created and enable it, by clicking on the slider next to the repository name.

Create .travis.yml

We need to create a file called .travis.yml in the root of you project, this is because as stated in the documentation:

Travis only runs builds on the commits you push after you’ve added a .travis.yml file.

So go and create a .travis.yml file in the root of the repository with the following lines:

language:
 csharp
sudo: required
mono: none 
dotnet: 3.0

os:
 - linux

before_script:
 - dotnet restore ".\CalculatorCLI\CalculatorCLI.sln"

script:
 - dotnet build ".\CalculatorCLI\CalculatorCLI.sln" -c Release
 - dotnet test ".\CalculatorCLI\CalculatorCLI.sln" -c Release -v n

I won’t get into the sytax of how the .travis.yml file works, but let’s review what this is doing:

We set up that the language will be csharp.
We won’t be using mono because .NET Core 3.0 will run native in Linux.
We set the dotnet version to 3.0.
We set the os, by default it’s linux but I added it anyways.
Now we have before_script which will wun before the major logic .here, so what I put was to run dotnet restore to the solution so everything loads perfectly later.
Now in the script, we will be doing a dotnet builld and dotnet test to our solution, this will check that it compiles and then run the tests.

Aaand we are done!

Upload to master

Now we just need to push everything to master.

git add --all
git commit -m "Initial files"
git push

Check continuous integration

We can check the CI status of the push to master that we did in in both the repository page or the TravisCI dashboard.

On progress

Finished

Let’s break it

Now in order to see how powerful this is, let’s break the code and change the core library in order to make it fail.

Code changes

So go to the Operation.cs and change something that will break some tests.

using System;

namespace CalculatorCLI.Core
{
 public enum OperatorsEnum
 {
 ADD,
 SUBSTRACT,
 MULTIPLY,
 DIVIDE
 }

 public class Operation
 {
 public OperatorsEnum OperatorEnum { get; set; }
 public int LeftValue { get; set; }
 public int RightValue { get; set; }

 public Operation(string operatorString, int leftValue, int rightValue)
 {
 switch (operatorString)
 {
 case "+":
 OperatorEnum = OperatorsEnum.SUBSTRACT;
 break;
 case "-":
 OperatorEnum = OperatorsEnum.SUBSTRACT;
 break;
 case "*":
 OperatorEnum = OperatorsEnum.MULTIPLY;
 break;
 case "/":
 OperatorEnum = OperatorsEnum.DIVIDE;
 break;
 default:
 throw new Exception("Operator invalid");
 }

 LeftValue = leftValue;
 RightValue = rightValue;
 }

 public int DoOperation()
 {
 switch (OperatorEnum)
 {
 case OperatorsEnum.ADD:
 return LeftValue + RightValue;
 case OperatorsEnum.SUBSTRACT:
 return LeftValue - RightValue;
 case OperatorsEnum.MULTIPLY:
 return LeftValue * RightValue;
 case OperatorsEnum.DIVIDE:
 return LeftValue / RightValue;
 default:
 throw new Exception("Operator is not valid");
 }
 }
 }
}

And if we run the test again, because we chagned the case to addition, it will fail:

case "+":
 OperatorEnum = OperatorsEnum.SUBSTRACT;
 break;

As expected, it failed for the ShouldAdd case:

Now make a commit of this change and push it to master, and wait for the results from the TravisCI agent.

git add --all
git commit -m "Breaking changes"
git push

Build

Now let’s go to TravisCI logs and we will see that we successfully broke the project, because the integration test are failing and the build status is error.

At the very end of the log we can see the error itself:

Let’s fix it again!

Now revert what we did and push the code to master, and check the status of the new build.

Tests are passing successfully:

And build is also a success:

Conclusion

It’s really quite powerful, CI and CD have existed since long time ago, but now it’s pretty simple to make it run in every single project, it doesn’t matter how small or simple it is.

From my point of view, everyone should at least set up CI for each of their projects, because it’s a good practice and it will eventually save you time debugging and finding error that shouldn’t occurr if you had set proper tests and CI.

That’s it

That’s it about how to create a .NET Core 3.0 solution that has continuous integration on every build using TravisCI and storing the code in Github.

You can find the source code for this project here.

Mijn kijk op in-memory cache

Tue, 03 Sep 2019 00:00:00 +0000

I’ve been working on some stuff that handled a big amount of data. While doing I realized that a big chunk of it never changes, or at least for some fixed time, it doesn’t.

So I thought that it would be useful to create a personal cache repository, of course this isn’t new, a few weeks ago I read about this in StackOverflow’s post written by Nick Craver about how they manage application cache.

Also I’ve always wanted to work with cache, how does it work, the logic and how could I make it work, so… why not!

Flow

Here is a quick flow of how the class that has the control of the cache will behave when the user ask for a value.

Implementation

Before we start

I know, I know. There’s System.Runtime.Caching that handles memory cache. But I decided to build it myself, if you want to use that class, check here for a how-to.

CacheItem

The first step is to have a class that stores the value of an object and the expiration date. Probably there’s a better way to do it, but this is what I thought, so there you go:

public class CacheItem
{
 public string Identifier { get; set; }
 public object Value { get; set; }
 public DateTime ValidUntil { get; set; }

 public CacheItem(string identifier, object value, TimeSpan valid)
 {
 Identifier = identifier;
 Value = value;
 ValidUntil = DateTime.UtcNow.Add(valid);
 }
}

CacheRepository

Then we need a class that handles the objects and saves them somewhere (as CacheItem). I like to handle all the data/models in classes that have the sufix Repository, but you dont have to, so let’s build one for caching.

public class CacheRepository
{
 private static Dictionary<string, string> Cache = new Dictionary<string, string>();
 private static T Set<T>(string key, Func<T> lookup, TimeSpan durationMinutes)
 {
 var item = new Models.Item(key, lookup(), durationMinutes);
 return Save<T>(key, item);
 }
 private static T Save<T>(string key, Item item)
 {
 Cache[key] = JsonConvert.SerializeObject(item);
 return (T)item.Value;
 }
 private static T Get<T>(string key)
 {
 var cached = Cache.FirstOrDefault(x => x.Key == key).Value;
 var item = string.IsNullOrEmpty(cached) ? null : JsonConvert.DeserializeObject<Item>(cached);
 return (item == null)
 ? default : (item.ValidUntil > DateTime.UtcNow)
 ? JsonConvert.DeserializeObject<T>(JsonConvert.SerializeObject(item.Value)) : default;
 }
 public static T GetOrSet<T>(string key, Func<T> lookup, TimeSpan durationMinutes)
 {
 var cache = Get<T>(key);
 return cache == null ? Set(key, lookup, durationMinutes) : cache;
 }
}

So far we have a static dictionary called Cache where all the items will be stored. Remember that this will only last while the application is running, thus why this tutorial title has in-memory caching in it.

Keep in mind that the Cache item will be initialized once the CacheRepository class is loadad.

The only method available when invoking the CacheRepository class is GetOrSet(string key, Func<T> lookup, TimeSpan durationMinutes) that needs three parameters:

key: the identifier of the object to save.
lookup: the callback function in case the cache expired or it’s null.
durationMinutes: the duration in minutes which will be added to the current time(in UTC).

Time to cache

Now, use our caching repository to get some data from somewhere.

In order for all of this to make sense, let’s create an example object with some properties, and then a repository to fetch and fill a list of that object.

public class User
{
 public Guid Id { get; set; }
 public string Name { get; set; }
 public string Email { get; set; }
}
public class UserRepository
{
 public List<User> Get()
 {
 // Code to get users
 }
}

Since we have the method to fill a list of User, let’s make use of the CacheRepository class.

private UserRepository _userRepository = new UserRepository();
private List<User> _user;
public List<User> User
{
 get
 {
 _user = CacheRepository.GetOrSet($"users", usersRepo.Get, TimeSpan.FromMinutes(10));
 return _user;
 }
}

And just like that, everytime that you access the variable User, it will ask to CacheRepository for the value of an object that has the key users.

If that key exists, it will check the expiration date. If either one of these conditions are false, it will use tha callback to set the value (with usersRepo.Get) of the object, save it to cache with the expiration date set to DateTime.UtcNow + TimeSpan.FromMinutes(10) and return it.

Paginaschermafbeeldingen maken met Devtools

Thu, 09 May 2019 00:00:00 +0000

There’s been times that I needed to show a client or a teammate a full screenshot of the current state of the website or even a part of it, so I’ve been using Full Page Screen Capture and, for any other kind of screenshots, Windows’ Snippet tool or Snaggit. If I want to host it online like in this post Gyazo, which also has a GIF maker.

Recently I found that Devtools has a tool that does a full-page screenshot, no extension needed!

This is not new thought, it was included in the Devtools update in April 2017, but looks like I live under a rock and didn’t find out until now…

Devtools

As stated in the official Devtools page:

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.

Running commands in Devtools

You already know how to open Devtools but in case you just forgot and for the sake of this post, open it using the key F12 or the shortcut Ctrl + Shift + I. Then you have to open the Run command in the menu inside Devtools or use Ctrl + Shift + P.

Screenshot tool

If you type screenshot it will filter the commands, there will be 4 types of screenshots methods that you can use:

Area screenshot
Full size screenshot
Node screenshot
Capture screenshot

Before checking all the screenshots methods, after devtools finishes processing the image, it will automatically download it with the name of the webpage.

Area screenshot

The area screenshot will let you select a part of the website and make an screenshot.

Result:

Full size screenshot

The full size screenshot will take a screenshot of the entire webpage, from start to bottom.

Result:

Node screenshot

The node screenshot will take let you make a screenshot of a selected node in the inspect element.

Result:

Capture screenshot

The capture screenshot will take a screenshot of the current page without scrolling and the size of the browser.

Result:

Aangepaste talen met embedded en externe resources in .NET Framework

Mon, 06 May 2019 00:00:00 +0000

Introduction

At work we came up with a normal problem that I’m pretty sure a lot of developers have to deal with, which is languages and custom languages from the clients that are giving our service to their clients.

For example, let’s say that the base language is using informal language and a client want formal languague because their clients are older people.

Also note that this solutions is for several languages, we will be using English and Spanish.

My mother language is not english si I apologize for any mistakes in the tutorial. If you find mistakes and want to fix them, you can open a pull request at this repo and I’ll gladly aprove it!

Resources

Resources are XML files with extension .resx which have a key/value structure and they look like the following:

<?xml version="1.0" encoding="utf-8"?>
<root>
 <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
 <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
 <xsd:element name="root" msdata:IsDataSet="true">
 <xsd:complexType>
 <xsd:choice maxOccurs="unbounded">
 <xsd:element name="metadata">
 <xsd:complexType>
 <xsd:sequence>
 <xsd:element name="value" type="xsd:string" minOccurs="0" />
 </xsd:sequence>
 <xsd:attribute name="name" use="required" type="xsd:string" />
 <xsd:attribute name="type" type="xsd:string" />
 <xsd:attribute name="mimetype" type="xsd:string" />
 <xsd:attribute ref="xml:space" />
 </xsd:complexType>
 </xsd:element>
 <xsd:element name="assembly">
 <xsd:complexType>
 <xsd:attribute name="alias" type="xsd:string" />
 <xsd:attribute name="name" type="xsd:string" />
 </xsd:complexType>
 </xsd:element>
 <xsd:element name="data">
 <xsd:complexType>
 <xsd:sequence>
 <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
 <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
 </xsd:sequence>
 <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
 <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
 <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
 <xsd:attribute ref="xml:space" />
 </xsd:complexType>
 </xsd:element>
 <xsd:element name="resheader">
 <xsd:complexType>
 <xsd:sequence>
 <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
 </xsd:sequence>
 <xsd:attribute name="name" type="xsd:string" use="required" />
 </xsd:complexType>
 </xsd:element>
 </xsd:choice>
 </xsd:complexType>
 </xsd:element>
 </xsd:schema>
 <resheader name="resmimetype">
 <value>text/microsoft-resx</value>
 </resheader>
 <resheader name="version">
 <value>2.0</value>
 </resheader>
 <resheader name="reader">
 <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
 </resheader>
 <resheader name="writer">
 <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
 </resheader>
 <data name="Action_cancel" xml:space="preserve">
 <value>Finish</value>
 </data>
 <data name="Action_greeting" xml:space="preserve">
 <value>Hello</value>
 </data>
</root>

We will be creating resources for two differente languages: english and spanish, so the nomenclature for the files will be: resources.ISOLANGUAGECODE.resx, for example: resource.es.resx for Spanish and resource.resx for english, in case we want to later add german, the file will be named resource.de.resx.

Embedded resource

Embedded resources, when the project is compiled, they will be added inside the dll.

Here is an image with a embedded resource, as you can see, the file Resource.resx can’t be seen in the compilation.

External resource

On the other side the external resources or not embedded are resources that will be added to the folder after compilation.

The resource files (.resx) will be inside the Properties folder

Building the project

Let’s start with a console project in .NET Framework.

Creating the embedded resource file

Add a resource file with a few keys and be sure that it is embedded resource, which later will we using to update with external resources.

Creating the external resource file

In order to separate the external resources from the embedded ones, we will be adding the external resources inside a folder with a name so we can access them easily later.

Tip: to add a folder inside the Properties folder, create it outside and move it inside, Visual Studio doesn’t let you create it

Do the same that we did for embedded resource, then go to properties of the file and inside Advanced, Build action and change it to: Content and change Copy to Output Dictionary to Copy if newer.

This is how it should look like:

Adding a key to app.config

Because we are cool developers and like to have everything well done and NOT changing the code for each client, let’s add a key to the appconfig that will have the name of the folder that we will be looking the resource files

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
 <startup>
 <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.7.2" />
 </startup>
 <appSettings>
 <add key="CustomResources.Folder" value="John" />
 </appSettings>
</configuration>

So later, when we will be looking for the resources, it will look in Properties.John instead of Properties.Doe.

Also this makes it easier to change when the application is already deployed since you can change the app.config easily.

Accessing embedded resource files

Using .NET Framework is fairly easy, so in order to access the Embedded properties we just have to use the Properties object, which will have the resources files as a property, and inside that object there will be all the key/value that we have in the resx file.

static void Main(string[] args)
{
 var hello = Properties.Resource.Action_greeting;
 var bye = Properties.Resource.Action_cancel;

 Console.WriteLine($"Action_greeting value: {hello}, Action_cancel value: {bye}");

 Console.Read();
}

Running that it should show us something like this:

Action_greeting value: Hello, Action_cancel value: Cancel

Accessing external resource files

This part it’s pretty much the same, you can access the resource files by the Properties object.

var hello = Properties.Resource.Action_greeting;
var bye = Properties.Resource.Action_cancel;

var johnhello = Properties.John.Resource.Action_greeting;
var johnbye = Properties.John.Resource.Action_cancel;

var doehello = Properties.Doe.Resource.Action_greeting;
var doebye = Properties.Doe.Resource.Action_cancel;

Problem

The main problem using this method is that every key is a property inside the object, so we have to call it like we saw before. If you want to call the key Action_greeting of the resources file of John we have to use the following Properties.John and then Resource.Action_greeting.

Right there is the problem.

Thats because if we are developing an applicaiton for a a lot of clients, it’s a bad idea to be change how we call the resource files for each of them.

Could you imagine that? Compiling the application for each client and change John to Doe and then to something else. That is insane!

Solution

Our teamleader thought of a pretty good method, something like a fallback system, we must have a base model of resources, and then for each of the clients have a a resource file that will be updating the file with their resources, and we end up with a single list of resources.

If the client doesn’t want custom resources we use the base resources, and if they want them, we use theirs.

To put this in a checklist, we have to do:

Find a way to map all the key/values to a dictionary for the embedded resources.
Find a way to map all the key/values to a dictionary for the external resources
Mix both files and have a single dictionary for each language
Create a method that access the dictionary and returns the value

Diagram

Let’s code

First of all, let’s create a separated class where we will have all our logic, from getting the resource files, to mixing them and returning the value. That class will be called CustomResources.

This is what is looks like:

 class CustomResources
 {

 private static Dictionary<string, string> _ResourcesEnglish;
 private static Dictionary<string, string> ResourcesEnglish;

 private static Dictionary<string, string> _ResourcesSpanish;
 private static Dictionary<string, string> ResourcesSpanish;


 private static Dictionary<string, string> OverwriteDictionary(Dictionary<string, string> currentDictionary, Dictionary<string, string> newDictionary, bool addIfDoesntExist = false)
 {
 ...
 }

 private static Dictionary<string, string> GetDictionaryFromEmbedded(string embedded, string cultureInfoCode)
 {
 ...
 }

 private static Dictionary<string, string> GetDictionaryFromFile(string file)
 {
 ...
 }

 public static string GetText(string key)
 {
 ...
 }

 public static string GetText(string key, string language)
 {
 ...
 }
 }

Note that we are implementing Lazy loading for properties, which helps to increase the performance and makes it load the dictionary once.

GetDictionaryFromEmbedded: returns a dictionary from embedded resources.
GetDictionaryFromFile: returns a dictionaryu from external resources.
OverwriteDictionary: mix two dictionaries and returns a single one.
GetText: returns a value given a key

From embedded resource to dictionary

We have to get all the properties from the xml file and return a dictionary:

private static Dictionary<string, string> GetDictionaryFromEmbedded(string embedded, string cultureInfoCode)
{
 Dictionary<string, string> res = new Dictionary<string, string>();

 try
 {
 ResourceManager rm = new ResourceManager(embedded, Assembly.GetExecutingAssembly());
 var resourceSet = rm.GetResourceSet(new CultureInfo(cultureInfoCode), true, true);

 var resourceDictionary = resourceSet.Cast<DictionaryEntry>()
 .ToDictionary(r => r.Key.ToString(),
 r => r.Value.ToString());
 res = resourceDictionary;
 }
 catch (Exception e)
 {
 string a = e.Message;
 // Error getting resource file
 }

 return res;
}

Two things:

Note that it needs a parameter called embedded, that parementers is the name of the file that you can see in the designer, in our case is: resources-demo.Properties.Resource.
Also we have a parameter called cultreInfoCode, which is the code for the language to be selected. Luckily for us, .NET Framework does the job for us and we dont have to do anything, just set that we want either english or spanish, and it will select between resource.es.resx or resource.resx

From external resource to dictionary

Getting from file a bit hacky but not hard, we have to get the current location of the executable, concat the location of the resource file and then parse it to a dictionary.

But first you have to add the reference to System.Windows.Forms, in order to access ResXResourceReader.

Now to our GetDictionaryFromFile method:

private static Dictionary<string, string> GetDictionaryFromFile(string file)
{
 Dictionary<string, string> res = new Dictionary<string, string>();
 string currentPath = (System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().GetName().CodeBase) + file).Replace("file:\\", "");

 try
 {
 using (ResXResourceReader resxReader = new ResXResourceReader(currentPath))
 {
 foreach (DictionaryEntry entry in resxReader)
 {
 res.Add((string)entry.Key, (string)entry.Value);
 }
 }
 }
 catch (Exception e)
 {
 string a = e.Message;
 }

 return res;
}

The file parameters needs to be filled with the location from the executable to the resource file, in our case is: "\\Properties\\John\\Resource.resx".

Mixing dictionaries

We are pretty much done, first, remember to add System.Configuration to the references so you can access app.settings.

 private static Dictionary<string, string> OverwriteDictionary(Dictionary<string, string> currentDictionary, Dictionary<string, string> newDictionary, bool addIfDoesntExist = false)
{
 var identifier = ConfigurationManager.AppSettings["CustomResources.Folder"];
 if (String.IsNullOrEmpty(identifier))
 return currentDictionary;

 foreach (var item in newDictionary)
 {
 try
 {
 currentDictionary[item.Key] = item.Value;
 }
 catch (Exception)
 {
 if(addIfDoesntExist)
 currentDictionary.Add(item.Key, item.Value);
 }
 }

 return currentDictionary;
}

Getting text from the dictionary

Create a public method that calls a private method which selects a language:

private static string GetText(string key, string language)
{
 try
 {
 switch (language)
 {
 case "es":
 return ResourceSpanish[key];
 case "en":
 default:
 return ResourceEnglish[key];
 }
 }
 catch (Exception)
 {
 return $"No value with key: {key} and language: {language}";
 }
}

public static string GetText(string key)
{
 try
 {
 return GetText(key, Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName);
 }
 catch (Exception)
 {
 return $"No value with key: {key}";
 }
}

Note that you have to modify the switch if you are adding more languages.

Adding code to the properties getter

Since we have all the methods right now, we can modify the getter of the public property to get the values.

private static Dictionary<string, string> _ResourcesEnglish;
private static Dictionary<string, string> ResourcesEnglish
{
 get
 {
 if (_ResourcesEnglish == null)
 {
 var folderIndentifier = ConfigurationManager.AppSettings["CustomResources.Folder"]; ;
 var baseResources = GetDictionaryFromEmbedded("resources-demo.Properties.Resource");
 var customResources = GetDictionaryFromFile($"\\Properties\\{folderIndentifier}\\Resource.resx", "en");
 _ResourcesEnglish = OverwriteDictionary(baseResources, customResources);
 }

 return _ResourcesEnglish;
 }
}

private static Dictionary<string, string> _ResourcesSpanish;
private static Dictionary<string, string> ResourcesSpanish
{
 get
 {
 if (_ResourcesSpanish == null)
 {
 var folderIndentifier = ConfigurationManager.AppSettings["CustomResources.Folder"]; ;
 var baseResources = GetDictionaryFromEmbedded("resources-demo.Properties.Resources");
 var customResources = GetDictionaryFromFile($"\\Properties\\{folderIndentifier}\\Resources.es.resx", "es");
 _ResourcesSpanish = OverwriteDictionary(baseResources, customResources);
 }

 return _ResourcesSpanish;
 }
}

First we get the indentifier from the app.settings.
Then we get the base resources, the embedded ones.
After that we get the custom resources and for that we need the folder name(which is the identifier).
Then we mix them and return the value.

All of this will be done once, ence the lazy loading.

Testing

Everything related to code is finished, so now let’s test it, in order to get a value from the dictionary we have to call the method CustomResources.GetText(string key) which returns the value.

Updating entire resource files

This testing is a case when we want to update the entire key/value of the resource files, as you can see in the pictures we have the same keys but different values.

We will we testing John, and in order to set that we will have the app.config set to <add key="CustomResources.Folder" value="John" />.

Now let’s check our base resource file (Properties/Resource.es.resx):

And then our external resource file (Properties/John/Resource.es.resx):

Okey with everything set, we run the console application, let’s stop to the get part of the properites and check everything

folderIdentifier has the value of the appseting:

baseResources has the value of the base resources, the embedded ones:

customResources has the values of the external resources inside the folder John:

And finally, _ResourcesSpanish has the value mixed from the base resources to to the external resources.

Updating only one

Now let’s test the same but having different scenario, just update one key and let the other be the same.

As you can see, the files has the same value meaning for Action_greeting but different value for Action_cancel, so it should update only Action_cancel.

Missing the resource file

If you don’t provide the external resource file, it doesn’t matter at all because as we are expecting to have a file, if it fails it will return an empty dictionary and when mixing both dictionaries it will end up with the base one.

Missing pair in embedded resource

If you have a pair in the external resource file, by default it will not add it to the final dictionary, you can change that by calling the method OverwriteDictionary() when mixing both dictionaries and set the parameter addIfDoesntExist to true.

Different languages

As you can see we didn’t specified any language, because all of that is being done by the function GetText(string key) which is calling GetText(string key, string language), and the parameter language is filled by TwoLetterISOLanguageName which returns the current language of our thread.

In my case I have spanish as the default language and that’s why it always shows it in spanish, but we can try using english too.

Let’s code a bit and build something to check both spanish and english.

static void Main(string[] args)
{

 // System.Threading.Thread.CurrentThread.CurrentUICulture = new CultureInfo("en-US");
 System.Threading.Thread.CurrentThread.CurrentCulture = new CultureInfo("en-US");
 WriteText("Action_greeting");
 WriteText("Action_cancel");

 // System.Threading.Thread.CurrentThread.CurrentUICulture = new CultureInfo("es-ES");
 System.Threading.Thread.CurrentThread.CurrentCulture = new CultureInfo("es-ES");
 WriteText("Action_greeting");
 WriteText("Action_cancel");

 Console.Read();
}

private static void WriteText(string key) {
 Console.WriteLine($"[Culture: {System.Threading.Thread.CurrentThread.CurrentCulture}] Key: {key} -> value: {CustomResources.GetText(key)}");
}

Running this, the output should be something like this:

[Culture: en-US] Key: Action_greeting -> value: Hello
[Culture: en-US] Key: Action_cancel -> value: Finish
[Culture: es-ES] Key: Action_greeting -> value: Hola
[Culture: es-ES] Key: Action_cancel -> value: Terminar

First two values are from resources.resx which are in english and the last both are in spanish and the values are retrieved from resources.es.resx.

That’s it

In this tutorial we found a way to mix both embedded and external resources for laguages, this was a solution for a problem we had in the team and it’s been running since then without any problems.

You can check the source code here.

If you have any question feel free to tweet me at @emimontesdeocaa and I’ll get back to you when I have time.

Integratietest met Bot Framework en DirectLine voor flowgevallen

Wed, 25 Apr 2018 00:00:00 +0000

Introduction

In the previous blog posts, we did some integration test for single cases. “Single cases” are those cases that after asking the bot something, he will reply only once and then we compare the results.

This guide is won’t explain how are the authentication and API calls done, if you want to check it out, please check out the single cases guide.

What about flow conversations?

Using the current way we dont have any kind of flow in the conversation, for example, if you want to ask for help and then a menu shows with different options, and then after selecting one of them, another menu. This would make like 2 or more responses. So this means that using the integration test solution that we used before, won’t work.

Here is a diagram of how the integration test for single cases work.

And here’s a diagram of how are we going to adapt the current integration test solution to flow cases.

The following explanation won’t cover all the basic information of how the Bot Framework works, if you dont undestand, please go and check the official documentation.

Example case

For the following guide, I’ll be using a bot with a flow conversation created by me, which is asking for help and then selecting different options.

New JSON structure

Now that we have more than one request when talking to the bot, we need to modify our json structure to add all the request that we will be doing.

{
 "secret": "direct-line-secret",
 "directlineGenerateTokenEndpoint":
 "https://directline.botframework.com/v3/directline/tokens/generate",
 "directlineConversationEndpoint":
 "https://directline.botframework.com/v3/directline/conversations/",
 "entries": [
 {
 "name": "PedirAyuda",
 "requests": [
 {
 "type": "message",
 "text": "Ayuda",
 "from": {
 "id": "default-user",
 "name": "User"
 },
 "locale": "es",
 "textFormat": "plain",
 "timestamp": "2018-04-09T08:04:37.195Z",
 "channelData": {
 "clientActivityId": "1523261059363.6264723268323733.0"
 },
 "entities": [
 {
 "type": "ClientCapabilities",
 "requiresBotState": true,
 "supportsTts": true,
 "supportsListening": true
 }
 ],
 "id": "61hacck8j6jg"
 },
 {
 "type": "message",
 "text": "Telefono",
 "from": {
 "id": "default-user",
 "name": "User"
 },
 "locale": "es",
 "textFormat": "plain",
 "timestamp": "2018-04-09T08:04:37.195Z",
 "channelData": {
 "clientActivityId": "1523261059363.6264723268323733.0"
 },
 "entities": [
 {
 "type": "ClientCapabilities",
 "requiresBotState": true,
 "supportsTts": true,
 "supportsListening": true
 }
 ],
 "id": "61hacck8j6jg"
 },
 {
 "type": "message",
 "text": "Oficina",
 "from": {
 "id": "default-user",
 "name": "User"
 },
 "locale": "es",
 "textFormat": "plain",
 "timestamp": "2018-04-09T08:04:37.195Z",
 "channelData": {
 "clientActivityId": "1523261059363.6264723268323733.0"
 },
 "entities": [
 {
 "type": "ClientCapabilities",
 "requiresBotState": true,
 "supportsTts": true,
 "supportsListening": true
 }
 ],
 "id": "61hacck8j6jg"
 },
 {
 "type": "message",
 "text": "Tenerife",
 "from": {
 "id": "default-user",
 "name": "User"
 },
 "locale": "es",
 "textFormat": "plain",
 "timestamp": "2018-04-09T08:04:37.195Z",
 "channelData": {
 "clientActivityId": "1523261059363.6264723268323733.0"
 },
 "entities": [
 {
 "type": "ClientCapabilities",
 "requiresBotState": true,
 "supportsTts": true,
 "supportsListening": true
 }
 ],
 "id": "61hacck8j6jg"
 }
 ],
 "response": {
 "type": "message",
 "timestamp": "2018-04-09T08:04:37.901Z",
 "localTimestamp": "2018-04-09T09:04:37+01:00",
 "serviceUrl": "http://localhost:50629",
 "channelId": "emulator",
 "from": {
 "id": "j98bbdf097a",
 "name": "Bot"
 },
 "conversation": {
 "id": "eabcie4be8ak"
 },
 "recipient": {
 "id": "default-user"
 },
 "locale": "es",
 "text": "922920252",
 "attachments": [],
 "entities": [],
 "replyToId": "61hacck8j6jg",
 "id": "47me557ikbf7"
 },
 "assert": "Request.Text == Response.Text"
 }
 ]
}

As you can see, there’s a important change, request is now requests. That meaning that now we have a List<Activity> instead of a single activity.

New objects

Previously we had our objects set for single cases: TestEntry and TestEntryCollection. For flow cases we will be creating new objects: TestEntryFlow and TestEntryFlowCollection.

`TestEntryFlow`

This object is for every entry that we have in the collection, look that the Requests object is now a List<Activity> instead of a single Activity as I mentioned before.

Since we will be asking the bot multiple times, we need to have multiple activities which will be sended to the conversation.

public class TestEntryFlow
{
 /// <summary>
 /// Entry name
 /// </summary>
 [JsonProperty("name")]
 public string Name { get; set; }
 /// <summary>
 /// Activity requested by the entry
 /// </summary>
 [JsonProperty("requests")]
 public List<Activity> Requests { get; set; }
 /// <summary>
 /// Activity response expected by the entry
 /// </summary>
 [JsonProperty("response")]
 public Activity Response { get; set; }
 /// <summary>
 /// Assert value in string
 /// </summary>
 [JsonProperty("assert")]
 public string Assert { get; set; }
}

`TestEntiresCollection`

This object will contain the relevant information for DirectLine like the secret and the endpoints, plus the list of Entries which we will be testing.

Note that, the Entries now it’s a list of TestEntryFlow and not TestEntry.

public class TestEntryFlowCollection
{
 /// <summary>
 /// DirectLine Secret
 /// </summary>
 [JsonProperty("secret")]
 public string Secret { get; set; }
 /// <summary>
 /// Endpoint to get the token using the secret for DirectLine
 /// </summary>
 [JsonProperty("directlineGenerateTokenEndpoint")]
 public string DirectLineGenerateTokenEndpoint { get; set; }
 /// <summary>
 /// Endpoint for a conversation in DirectLine
 /// </summary>
 [JsonProperty("directlineConversationEndpoint")]
 public string DirectLineConversationEndpoint { get; set; }
 /// <summary>
 /// Entries list
 /// </summary>
 [JsonProperty("entries")]
 public List<TestEntryFlow> Entries { get; set; }
}

Creating the `TestMethod` for flow cases

New flow

First of all, take a look again at the diagram again(it’s the same that I posted above).

As you can see, the flow structure in order to make the test is pretty much the same:

Get information
Authenticate
Create conversation

And here it what is changes, now we have to send multiple times all the request to the conversation. In order to do this, we have to loop for each request, send it to the bot, and then compare the latest response to our expected response.

Send all requests
Get all messages
Get latest response
Compare with expected response
Assert result

Code

First of all, we need to get the information from the file, this is the same as we did before with the single cases.

// Load entries from file
var path = System.IO.File.ReadAllText(@"C:\dataFlow.json");

// Deserialize to object
var data = JsonConvert.DeserializeObject<TestEntryFlowCollection>(path);

Now we have to loop for each TestEntryFlow, of the data.entries, with that we can follow the same flow that we did in the single cases until the new part, where we loop in the requests.

/// Arrange with current requested values
string token, newToken, conversationId;
Activity latestResponse = new Activity();

/// Act for step

/// 1 - Get token using secret from DirectLine in BotFramework panel
token = Utils.uploadString<DirectLineAuth>(data.Secret, data.DirectLineGenerateTokenEndpoint, "").token;

/// 2 - Create a new conversation
var createdConversation = Utils.uploadString<DirectLineAuth>(token, data.DirectLineConversationEndpoint, "");

// This returns a new token and a conversationId
newToken = createdConversation.token;
conversationId = createdConversation.conversationId;

/// 3 - Send an activity to the conversation with new token and conversationId
string directlineConversationActivitiesEndpoint = data.DirectLineConversationEndpoint + conversationId + "/activities";

The following step is pretty simple, we have to loop in the the entry.requests and send every activity to the conversation.

foreach (Activity step in entry.Requests)
{
 if (step.Type == ActivityTypes.Message)
 {
 /// Step
 Utils.uploadString<DirectLineAuth>(newToken, directlineConversationActivitiesEndpoint, JsonConvert.SerializeObject(step));

 /// 4 - Get all activities, we get a List<activity> and a watermark
 var getLastActivity = Utils.downloadString<ActivityResponse>(newToken, directlineConversationActivitiesEndpoint);

 /// 5 - Get the latest activity which is the response we should be expecting
 latestResponse = getLastActivity.activities[Int32.Parse(getLastActivity.watermark)];
 }
}

We use the watermark to get th latest message, the watermark is a value that the DirectLine API returns when asking for the conversation information.

After that, we just have to fill the globals with our latestReponse and expectedResponse.

/// Arrange with new values
var globals = new Objects.Globals { Request = entry.Response, Response = latestResponse };

And to finish the case, we evaluate the assert string in the entry.

/// Assert
Assert.IsTrue(await CSharpScript.EvaluateAsync<bool>(entry.Assert, globals: globals));

Final code

[TestMethod]
public async Task ShouldTestFlowCases()
{
 // Load entries from file
 var path = System.IO.File.ReadAllText(@"C:\dataFlow.json");

 // Deserialize to object
 var data = JsonConvert.DeserializeObject<TestEntryFlowCollection>(path);

 /// Flow: Arrange -> Act -> arrange -> assert
 foreach (TestEntryFlow entry in data.Entries)
 {
 /// Arrange with current requested values
 string token, newToken, conversationId;
 Activity latestResponse = new Activity();

 /// Act for step

 /// 1 - Get token using secret from DirectLine in BotFramework panel
 token = Utils.uploadString<DirectLineAuth>(data.Secret, data.DirectLineGenerateTokenEndpoint, "").token;

 /// 2 -Create a new conversation
 var createdConversation = Utils.uploadString<DirectLineAuth>(token, data.DirectLineConversationEndpoint, "");

 // This returns a new token and a conversationId
 newToken = createdConversation.token;
 conversationId = createdConversation.conversationId;

 /// 3 - Send an activity to the conversation with new token and conversationId
 string directlineConversationActivitiesEndpoint = data.DirectLineConversationEndpoint + conversationId + "/activities";

 foreach (Activity step in entry.Requests)
 {
 if (step.Type == ActivityTypes.Message)
 {
 /// Step
 Utils.uploadString<DirectLineAuth>(newToken, directlineConversationActivitiesEndpoint, JsonConvert.SerializeObject(step));

 /// 4 - Get all activities, we get a List<activity> and a watermark
 var getLastActivity = Utils.downloadString<ActivityResponse>(newToken, directlineConversationActivitiesEndpoint);

 /// 5 - Get the latest activity which is the response we should be expecting
 latestResponse = getLastActivity.activities[Int32.Parse(getLastActivity.watermark)];
 }
 }

 /// Arrange with new values
 var globals = new Objects.Globals { Request = entry.Response, Response = latestResponse };

 /// Assert
 Assert.IsTrue(await CSharpScript.EvaluateAsync<bool>(entry.Assert, globals: globals));
 }

 await Task.CompletedTask;
}

Improvements

I do belive that a better flow could be possible, but this improvement will means that the JSON structure should be changed aswell. Also, in order to make this happen, the json have to be more filled up.

In order to make this testing better, we should have the a response for each request, and we should be asserting every time we send a message. The way that we are doing it right now is by storing all the requests and the final response .

I made a diagram to show how this would look.

I strongly think that this way is much better overall for the integrity of the test, since you are testing pretty much every behaviour in the flow instead of just testing the final response.

Well that’s all for this guide, please remember that this guide is meant to be a continuation of the single cases guide, if you feel lost, check that guide which is longer and has more explanation for everything.

Remember that all the code is stored in my github in this repository.

Have a good day!

Integratietest met Bot Framework en DirectLine (1)

Tue, 24 Apr 2018 00:00:00 +0000

Since I started working at a company for a short period of time, I’ve been asigned to work on integration test for the Bot Framework.

My work in the group is to make the bot to be as stable as posible, but first, what is Bot Framework?

Build, connect, deploy, and manage intelligent bots to naturally interact with your users on a website, app, Cortana, Microsoft Teams, Skype, Slack, Facebook Messenger, and more. Get started quick with a complete bot building environment, all while only paying for what you use.

You can find more information about Bot Framework right here.

The following explanation won’t cover all the basic information of how the Bot Framework works, if you dont undestand, please go and check the official documentation.

Why do I need integration test?

Integration test are needed because everytime one of my coworkers pushes a fix, a new feature, or even a new bug, this tests will run before pushing the code to production and if any of the test fails, the code won’t go to production, meaning that the end user won’t have the bug.

Integration test in bots?

I do belive that in bots, the integration test are quite important. You can’t have a bot where some of their menus aren’t working, or some of the feautres are returning nothing.

Companies are using bots for their customers because they don’t want people to be busy with their problems, if a bot can help an user, the other workers will be able to use their time to do something more important.

Overview of the solution.

In order to make this work, I used a Test project in Visual Studio, which will use WebClient for the API Rest and a Json file, where we will store our cases.

JSON file

{
 "secret": "direct-line-secret",
 "directlineGenerateTokenEndpoint": "https://directline.botframework.com/v3/directline/tokens/generate",
 "directlineConversationEndpoint": "https://directline.botframework.com/v3/directline/conversations/",
 "entries": [
 {
 "name": "DecirHola",
 "request": {
 "type": "message",
 "text": "Hola",
 "from": {
 "id": "default-user",
 "name": "User"
 },
 "locale": "es",
 "textFormat": "plain",
 "timestamp": "2018-04-09T08:04:37.195Z",
 "channelData": {
 "clientActivityId": "1523261059363.6264723268323733.0"
 },
 "entities": [
 {
 "type": "ClientCapabilities",
 "requiresBotState": true,
 "supportsTts": true,
 "supportsListening": true
 }
 ],
 "id": "61hacck8j6jg"
 },
 "response": {
 "type": "message",
 "timestamp": "2018-04-09T08:04:37.901Z",
 "localTimestamp": "2018-04-09T09:04:37+01:00",
 "serviceUrl": "http://localhost:50629",
 "channelId": "emulator",
 "from": {
 "id": "j98bbdf097a",
 "name": "Bot"
 },
 "conversation": {
 "id": "eabcie4be8ak"
 },
 "recipient": {
 "id": "default-user"
 },
 "locale": "es",
 "text": "No tengo respuesta para eso.",
 "attachments": [],
 "entities": [],
 "replyToId": "61hacck8j6jg",
 "id": "47me557ikbf7"
 },
 "assert": "Request.Text == Response.Text"
 }
 ]
}

As you can see we have:

Directline secret -> secret from the published bot
Directline token generation endpoint -> endpoint to get the token using the secret
Directline conversation endpoint -> endpoint in order to play with the conversation
Entry -> the test case
- Request -> what we send to the conversation
- Response -> what we expect to get
- Assert -> what are we comparing

Deserialization

We have the json file perfectly formatted, now we have to load it into the solution, so we will be using JSON.NET and some classes. First we have the entry collection, which has everything, and then we have, for each collection a list of entries.

 /// <summary>
 /// Object to parse from the file
 /// </summary>
 public class TestEntriesCollection
 {
 /// <summary>
 /// DirectLine Secret
 /// </summary>
 [JsonProperty("secret")]
 public string Secret { get; set; }
 /// <summary>
 /// Endpoint to get the token using the secret for DirectLine
 /// </summary>
 [JsonProperty("directlineGenerateTokenEndpoint")]
 public string DirectLineGenerateTokenEndpoint { get; set; }
 /// <summary>
 /// Endpoint for a conversation in DirectLine
 /// </summary>
 [JsonProperty("directlineConversationEndpoint")]
 public string DirectLineConversationEndpoint { get; set; }
 /// <summary>
 /// Entries list
 /// </summary>
 [JsonProperty("entries")]
 public List<TestEntry> Entries { get; set; }
 }

And this is the object that has the name, request, response and assert for the test case.


 public class TestEntry
 {
 /// <summary>
 /// Entry name
 /// </summary>
 [JsonProperty("name")]
 public string Name { get; set; }
 /// <summary>
 /// Activity requested by the entry
 /// </summary>
 [JsonProperty("request")]
 public Activity Request { get; set; }
 /// <summary>
 /// Activity response expected by the entry
 /// </summary>
 [JsonProperty("response")]
 public Activity Response { get; set; }
 /// <summary>
 /// Assert value in string
 /// </summary>
 [JsonProperty("assert")]
 public string Assert { get; set; }
 }

Parsing from json to object in the test case

Having the classes for the parsing object, it’s quite easy as we need to read as the object.

// Load entries from file
var path = System.IO.File.ReadAllText(@"C:\data.json");

// Deserialize to object
var data = JsonConvert.DeserializeObject<TestEntriesCollection>(path);

Now with this collection, we will be able to loop through it and get the information using, for example, a foreach.

 foreach (TestEntry entry in data.Entries)
 {
 ....
 }

And that’s all for this part, the next part will include the authorization for DirectLine, remember that all the code is stored in my github in this repository.

Integratietest met Bot Framework en DirectLine (2)

Tue, 24 Apr 2018 00:00:00 +0000

In this part, we will make the DirectLine authorization and get the values from the bot’s response.

Now that we have done the deserialize, it’s time to get the information from the collection and the entires which we will be using to get authorization, make the api calls and assert the result.

The following explanation won’t cover all the basic information of how the Bot Framework works, if you dont undestand, please go and check the official documentation.

Making API calls using WebClient

In order to make easier for us to call the api, I created a utils class, where we save the functions that we will be using a few times, this class includes uploadString for POST and downloadString for GET.

 public class Utils
 {
 /// <summary>
 /// Uploads to an URL and gets result
 /// </summary>
 /// <typeparam name="T">Type of object you are receiving</typeparam>
 /// <param name="bearer">Token</param>
 /// <param name="url">Url</param>
 /// <param name="serializedJson">Serialized JSON to send</param>
 /// <returns></returns>
 public static T uploadString<T>(string bearer, string url, string serializedJson)
 {
 string serializedResult = "";

 /// Webclient
 using (var client = new WebClient())
 {
 /// Add headers
 client.Headers.Add("Content-Type", "application/json");
 client.Headers.Add("Authorization", $"Bearer {bearer}");

 /// Upload string
 serializedResult = client.UploadString(url, serializedJson);
 }

 /// Get result and return it as an object
 return JsonConvert.DeserializeObject<T>(serializedResult);
 }

 /// <summary>
 /// Downloads from URL
 /// </summary>
 /// <typeparam name="T">Type of object you are receiving</typeparam>
 /// <param name="bearer">Token</param>
 /// <param name="url">Url</param>
 /// <returns></returns>
 public static T downloadString<T>(string bearer, string url)
 {
 string serializedResult = "";

 /// Webclient
 using (var client = new WebClient())
 {
 /// Add headers
 client.Headers.Add("Content-Type", "application/json");
 client.Headers.Add("Authorization", $"Bearer {bearer}");

 /// Download string
 serializedResult = client.DownloadString(url);
 }

 /// Get result and return it as an object
 return JsonConvert.DeserializeObject<T>(serializedResult);
 }
 }

DirectLine authorization

If you read the official documentation, you can find how to do it, and it is quite easy, using our functions it’s even easier. First of all remember that we are inside the foreach statement, since we are doing the authetication for each case, in case we run out of time, which will means that the test will fail.

/// Arrange with current requested values
string token, newToken, conversationId;
/// Act

/// 1 - Get token using secret from DirectLine in BotFramework panel
token = Utils.uploadString<DirectLineAuth>(data.Secret, data.DirectLineGenerateTokenEndpoint, "").token;

Now we have the token, which will be used to make all the following calls to the conversation endpoint.

Creating a conversation.

In order to talk to the bot, we first need to create a conversation, this conversation will return a new token which includes the conversation id.

/// 2 -Create a new conversation
var createdConversation = Utils.uploadString<DirectLineAuth>(token, data.DirectLineConversationEndpoint, "");

// This returns a new token and a conversationId
newToken = createdConversation.token;
conversationId = createdConversation.conversationId;

Also, we do store the newToken and conversationId, both will be needed for the user to send messages to the bot.

Send activity to conversation

Now, with the conversationId and the conversationEndpoint, we can create the final endpoint to send an Activity which is the request from the json file.

/// 3 - Send an activity to the conversation with new token and conversationId
string directlineConversationActivitiesEndpoint = data.DirectLineConversationEndpoint + conversationId + "/activities";
Utils.uploadString<DirectLineAuth>(newToken, directlineConversationActivitiesEndpoint, JsonConvert.SerializeObject(entry.Request));

Get latest message

In the message history, after we sended the activity, the bot should have responded already, so we have to get all the messages with the watermark and then using that watermark, filter the latest message/activity.

/// 4 - Get all activities, we get a List<activity> and a watermark
var getLastActivity = Utils.downloadString<ActivityResponse>(newToken, directlineConversationActivitiesEndpoint);

/// 5 - Get the latest activity which is the response we should be expecting
var latestResponse = getLastActivity.activities[Int32.Parse(getLastActivity.watermark)];

And that’s all for this part, the next part will include the part where we get the text from the assert in the json, convert it to code like using eval() in Javascript but in C#, and then using the Assert.isTrue() to get the final test result.

Remember that all the code is stored in my github in this repository.

Integratietest met Bot Framework en DirectLine (3)

Tue, 24 Apr 2018 00:00:00 +0000

This is the latest part of the guide, in this part, we will be evaluating the text from the assert in the json.

Now that we used the request and sended as an activity to the bot, we got the response and we have to compare what the assert in the json(the response we have stored in the json, this is the expected response) with the response we got from the bot.

The following explanation won’t cover all the basic information of how the Bot Framework works, if you dont undestand, please go and check the official documentation.

Adding Microsoft.CodeAnalysis to the solution

First of all, we have to include CodeAnalysis as a NuGet package.

After installation, remember to add the pacakge to the .cs file.

using Microsoft.CodeAnalysis.CSharp.Scripting;

Creating a `Globals` object

In order to evaluate, we have to pass the parameters to the evaluator. This evaluator needs a configuration file.

 /// <summary>
/// Object to pass parameters to Roslyn compiler
/// </summary>
public class Globals
{
 /// <summary>
 /// ExpectedResponse
 /// </summary>
 public Activity Request;
 /// <summary>
 /// ReceivedResponse
 /// </summary>
 public Activity Response;
}

This part is very important, in that configuration file we will be including what objects we will be comparing, so for us, we need to pass it the expected respose and the response received.

With that information, it will be using the assert in the json file and it will be evaluating what is says.

/// Arrange with new values
var globals = new Objects.Globals { Request = entry.Response, Response = latestResponse };

/// Assert
Assert.IsTrue(await CSharpScript.EvaluateAsync<bool>(entry.Assert, globals: globals));

The EvaluateAsync<T> evaluates and returns T, in our case we pass the string to evaluate and globals, which has the data where it will evaluate.

I’m going to try to explain this with an example, using an entry(which has a name, request, response and assert).

{
 "name": "DecirHola",
 "request": {
 "type": "message",
 "text": "Hola",
 "from": {
 "id": "default-user",
 "name": "User"
 },
 "locale": "es",
 "textFormat": "plain",
 "timestamp": "2018-04-09T08:04:37.195Z",
 "channelData": {
 "clientActivityId": "1523261059363.6264723268323733.0"
 },
 "entities": [
 {
 "type": "ClientCapabilities",
 "requiresBotState": true,
 "supportsTts": true,
 "supportsListening": true
 }
 ],
 "id": "61hacck8j6jg"
 },
 "response": {
 "type": "message",
 "timestamp": "2018-04-09T08:04:37.901Z",
 "localTimestamp": "2018-04-09T09:04:37+01:00",
 "serviceUrl": "http://localhost:50629",
 "channelId": "emulator",
 "from": {
 "id": "j98bbdf097a",
 "name": "Bot"
 },
 "conversation": {
 "id": "eabcie4be8ak"
 },
 "recipient": {
 "id": "default-user"
 },
 "locale": "es",
 "text": "No tengo respuesta para eso.",
 "attachments": [],
 "entities": [],
 "replyToId": "61hacck8j6jg",
 "id": "47me557ikbf7"
 },
 "assert": "Request.Text == Response.Text"
 }

Let’s get the important things from this entry, first the assert "assert": "Request.Text == Response.Text", this means that the it will compare the Request.Text with the Response.Text, and return the value as a boolean.

But when we are calling the function await CSharpScript.EvaluateAsync<bool>(entry.Assert, globals: globals) we are passing 2 parameters:

string string to evaluate -> "Request.Text == Response.Text"
globals data for the evaluator -> in this case we are have to give a Request and a Response, the request is our expected response and the response is the received response.

As we are filling the data in the evaluator, now we can use the string and evaluate, so it will return true or false.

Done

We are done, here you can see the finished TestMethod

[TestMethod]
public async Task ShouldTestSingleCases()
{
 // Load entries from file
 var path = System.IO.File.ReadAllText(@"C:\data.json");

 // Deserialize to object
 var data = JsonConvert.DeserializeObject<TestEntriesCollection>(path);

 /// Flow: Arrange -> Act -> arrange -> assert

 foreach (TestEntry entry in data.Entries)
 {
 /// Arrange with current requested values
 string token, newToken, conversationId;

 if (entry.Request.Type == ActivityTypes.Message)
 {
 /// Act

 /// 1 - Get token using secret from DirectLine in BotFramework panel
 token = Utils.uploadString<DirectLineAuth>(data.Secret, data.DirectLineGenerateTokenEndpoint, "").token;

 /// 2 -Create a new conversation
 var createdConversation = Utils.uploadString<DirectLineAuth>(token, data.DirectLineConversationEndpoint, "");

 // This returns a new token and a conversationId
 newToken = createdConversation.token;
 conversationId = createdConversation.conversationId;

 /// 3 - Send an activity to the conversation with new token and conversationId
 string directlineConversationActivitiesEndpoint = data.DirectLineConversationEndpoint + conversationId + "/activities";
 Utils.uploadString<DirectLineAuth>(newToken, directlineConversationActivitiesEndpoint, JsonConvert.SerializeObject(entry.Request));

 /// 4 - Get all activities, we get a List<activity> and a watermark
 var getLastActivity = Utils.downloadString<ActivityResponse>(newToken, directlineConversationActivitiesEndpoint);

 /// 5 - Get the latest activity which is the response we should be expecting
 var latestResponse = getLastActivity.activities[Int32.Parse(getLastActivity.watermark)];

 /// Arrange with new values
 var globals = new Objects.Globals { Request = entry.Response, Response = latestResponse };

 /// Assert
 Assert.IsTrue(await CSharpScript.EvaluateAsync<bool>(entry.Assert, globals: globals));
 }
 }
 await Task.CompletedTask;
}

Diagram

Here is a diagram of all the flow we followed to get this this point, hopefully if you didnt undestand something this clears it up.

And that is all, this is done for single cases where the case is 1-to-1, user sends an activity and bot returns another single activity.

I hope you liked it, next one will be the testing flow cases with more than one response.

Remember that all the code is stored in my github in this repository.

Lezingen

Mon, 01 Jan 0001 00:00:00 +0000

Ik ben een frequente spreker op internationale technologieconferenties, met focus op .NET, Azure, AI en cloud-native ontwikkeling. Ik ben erkend als Sessionize Most Active Speaker in 2023, 2024 en 2025 en ik bezit de Microsoft MVP-certificering in Developer Technologies.

Als u wilt dat ik op uw evenement spreek, laten we dan praten!

2026

Blazor in 2026

Een blik op de huidige staat van Blazor in 2026 en hoe het is geëvolueerd naast .NET 10. We bespreken de laatste wijzigingen en verbeteringen, hun impact op de ontwikkeling van echte applicaties, en welk Blazor-hostingmodel het beste bij elk scenario past.

Level 3-ondersteuning superchargen met AI: Azure Functions + OpenAI in actie

Hoe Azure Functions, Azure Monitor-waarschuwingen en Azure OpenAI samenwerken om Level 3-ondersteuning te versnellen. Van automatische waarschuwingstriage tot intelligente loganalyse — een praktische blik op het toevoegen van AI aan echte ondersteuningsworkflows.

Van dashboard naar agent: de volgende stap in observability

Een hands-on sessie die de wereld van AI-agenten en productie-observability verbindt. Van Semantic Kernel tot autonome agenten die OpenTelemetry-data opvragen en met Grafana communiceren via MCP.

Binnenkort: Global Azure 2026 — April 2026, Madrid, Spanje

2025

Microsoft’s Agent Framework om Kerstmis te redden

Meerdere AI-agenten bouwen en coördineren met het Microsoft Agent Framework om de perfecte kerstcadeaus te vinden.

Level 3-ondersteuning versterken met AI: Azure Functions + Semantic Kernel in actie

Azure Functions, Azure Monitor en Semantic Kernel werken samen om Level 3-ondersteuning sneller en efficiënter te maken.

Wat is er nieuw in Blazor met .NET 10?

De belangrijkste nieuwe functies in Blazor voor .NET 10 verkennen, inclusief prestatieverbeteringen, formulieren en persistent state.

Hybride AI met C#, Semantic Kernel en Gemini: Slimmere Enterprise-apps bouwen

Hybride AI-workflows orkestreren in C# — lokale modellen (Phi-3) mixen met Gemini Pro/Ultra via Vertex AI.

.NET Aspire: Cloud-Native apps bouwen zonder hoofdpijn

Een hands-on sessie voor het bouwen van cloud-first microservices die van nature schaalbaar, veerkrachtig en observeerbaar zijn.

.NET Aspire: Cloud-Native zonder de chaos

Praktijkvoorbeelden van het ontwerpen van apps die van nature schaalbaar zijn.

2024

AI ontmoet SQL: Een slimme pizzawinkel bouwen met .NET en Semantic Kernel

Natuurlijke taal AI-interacties die uw code en uw gegevens begrijpen.

.NET Aspire: Cloud-Native-applicaties zonder complicaties

Cloud-first microservices bouwen zonder hoofdpijn.

Power Platform: De reis van Low-code naar Pro-code-technologieën

Overstap van Low-code Power Apps naar geavanceerde Pro-code-componenten met TypeScript.

Intelligente Automatisering: Transformeer uw bedrijfsapplicaties met geïntegreerde AI

.NET-applicaties naar het volgende niveau tillen.

Van Low-Code naar Pro-Code: Benaderingen voor AI-ontwikkeling in bedrijfsoplossingen

Verschillende benaderingen voor bedrijfsoplossingen verkennen.

Reiskosten beheren met Azure

Azure AI Vision, Document Intelligence en OpenAI met Semantic Kernel gebruiken om reiskostenbeheer te automatiseren.

Badges & Erkenning

🏆 Sessionize Most Active Speaker 2025
🏆 Sessionize Most Active Speaker 2024
🏆 Sessionize Most Active Speaker 2023
🏅 Microsoft MVP in Developer Technologies

Bekijk alle sessies op Sessionize →

Over mij

Mon, 01 Jan 0001 00:00:00 +0000

Over mij

Ik ben Emiliano Montesdeoca — een Uruguayaans-Spaanse softwareontwikkelaar, Microsoft MVP in Developer Technologies, en trotse vader woonachtig in Tenerife, Canarische Eilanden.

Ik hou ervan complexe technische uitdagingen aan te gaan en schaalbare cloudoplossingen te bouwen met Microsoft-technologieën. Mijn dagelijkse toolkit draait om .NET, Azure, AI met Semantic Kernel en moderne architecturen zoals .NET Aspire.

Wat ik doe

Als Cloud Solutions Team Lead bij Intelequia Technologies leid ik het ontwerp en de levering van cloud-native applicaties — strategische visie combinerend met praktische uitvoering. Ik gedij op het snijpunt van architectuur en code, zodat ons team oplossingen levert die zowel elegant als productieklaar zijn.

Community

Ik spreek regelmatig op internationale techconferenties en ben erkend als Sessionize Most Active Speaker in 2023, 2024 en 2025. Ik deel praktische, realistische inzichten via lezingen op conferenties wereldwijd en via mijn blogs.

Ik ben ook de maker van The .NET Blog — een bron voor de .NET-community — en schrijf regelmatig op deze blog over wat ik leer en bouw.

Mentoring en gemeenschapsopbouw zijn een kernonderdeel van wie ik ben. Iets teruggeven aan het ecosysteem dat mijn carrière heeft gevormd, neem ik serieus.

Laten we verbinden

Ik sta altijd open om te spreken op evenementen, samen te werken aan projecten of te praten over cloudarchitectuur en AI. Neem gerust contact op!

Email: emimontesdeoca@outlook.es
GitHub: @emimontesdeoca
X / Twitter: @emimontesdeocaa
LinkedIn: emimontesdeoca
Instagram: @emimontesdeoca
Sessionize: emimontesdeoca

Emiliano Montesdeoca

Blazor vanaf nul: Hoofdstuk 3 — Componenten die schalen

Wat een Blazor-component echt is

Stap 1: Begin met een gerichte component

Stap 2: Maak gedrag expliciet met parameters

Stap 3: Gebruik RenderFragment voor compositie

Stap 4: Kies compositie boven gigantische pagina’s

Stap 5: Houd markup en logica in balans

Stap 6: Praktische mappenstructuur

Veelgemaakte fouten in vroege Blazor-projecten

Volgende hoofdstuk

Blazor vanaf nul: Hoofdstuk 2 — Je eerste Blazor-app

Stap 1: Project maken

Stap 2: Lokaal draaien

Stap 3: Projectstructuur begrijpen

Stap 4: Je eerste wijziging

Stap 5: Lees Program.cs één keer

Veelvoorkomende problemen

Volgende hoofdstuk

Blazor van de Grond Af: Hoofdstuk 1 — Wat is Blazor?

Een korte geschiedenis

Wat Blazor werkelijk is

De renderingmodellen

Statische SSR

Interactieve Server

Interactieve WebAssembly

Auto-modus

Modi mixen in dezelfde app

Hoe Blazor zich verhoudt tot JavaScript-frameworks

Wat je nodig hebt om mee te doen

Wat hierna komt

Blazor van de Grond Af: Een Nieuwe Serie

Voor Wie Is Deze Serie

Wat We Gaan Behandelen

Waarom Een Serie, Waarom Nu

Hoe Je De Serie Kunt Volgen

C# Union Types: gediscrimineerde unions komen eindelijk

What Are Discriminated Unions?

How We Simulate Unions Today

Abstract Records with Inheritance

The OneOf Library

Manual Enum + Data Pattern

The C# Proposal: The union Keyword

Value-Only Members

Generic Unions

Unions with Methods

Pattern Matching Integration

Exhaustive Switch Expressions

Nested Pattern Matching

Guard Clauses

Practical Examples

The Result Pattern: Replacing Exceptions for Expected Errors

Domain Modeling: Payment Types

State Machines

Serialization and Interop Considerations

How to Try It

Comparison with Existing Approaches

What This Means for the .NET Ecosystem

Conclusion

Een RAG-systeem bouwen in C# met Semantic Kernel

Introduction

How RAG works

Prerequisites

Setting up the kernel

Defining the data model

Chunking documents

Ingesting documents

Searching for relevant chunks

Generating answers with context

Using it

Moving to production

Tips from building RAG systems

Conclusion

Resources

Agent-workflows bouwen met Microsoft Agent Framework

Introduction

What are agent workflows?

Prerequisites

Building a sequential workflow

Defining the agents

Stap 3: Gebruik `RenderFragment` voor compositie

The C# Proposal: The `union` Keyword