Emiliano Montesdeoca

Blazor von Grund auf: Kapitel 3 — Komponenten, die skalieren

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

Willkommen zu Kapitel 3 von Blazor von Grund auf. Wenn du Kapitel 2 verpasst hast, lies es zuerst, damit dein Basisprojekt steht.

In Kapitel 2 haben wir die App zum Laufen gebracht. In diesem Kapitel machen wir sie wartbar.

Blazor-Projekte werden schnell unübersichtlich, wenn jede Seite eine riesige .razor-Datei ist. Komponenten verhindern das: mehr Konsistenz, mehr Wiederverwendung, klarere Grenzen zwischen UI-Teilen.

Was eine Blazor-Komponente wirklich ist

Eine Komponente ist eine .razor-Datei, die:

Markup rendert
Lokalen Zustand hält
Eingaben über Parameter annimmt
Events an Elternkomponenten meldet
Child Content rendert

Zur Laufzeit behandelt Blazor jede Komponente wie eine kleine Zustandsmaschine. Bei Zustandsänderungen wird neu gerendert und ein DOM-Diff angewendet.

Dein Ziel: klare Eingaben und vorhersagbares Verhalten.

Schritt 1: Mit einer fokussierten Komponente starten

Erstelle 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; }
}

Verwendung in Components/Pages/Home.razor:

@page "/"

<PageTitle>Blazor von Grund auf</PageTitle>

<SectionHeader
 Title="Blazor von Grund auf"
 Subtitle="Kapitel 3 dreht sich um Komponenten." />

Klein, aber wichtig: Eine Komponente sollte allein über ihre Parameter verständlich sein.

Schritt 2: Verhalten über Parameter explizit machen

Wir bauen eine wiederverwendbare Button-Komponente.

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

Nutzung:

@code {
 private int _savedCount;

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

<AppButton Text="Save" Variant="primary" OnClick="Save" />
<p>Gespeichert: @_savedCount Mal.</p>

Der Kern ist der Vertrag:

Wenige, klare Parameter
Explizite Namen statt magischem Verhalten
Sichere Standardwerte

Schritt 3: `RenderFragment` für Komposition nutzen

Mit RenderFragment kann eine Elternkomponente UI-Blöcke an ein Kind übergeben.

Erstelle 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; }
}

Nutzung:

<Card Title="Roadmap">
 <ul>
 <li>Komponenten</li>
 <li>Data Binding</li>
 <li>Routing</li>
 </ul>
</Card>

Damit baust du konsistente Seitenstrukturen ohne überall Wrapper-Markup zu kopieren.

Schritt 4: Komposition statt riesiger Seiten

Wenn eine Seite zu groß wird, nach Verantwortung aufteilen:

ProfileSummary für den Kopfbereich
ProfileStats für Kennzahlen
ProfileActivityList für letzte Aktivitäten

Die Seite wird so zur Orchestrierung, nicht zur Detail-Implementierung.

Schritt 5: Markup und Logik im Gleichgewicht halten

Für kleine Komponenten ist inline @code völlig okay.

Für größere Komponenten: Code-Behind nutzen:

UserCard.razor
UserCard.razor.cs

So bleiben Markup und C#-Logik jeweils besser lesbar.

Schritt 6: Eine pragmatische Ordnerstruktur

Eine Struktur, die gut skaliert:

Components/Pages/ -> routbare Seiten
Components/Layout/ -> App-Shell und Navigation
Components/Common/ -> geteilte generische Bausteine
Components/Features/<FeatureName>/ -> feature-spezifische Komponenten

Häufige Fehler am Anfang

Zu viele Parameter statt eines dedizierten Modells
Business-Logik direkt in Seitenkomponenten
Eine “God Component” mit hunderten Zeilen
Wiederholtes Markup statt kleiner wiederverwendbarer Komponenten

Ausblick

In Kapitel 4 geht es um Data Binding und Events: @bind, Event-Handling, Trade-offs von Two-Way-Binding und Muster für vorhersagbaren Zustand.

Blazor von Grund auf: Kapitel 2 — Deine erste Blazor-App

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

Willkommen zu Kapitel 2 von Blazor von Grund auf. Wenn du Kapitel 1 verpasst hast, lies es zuerst, damit das Rendering-Konzept noch frisch ist.

In diesem Kapitel erstellen wir eine neue Blazor-App, starten sie lokal und verstehen die wichtigsten Dateien im Projekt.

Schritt 1: Projekt erstellen

Im Terminal:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

Damit wird eine .NET 9 Blazor Web App mit Standardstruktur erstellt.

Wenn dein Tool nach einem Interaktivitätsmodell fragt, starte mit Interactive Server. Dieser Modus ist zum Lernen am einfachsten.

Schritt 2: Lokal starten

Starte die App:

dotnet watch

Öffne dann die URL aus dem Terminal (meist https://localhost:5xxx). Du solltest die Standard-App mit Home, Counter und Weather sehen.

Wenn das funktioniert, ist deine Umgebung bereit.

Schritt 3: Projektstruktur verstehen

Diese Dateien und Ordner sind am Anfang wichtig:

Program.cs — registriert Services und konfiguriert die HTTP-Pipeline.
Components/App.razor — Root-Komponente der App.
Components/Routes.razor — Routing für Seiten.
Components/Pages/ — routbare Seiten wie Home und Counter.
Components/Layout/ — gemeinsames Layout (MainLayout.razor, Navigation).
wwwroot/ — statische Assets (CSS, Bilder, Favicon).
appsettings.json — Konfigurationswerte.

Du musst noch nicht alles verstehen. Für jetzt reicht es, den Ort von UI und Startkonfiguration zu kennen.

Schritt 4: Erste Änderung

Öffne Components/Pages/Home.razor und ersetze den Inhalt durch:

@page "/"

<PageTitle>Blazor von Grund auf</PageTitle>

<h1>Blazor von Grund auf</h1>
<p>Kapitel 2 läuft lokal.</p>

Datei speichern und Browser aktualisieren. Mit dotnet watch wird sofort neu geladen.

Diese kleine Änderung bestätigt den gesamten Ablauf: ändern -> bauen -> rendern.

Schritt 5: Program.cs einmal lesen

Du musst es nicht auswendig lernen, aber diese Zeilen solltest du erkennen:

AddRazorComponents() aktiviert Razor-Komponenten.
AddInteractiveServerComponents() aktiviert interaktive Server-Komponenten.
MapRazorComponents<App>() mappt die Root-Komponente auf Endpunkte.

So verstehst du, wie die App startet und welche Rendering-Funktionen aktiv sind.

Häufige Probleme

Wenn etwas fehlschlägt, liegt es meist daran:

Altes SDK: dotnet --version ausführen und .NET 9 prüfen.
HTTPS-Zertifikat: dotnet dev-certs https --trust ausführen.
Port-Konflikt: alte dotnet-Prozesse stoppen und neu starten.

Als Nächstes

In Kapitel 3 gehen wir tief in Komponenten: Parameter, Komposition und wiederverwendbare UI-Strukturen.

Blazor von Grund auf: Kapitel 1 — Was ist Blazor?

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

Willkommen zu Kapitel 1 von Blazor von Grund auf. Falls du den Einführungspost verpasst hast, in dem ich erkläre, worum es in dieser Serie geht und an wen sie sich richtet, fang dort an — er ist kurz.

In diesem Kapitel werden wir die grundlegende Frage beantworten: Was ist Blazor? Das klingt einfach, aber die Antwort hat mehrere Schichten — besonders weil „Blazor“ im Laufe der Jahre leicht unterschiedliche Bedeutungen angenommen hat. Am Ende dieses Posts wirst du wissen, was Blazor ist, wie es ins .NET-Ökosystem passt, welche Rendering-Modelle es gibt und warum du es — oder eben nicht — einem JavaScript-Framework vorziehen könntest.

Ein kurzer historischer Überblick

Blazor begann um 2017 als experimentelles Projekt von Steve Sanderson bei Microsoft. Die Idee war provokant: C# im Browser mit WebAssembly ausführen und damit JavaScript vollständig überflüssig machen. Es war ein Proof of Concept, und der Name war eine bewusste Mischung aus Blazer und Razor — der Template-Engine, auf der Blazor letztendlich aufgebaut werden sollte.

Das Experiment erzeugte genug Begeisterung, dass Microsoft es ernst nahm. Blazor wurde als Teil von ASP.NET Core 3.0 im September 2019 ausgeliefert, zunächst als Blazor Server — ein Modell, das deinen C#-Code auf dem Server ausführt und eine SignalR-Echtzeitverbindung nutzt, um UI-Updates an den Browser zu senden. Blazor WebAssembly folgte im Mai 2020 als Teil von ASP.NET Core 3.1 und brachte echte clientseitige Ausführung in das Framework.

.NET 6 und 7 verfeinerten die Entwicklererfahrung. Dann überarbeitete .NET 8, veröffentlicht im November 2023, das Rendering-Modell grundlegend mit dem, was Microsoft Full-Stack-Web-UI nannte. Statisches serverseitiges Rendering, Streaming-Rendering, interaktiver Server, interaktives WebAssembly und ein neuer Auto-Modus lebten nun unter einem Dach in einem einzigen Projekt. .NET 9 baute auf diesem Fundament auf und glättete die rauen Kanten.

Da stehen wir heute.

Was Blazor wirklich ist

Im Kern ist Blazor ein komponentenbasiertes UI-Framework für .NET. Du baust deine Oberfläche aus Komponenten — selbständige Einheiten aus C# und HTML-Markup, die Zustand halten, auf Ereignisse reagieren und zu größeren Strukturen zusammengesetzt werden können. Wenn du mit React oder Vue gearbeitet hast, wird dieses mentale Modell vertraut wirken. Der wesentliche Unterschied ist, dass du statt JavaScript C# schreibst.

Komponenten in Blazor werden in .razor-Dateien geschrieben. Eine .razor-Datei mischt HTML-Markup mit C#-Code und verwendet die Razor-Syntax, die du vielleicht schon aus ASP.NET MVC-Views kennst. So sieht eine einfache Komponente aus:

@page "/counter"

<h1>Zähler</h1>
<p>Aktueller Stand: @currentCount</p>
<button @onclick="IncrementCount">Klick mich</button>

@code {
 private int currentCount = 0;

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

Kein JavaScript in Sicht. Die @onclick-Direktive verknüpft den Button-Klick mit einer C#-Methode. Der @currentCount-Ausdruck rendert den aktuellen Wert. Wenn sich der Zustand ändert, ermittelt Blazor, was im DOM aktualisiert werden muss.

Das ist der Kern. Alles andere — Routing, Dependency Injection, Formulare, HTTP-Aufrufe — baut auf diesem Komponentenmodell auf.

Die Rendering-Modelle

Hier liegt viel Verwirrung begraben, also seien wir präzise. „Blazor“ bezeichnet heute eine Familie von Rendering-Modi, kein einzelnes Deployment-Modell. Den Unterschied zu verstehen ist wichtig, weil er sich auf Performance, Infrastrukturanforderungen und das auswirkt, was deine Komponenten können und nicht können.

Statisches SSR

Der einfachste Modus. Deine Razor-Komponenten rendern auf dem Server zu HTML und dieses HTML wird an den Browser gesendet. Es gibt keine persistente Verbindung, kein WebAssembly und standardmäßig keine clientseitige Interaktivität. Das ist im Wesentlichen das, was Razor Pages macht, aber mit dem Komponentenmodell.

Verwende dies für inhaltsreiche Seiten, Landing Pages, alles, was keine Live-Interaktivität braucht.

Interaktiver Server

Dein Komponentencode läuft auf dem Server. Eine SignalR-WebSocket-Verbindung wird zwischen Browser und Server hergestellt. Wenn du auf einen Button klickst oder in ein Eingabefeld tippst, reist das Ereignis über den WebSocket zum Server, dein C# wird ausgeführt, der Diff berechnet und die DOM-Updates zurück an den Browser gesendet.

Vorteile: Vollständiger Zugriff auf Server-Ressourcen (Datenbanken, Dateisystem, Secrets). Schnelles erstes Laden. Kleine Download-Größe. Funktioniert in Browsern ohne WebAssembly-Unterstützung.

Nachteile: Jede Benutzerinteraktion erfordert einen Server-Roundtrip, was Latenz hinzufügt. Server-Ressourcen skalieren mit der Anzahl aktiver Verbindungen. Die App degradiert, wenn die Verbindung abbricht.

Verwende dies für Geschäftsanwendungen, interne Tools, Apps, bei denen serverseitiger Datenzugriff wichtiger ist als Offline-Fähigkeit.

Interaktives WebAssembly

Die .NET-Runtime wird in den Browser heruntergeladen und deine App läuft vollständig auf dem Client. Nach dem ersten Download funktioniert die App komplett offline und jede Interaktion ist sofort — keine Server-Roundtrips für UI-Logik.

Vorteile: Echte clientseitige Ausführung. Funktioniert offline. Reduzierte Serverlast, sobald die App geladen ist.

Nachteile: Größerer initialer Download (.NET-Runtime + deine App). Langsameres erstes Laden. Du brauchst eine API, um auf serverseitige Daten zuzugreifen.

Verwende dies für offline-fähige Apps, Tools, die sofortige Reaktionsfähigkeit brauchen, Szenarien, bei denen Server-Verarbeitung für die UI nicht benötigt wird.

Auto-Modus

In .NET 8 eingeführt. Die App startet im interaktiven Server-Modus (schnelles erstes Laden, kein Warten auf den WebAssembly-Download). Sobald die WebAssembly-Dateien im Hintergrund heruntergeladen wurden, wechseln nachfolgende Besuche automatisch in den WebAssembly-Modus.

Das gibt dir das schnelle erste Laden des Server-Modus und letztendlich die vollständige clientseitige Ausführung von WebAssembly. Es ist das komplexeste Modell, ist aber ein praktischer Standard für viele Apps.

Modi in derselben App mischen

In .NET 8 und höher bist du nicht auf einen einzigen Rendering-Modus für die gesamte App beschränkt. Eine Landing Page kann statisches SSR sein; das authentifizierte Dashboard kann interaktiver Server sein; ein Datenvisualisierungs-Widget kann interaktives WebAssembly sein. Das Framework verwaltet die Übergänge.

In dieser Serie beginnen wir mit dem interaktiven Server, weil er am einfachsten zum Laufen zu bringen ist und das direkteste mentale Modell hat. Wir erkunden die anderen Modi unterwegs.

Wie Blazor sich mit JavaScript-Frameworks vergleicht

Wenn du mit React, Angular oder Vue entwickelt hast, ist das wahrscheinlich der Vergleich, der dich interessiert.

Die Ähnlichkeiten sind real. Blazors Komponentenmodell ist dem von React bewusst ähnlich. Du hast Props (Parameter in Blazor), lokalen Zustand (Felder im @code-Block), Lifecycle-Hooks und dasselbe Kommunikationsmuster: Daten nach unten, Ereignisse nach oben. Wenn du React kennst, wirst du dich innerhalb weniger Stunden zurechtfinden.

Der wesentliche Unterschied ist die Sprache. In Blazor schreibst du C#. Deine Geschäftslogik, Validierungsregeln und Datenmodelle können alle zwischen deinem Blazor-Frontend und deinem ASP.NET Core-Backend geteilt werden. Kein doppeltes Pflegen einer User-Klasse in TypeScript, wenn du sie schon in C# hast.

Die Ökosystem-Lücke ist real, schließt sich aber. Das npm-Ökosystem ist riesig. Das NuGet-Ökosystem für UI-Komponenten ist kleiner, obwohl es erheblich gewachsen ist. Für eine spezifische Charting-Bibliothek oder ein Drag-and-Drop-Widget hat JavaScript noch mehr Optionen. Aber für die meisten Geschäftsanwendungen ist das, was im .NET-Bereich verfügbar ist, mehr als ausreichend.

JavaScript-Interoperabilität ist vorhanden, wenn du sie brauchst. Blazor lässt dich JavaScript von C# aus und C# von JavaScript aus aufrufen. Für Browser-APIs ohne .NET-Wrapper oder wenn du eine vorhandene JS-Bibliothek nutzen willst, ist Interop verfügbar. Es fügt eine Schicht hinzu, ist aber nicht schmerzhaft.

Die ehrliche Antwort: Wenn dein Team ausschließlich aus JavaScript-Entwicklern besteht, die ein öffentliches Produkt bauen, bei dem SEO, Performance und das npm-Ökosystem entscheidend sind, bleib bei JavaScript. Wenn dein Team aus .NET-Entwicklern besteht, wenn du interne oder Geschäftsanwendungen baust, oder wenn Code-Sharing zwischen Frontend und Backend dir wichtig ist, ist Blazor eine überzeugende Wahl.

Was du brauchst, um mitzumachen

Für den Rest dieser Serie benötigst du:

.NET 9 SDK — herunterladen von dot.net
Eine IDE — Visual Studio 2022 (Community-Edition ist kostenlos), VS Code mit der C# Dev Kit-Erweiterung oder JetBrains Rider
Grundkenntnisse in C# — Klassen, Properties, Interfaces, async/await

Das ist alles. Kein Node, kein npm, kein webpack.

Was als nächstes kommt

In Kapitel 2 werden wir deine erste Blazor-App erstellen, die Projektstruktur durchgehen und sicherstellen, dass du sie lokal ausführen kannst. Am Ende wirst du eine funktionierende App vor dir haben und ein klares Bild davon, was jede Datei macht.

Bis dahin.

Blazor von Grund auf: Eine neue Serie

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

Ich schreibe schon eine Weile über Blazor — Komponenten-Lebenszyklen, isoliertes CSS, Interaktivitätsmodelle, Authentifizierung. Diese Beiträge waren für sich genommen nützlich, aber mir hat immer das Fundament gefehlt. Sie setzen voraus, dass du bereits weißt, was Blazor ist, warum es existiert und wie es in das breitere .NET-Ökosystem passt. Das weiß nicht jeder, und das ist vollkommen in Ordnung.

Deshalb starte ich etwas Neues: Blazor von Grund auf. Eine richtige Serie, von Anfang an aufgebaut, für Entwickler gedacht, die wirklich verstehen wollen, was sie bauen — nicht nur so lange kopieren und einfügen, bis es irgendwie funktioniert.

Für wen ist diese Serie

Diese Serie ist für dich, wenn du:

ein .NET-Entwickler bist, der von Blazor gehört hat, aber nie den richtigen Moment oder Einstiegspunkt gefunden hat, um tiefer einzutauchen.
Blazor ausprobiert hast, es zum Laufen gebracht hast, aber das Gefühl hast, dass du ratst, warum Dinge funktionieren.
aus dem JavaScript/React/Angular-Umfeld kommst und verstehen willst, wie Microsofts Antwort auf das moderne Frontend aussieht.
eine einzige, kohärente Ressource statt verstreuter Docs und Blogbeiträge möchtest.

Du musst kein Senior-Entwickler sein. Du solltest allerdings mit den C#-Grundlagen vertraut sein — Klassen, Interfaces, async/await. Wenn du eine einfache CRUD-API in ASP.NET Core schreiben kannst, bist du bereit.

Was wir abdecken werden

Hier ist eine grobe Roadmap des Geplanten. Einige Themen werden bei Bedarf auf mehrere Beiträge aufgeteilt:

Was ist Blazor? — Hosting-Modelle, Geschichte, Vergleich mit klassischer Webentwicklung
Deine erste Blazor-App — Scaffolding, Projektstruktur, lokales Ausführen
Komponenten — Der Baustein jeder Blazor-Benutzeroberfläche
Datenbindung und Ereignisse — Deine Benutzeroberfläche reaktiv machen
Komponentenkommunikation — Parameter, EventCallbacks, kaskadierende Werte
Routing und Navigation — Wie Blazor URLs und Seitenübergänge behandelt
Dependency Injection — Services, Scopes und der DI-Container in Blazor
Formulare und Validierung — EditForm, DataAnnotations, benutzerdefinierte Validatoren
HTTP und externe Daten — APIs aus deiner Blazor-App aufrufen
Authentifizierung und Autorisierung — Deine App richtig absichern
JavaScript-Interop — Wenn du den Browser direkt ansprechen musst
Performance und Optimierung — Virtualisierung, Lazy Loading, Render-Strategien
Blazor-Komponenten testen — bUnit und wie ein solider Test aussieht
Deployment — Veröffentlichen auf Azure, IIS und statischen Hosts

Diese Liste wird sich weiterentwickeln. Manche Themen werden auf mehrere Beiträge aufgeteilt; andere könnten zusammengeführt werden. Ich werde diesen Beitrag aktualisieren und Links zu den einzelnen Einträgen hinzufügen, sobald sie veröffentlicht werden.

Warum eine Serie, warum jetzt

Blazor hat sich stark weiterentwickelt. Mit .NET 8 und 9 wurde das Rendering-Modell grundlegend überarbeitet — statisches SSR, Streaming Rendering, interaktives Server, interaktives WebAssembly und der Auto-Modus existieren nun alle unter einem Dach. Es ist ein wirklich interessantes und leistungsfähiges Framework, aber die gestiegene Komplexität macht den Einstieg oft verwirrend.

Ich möchte eine Ressource aufbauen, die dich dort abholt, wo du bist, und dich systematisch durch das gesamte Thema führt. Kein Ersatz für die offizielle Dokumentation — die ist gut und du solltest sie lesen — sondern ein Begleiter, der das Warum hinter dem Was erklärt.

Wie du der Serie folgen kannst

Jeder Beitrag der Serie ist eigenständig genug, um für sich gelesen zu werden, aber sie bauen auch aufeinander auf. Wenn du von vorne anfängst, empfehle ich, die Reihenfolge einzuhalten. Wenn du einsteigst, um eine bestimmte Lücke zu füllen, ist das auch in Ordnung — ich verlinke auf vorausgesetzte Beiträge, wo es wichtig ist.

Der Code zu jedem Beitrag wird auf GitHub verfügbar sein. Ich teile die Links im Laufe der Zeit.

Bis zum nächsten Beitrag.

C#-Union-Typen: Endlich gibt es diskriminierte Unions

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

Wenn Sie schon länger C# schreiben, besteht eine gute Chance, dass Sie bei dem Versuch, etwas zu modellieren, das „eines von mehreren Dingen“ sein kann, an eine Wand stoßen. Möglicherweise benötigen Sie eine Methode, um entweder einen Erfolgswert oder einen Fehler zurückzugeben. Vielleicht haben Sie ein Zahlungssystem aufgebaut, das Kreditkarten, Banküberweisungen und digitale Geldbörsen abwickelt – jede mit völlig unterschiedlichen Daten. Oder vielleicht haben Sie sich einfach F# oder Rust angesehen und gedacht: „Warum kann ich das nicht in C# haben?“

Das Warten hat fast ein Ende. Diskriminierte Gewerkschaften kommen zu C#.

Dies ist seit Jahren eine der am häufigsten nachgefragten Sprachfunktionen, wobei die Community-Diskussionen bis ins Jahr 2017 und früher zurückreichen. Das C#-Sprachdesignteam hat an einem Vorschlag gearbeitet, der ein Schlüsselwort union zum Definieren geschlossener Typhierarchien mit umfassendem Mustervergleich einführt. In diesem Beitrag möchte ich Ihnen erklären, was diskriminierte Gewerkschaften sind, warum sie so wichtig sind, wie wir sie bisher gefälscht haben und wie die vorgeschlagene Syntax tatsächlich aussieht – mit echten Codebeispielen für jede.

Eine kurze Anmerkung, bevor wir uns darauf einlassen: Zum jetzigen Zeitpunkt befindet sich die Funktion „Union-Typen“ noch in der Vorschlags- und Vorschauphase. Die hier beschriebene Syntax und das Verhalten basieren auf den neuesten öffentlich verfügbaren Designdokumenten und Diskussionen des C#-Sprachdesignteams. Vor der endgültigen Veröffentlichung können sich die Dinge ändern. Ich werde klarstellen, was bestätigt ist und was noch diskutiert wird.

Was sind diskriminierte Gewerkschaften?

Im Kern ist eine diskriminierte Union (manchmal auch „Tagged Union“ oder „Summentyp“ genannt) ein Typ, der einen aus einer festen Menge möglicher Werte enthalten kann, wobei jede Variante unterschiedliche Daten enthalten kann. Der „diskriminierte“ Teil bedeutet, dass die Laufzeit immer weiß, um welche Variante es sich handelt – es gibt ein Tag, das sie identifiziert.

Stellen Sie es sich wie ein enum vor, bei dem jedoch jedes Mitglied seine eigene Nutzlast an Daten übertragen kann.

Wenn Sie andere Sprachen verwendet haben, haben Sie dieses Konzept wahrscheinlich schon einmal gesehen:

F# hat seit dem ersten Tag diskriminierte Gewerkschaften:

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

Rust verwendet enum für die gleiche Idee:

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

TypeScript erreicht mit getaggten Unions etwas Ähnliches:

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

In all diesen Fällen kennt der Compiler jede mögliche Variante und kann erzwingen, dass Sie alle davon behandeln. Das ist die Superkraft: Vollständigkeitsprüfung. Wenn Sie eine neue Variante hinzufügen, teilt Ihnen der Compiler mit, wo Sie vergessen haben, damit umzugehen.

C# hatte noch nie eine erstklassige Möglichkeit, dies auszudrücken. Bisher.

Wie wir heute Gewerkschaften simulieren

Im Laufe der Jahre hat die C#-Community mehrere Problemumgehungen entwickelt, von denen jede ihre eigenen Kompromisse mit sich bringt. Lassen Sie mich die gängigsten Ansätze durchgehen.

Abstrakte Datensätze mit Vererbung

Die idiomatischste Problemumgehung im modernen C# ist die Verwendung abstrakter Datensätze mit versiegelten abgeleiteten Typen:

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
}

Das funktioniert einigermaßen gut. Sie erhalten Unveränderlichkeit, Wertegleichheit und können Mustervergleich verwenden:

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")
};
```Es gibt jedoch erhebliche Nachteile. Der Compiler weiß nicht, dass die Hierarchie geschlossen ist, daher benötigen Sie immer diesen `_`-Verwerfungsarm, sonst erhalten Sie eine Warnung. Wenn Sie eine neue Variante hinzufügen, teilt Ihnen der Compiler nicht alle Stellen mit, an denen Sie vergessen haben, damit umzugehen – der Verwerfer verschluckt sie stillschweigend. Das verfehlt völlig den Zweck.

### Die OneOf-Bibliothek

Ein weiterer beliebter Ansatz ist das NuGet-Paket [OneOf](https://github.com/mcintyre321/OneOf):

```csharp
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 bietet über seine generischen Typparameter eine Vollständigkeitsprüfung zur Kompilierungszeit, was großartig ist. Es basiert jedoch auf dem Positionsvergleich (erster Typ, zweiter Typ usw.), die generischen Signaturen werden schnell unhandlich und es lässt sich nicht in den Mustervergleich der Sprache integrieren. Es ist ein cleverer Hack, aber es ist immer noch ein Hack.

Manuelle Enum + Datenmuster

Einige Entwickler gehen den klassischen Weg mit einem Enum-Tag und einem Datencontainer:

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

Das ist fragil. Nichts hindert Sie daran, Type auf CreditCard zu setzen, aber die Eigenschaft BankTransfer zu füllen. Der Compiler kann Ihnen nicht weiterhelfen und am Ende kommt es überall zu Laufzeitfehlern und Nullprüfungen. Es handelt sich um den „stringly typisierten“ Ansatz zur Typmodellierung, der nicht skaliert werden kann.

Alle diese Ansätze haben ein grundlegendes Problem gemeinsam: Sie kämpfen gegen die Sprache, anstatt mit ihr zu arbeiten. Der Compiler kann nicht über die geschlossene Menge von Möglichkeiten nachdenken, sodass Sie die wertvollste Eigenschaft diskriminierter Gewerkschaften verlieren – umfassende Überprüfung.

Der C#-Vorschlag: Das Schlüsselwort `union`.

Der Vorschlag des C#-Sprachteams führt ein spezielles Schlüsselwort union ein, das eine geschlossene Menge benannter Mitglieder definiert, von denen jedes optional Daten trägt. Hier ist die grundlegende Syntax, wie sie vorgeschlagen wurde:

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

Das ist es. Klar, prägnant und sofort lesbar. Jedes Mitglied innerhalb der Union definiert eine eigene Variante mit seinen eigenen Daten. Der Compiler weiß, dass Shape immer nur eines dieser drei Dinge sein kann.

Unter der Haube generiert der Compiler eine versiegelte Typhierarchie – ähnlich dem, was Sie mit abstrakten Datensätzen von Hand schreiben würden, wobei sich der Compiler jedoch der geschlossenen Natur des Typs voll bewusst ist. Dies bedeutet, dass der Compiler die Vollständigkeit des Mustervergleichs erzwingen kann, was den Hauptvorteil darstellt.

Nur-Wert-Mitglieder

Gewerkschaftsmitglieder müssen keine Daten mit sich führen. Sie können datentragende Mitglieder mit einfachen Wertmitgliedern kombinieren:

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

Dies ist der klassische Option/Maybe-Typ, nach dem funktionale Programmierer in C# seit Jahren gefragt haben. None trägt keine Daten – es ist nur ein Tag.

Generische Gewerkschaften

Wie Sie dem obigen Beispiel Option<T> entnehmen können, unterstützen Gewerkschaften Generika. Hier ist ein komplizierteres Beispiel:

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

Dies eröffnet einen vollständigen Stil der Fehlerbehandlung, der nicht auf Ausnahmen für erwartete Fehlerfälle beruht – etwas, das in Rust und funktionalen Sprachen seit Jahren gängige Praxis ist.

Gewerkschaften mit Methoden

Der Vorschlag ermöglicht Unions außerdem, wie jeder andere Typ über Methoden, berechnete Eigenschaften und Implementierungsschnittstellen zu verfügen:```csharp 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)
};

}


Beachten Sie, dass der Ausdruck `switch` in `Area` und `Perimeter` keinen Standardarm benötigt. Der Compiler weiß, dass die Union erschöpfend ist – es gibt nur drei Varianten und alle drei werden behandelt. Wenn Sie später eine vierte Variante hinzufügen, markiert der Compiler alle `switch`, die diese nicht verarbeiten.

## Mustervergleichsintegration

Der Mustervergleich hat sich in C# seit Version 7.0 weiterentwickelt, und Union-Typen sind als erstklassige Bürger dieses Systems konzipiert.

### Ausführliche Switch-Ausdrücke

Die wirkungsvollste Funktion ist die umfassende Schalterprüfung. Bei Gewerkschaften **kennt** der Compiler alle möglichen Fälle:

```csharp
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}"
};

Kein Abwurfarm. Nein _ => throw new NotImplementedException(). Wenn Sie einen Fall vergessen, gibt der Compiler einen Fehler und keine Warnung aus. Dies ist eine grundlegende Verbesserung der Sicherheit.

Verschachtelter Mustervergleich

Gewerkschaften bilden auf natürliche Weise mit verschachtelten Mustern:

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

Diese Art von rekursiver Datenstruktur ist in Compilern, Interpretern, Regel-Engines und in der mathematischen Modellierung äußerst verbreitet. Heute bräuchte man in C# eine tiefe Klassenhierarchie und das Besuchermuster. Mit Gewerkschaften ist der Code wesentlich einfacher.

Schutzklauseln

Der Musterabgleich mit Gewerkschaften unterstützt when Guards, genau wie Sie es erwarten würden:

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

Praxisbeispiele

Lassen Sie mich einige reale Szenarien durchgehen, in denen Union-Typen den Code erheblich verbessern.

Das Ergebnismuster: Ausnahmen für erwartete Fehler ersetzen

Eines der häufigsten Muster in der modernen Anwendungsentwicklung ist die Darstellung von Vorgängen, die erfolgreich sein oder fehlschlagen können, ohne Ausnahmen für den Kontrollfluss zu verwenden. Ausnahmen sollten außergewöhnlich sein – Dinge wie Netzwerkausfälle oder nicht genügend Arbeitsspeicher. Ein Validierungsfehler oder ein „Nicht gefunden“-Ergebnis ist ein erwartetes Ergebnis und keine Ausnahme.

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

Der Anrufer ist dann gezwungen, jedes mögliche Ergebnis zu verarbeiten:

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

Keine Try-Catch-Blöcke, keine vergessenen Ausnahmetypen, keine Laufzeitüberraschungen. Jeder Fehlermodus ist in der Typsignatur sichtbar und wird vom Compiler erzwungen. Dies ist eine enorme Verbesserung für die API-Zuverlässigkeit.

Domain-Modellierung: Zahlungsarten

Hier ist ein reales Beispiel für eine Domänenmodellierung – die Handhabung verschiedener Zahlungsmethoden in einem 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"
};

Vergleichen Sie dies mit dem aktuellen Ansatz, bei dem Sie eine Schnittstelle oder abstrakte Klasse mit fünf verschiedenen Implementierungen haben, die auf fünf Dateien verteilt sind, möglicherweise mit einem Besuchermuster darüber. Durch den Union-Ansatz bleiben die Datendefinition und die Operationen zusammen, lesbar und umfassend überprüft.

Zustandsmaschinen

Zustandsmaschinen gibt es überall in der Software – Auftragsverarbeitung, Workflow-Engines, Verbindungsmanagement, UI-Status. Gewerkschaften machen sie explizit und sicher:

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

Jeder Staat führt genau die Daten, die für diesen Staat relevant sind. Sie können nicht versehentlich auf ein TcpClient zugreifen, wenn Sie sich im Status Connecting befinden, da es in dieser Variante nicht vorhanden ist. Das Typsystem erzwingt die Invarianten der Zustandsmaschine.

Überlegungen zur Serialisierung und InteropEine der praktischen Fragen, die sich bei Union-Typen sofort stellt, ist: Wie serialisiert man sie? Wenn Sie APIs erstellen oder Daten speichern, benötigen Sie die JSON-Serialisierung, um ordnungsgemäß zu funktionieren.

Das Designteam hat die integrierte System.Text.Json-Unterstützung für Union-Typen diskutiert. Der erwartete Ansatz beinhaltet die Serialisierung mit einer Diskriminatoreigenschaft:

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

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

Dies steht im Einklang mit der vorhandenen Unterstützung für polymorphe Serialisierung, die in .NET 7 mit JsonDerivedType-Attributen eingeführt wurde. Es wird erwartet, dass Gewerkschaften standardmäßig mit System.Text.Json funktionieren und standardmäßig den Variantennamen als Typdiskriminator verwenden.

Für Entity Framework Core besteht der wahrscheinliche Ansatz darin, Unionswerte mithilfe einer Diskriminatorspalte zu speichern – ähnlich wie die Vererbungszuordnung „Table-per-Hierarchy“ (TPH) bereits funktioniert. Die genaue EF Core-Integration befindet sich noch in der Entwicklung, die Infrastruktur für den Umgang mit Hierarchien geschlossener Typen ist jedoch bereits vorhanden.

Es ist erwähnenswert, dass die Interoperabilität mit anderen .NET-Sprachen reibungslos erfolgen sollte, da Unions unter der Haube auf Standard-IL-Klassenhierarchien kompiliert werden. F#-Code, der eine C#-Union nutzt, würde diese als Standardtyphierarchie betrachten und umgekehrt.

So probieren Sie es aus

Zum Zeitpunkt des Verfassens dieses Artikels sind Union-Typen als Vorschaufunktion in den neuesten .NET SDK-Vorschauen verfügbar. Um mit der vorgeschlagenen Syntax zu experimentieren, müssen Sie Folgendes tun:

Installieren Sie das neueste .NET-Vorschau-SDK
Aktivieren Sie die Vorschau-Sprachversion in Ihrer Projektdatei:

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

Beachten Sie, dass sich die Vorschaufunktionen ändern können. Die Syntax, das Verhalten und die Compilerdiagnose können sich vor der endgültigen Veröffentlichung erheblich weiterentwickeln. Veröffentlichen Sie keinen Produktionscode, der sich auf Vorschau-Sprachfunktionen verlässt – sondern experimentieren Sie unbedingt damit und geben Sie Feedback. Das C#-Team überwacht aktiv die Diskussionen zum csharplang-Repository.

Wenn Sie den Fortschritt des Vorschlags verfolgen möchten, sollten Sie Folgendes im Auge behalten:

– Das dotnet/csharplang-Repository für Diskussionen zum Sprachdesign – Das dotnet/roslyn-Repository für den Fortschritt der Compiler-Implementierung – Der .NET-Blog für offizielle Ankündigungen

Vergleich mit bestehenden Ansätzen

Lassen Sie mich einen kurzen Vergleich zusammenstellen, damit Sie sehen können, wie sich die verschiedenen Ansätze schlagen:

Funktion	Abstrakte Aufzeichnungen	OneOf<T1,T2>	Aufzählung + Daten	Union-Typen
Vollständigkeitsprüfung	❌ Nein	✅ Ja	❌ Nein	✅ Ja
Mustervergleich	✅ Ja	❌ Begrenzt	❌ Handbuch	✅ Einheimisch
Vom Compiler erzwungener Abschluss	❌ Nein	✅ Ja	❌ Nein	✅ Ja
Daten pro Variante	✅ Ja	✅ Ja	⚠️ Zerbrechlich	✅ Ja
Lesbarkeit	⚠️ Ausführlich	⚠️ Position	❌ Schlecht	✅ Ausgezeichnet
Serialisierung	✅ Handbuch	⚠️ Komplex	✅ Handbuch	✅ Eingebaut
Boilerplate	⚠️ Mäßig	✅ Niedrig	⚠️ Hoch	✅ Minimal
Keine externe Abhängigkeit	✅ Ja	❌ NuGet	✅ Ja	✅ Ja

Was dies für das .NET-Ökosystem bedeutet

Die Einführung diskriminierter Gewerkschaften wird Auswirkungen auf das gesamte .NET-Ökosystem haben. Folgendes erwarte ich:

Das Bibliotheksdesign wird verbessert. APIs, die derzeit null zurückgeben, um „nicht gefunden“ anzuzeigen oder Ausnahmen für Validierungsfehler auszulösen, können stattdessen Result<T, E>-Typen zurückgeben. Dadurch werden Fehlermodi in der Typsignatur explizit angegeben. Sie können sehen, was schief gehen kann, indem Sie sich die Methodensignatur ansehen, nicht indem Sie die Dokumentation oder den Quellcode lesen.

Die Domänenmodellierung wird aussagekräftiger. Die Lücke zwischen der Problemdomäne und der Codedarstellung verringert sich dramatisch. Wenn Ihr Domain-Experte sagt: „Eine Zahlung kann eine Kreditkarte, eine Banküberweisung oder eine Nachnahme sein“, können Sie dies direkt als Union modellieren, anstatt es in eine Vererbungshierarchie zu übersetzen.

F#-Ideen werden für C#-Entwickler zugänglich. Viele C#-Entwickler haben das Typsystem von F# aus der Ferne bewundert, konnten F# jedoch nicht in ihren Organisationen einführen. Union-Typen bringen eine der leistungsstärksten Funktionen von F# in C#, was ein Gewinn für das gesamte .NET-Ökosystem ist.

Weniger Laufzeitfehler. Allein die Vollständigkeitsprüfung verhindert ganze Kategorien von Fehlern. Jedes Mal, wenn Sie einer Union eine neue Variante hinzufügen, führt Sie der Compiler zu jeder Stelle in der Codebasis, die aktualisiert werden muss. Keine vergessenen switch-Fälle mehr, keine NotImplementedException in Standardzweigen mehr, die nur in der Produktion auftauchen.

Fazit

Diskriminierte Gewerkschaften stehen seit fast einem Jahrzehnt ganz oben auf der Wunschliste der C#-Community, und das aus gutem Grund. Sie schließen eine grundlegende Lücke im Typsystem – die Fähigkeit, Daten, die „eines von mehreren Dingen“ sein können, mit vom Compiler erzwungener Sicherheit zu modellieren.

Das vorgeschlagene Schlüsselwort union bietet eine saubere, prägnante Syntax, die sich tief in den Mustervergleich von C# integriert, mit Generika arbeitet, Methoden und Schnittstellen unterstützt und eine umfassende Überprüfung ermöglicht, die Fehler zur Kompilierungszeit und nicht zur Laufzeit erkennt.

Ganz gleich, ob Sie Domänenmodelle erstellen, APIs mit expliziten Fehlertypen entwerfen, Zustandsautomaten implementieren oder einfach nur versuchen, umständliche Vererbungshierarchien durch etwas Natürlicheres zu ersetzen – Union-Typen werden die Art und Weise, wie Sie C# schreiben, verändern.

Darauf haben wir schon lange gewartet. Die Syntax ist elegant, die Integration mit vorhandenen Sprachfunktionen ist durchdacht und die praktischen Auswirkungen werden im gesamten .NET-Ökosystem spürbar sein.

Behalten Sie die Vorschauversionen im Auge, experimentieren Sie mit der Funktion und geben Sie dem Sprachdesign-Team Feedback. Dies ist eine dieser Funktionen, bei denen Sie sich fragen werden, wie Sie jemals ohne sie gelebt haben, sobald Sie sie einmal verwendet haben.

Aufbau eines RAG-Systems in C# mit Semantic Kernel

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

Einführung

Wenn Sie versucht haben, ein LLM zu verwenden, um Fragen zu Ihren eigenen Daten zu beantworten – Unternehmensdokumente, Produktspezifikationen, interne Wissensdatenbanken –, ist Ihnen wahrscheinlich aufgefallen, dass es entweder halluziniert oder einfach sagt: „Ich habe keine Informationen darüber.“ Das liegt daran, dass das Modell nur weiß, worauf es trainiert wurde.

RAG (Retrieval-Augmented Generation) behebt dieses Problem. Anstatt ein Modell für Ihre Daten zu verfeinern, rufen Sie relevante Teile Ihrer Dokumente zum Zeitpunkt der Abfrage ab und übergeben sie als Kontext an das LLM. Das Modell generiert dann Antworten, die auf Ihren tatsächlichen Daten basieren.

In diesem Beitrag werde ich Sie durch den Aufbau einer vollständigen RAG-Pipeline in C# mit Semantic Kernel führen.

So funktioniert RAG

Der Ablauf ist unkompliziert:

Ingest: Teilen Sie Ihre Dokumente in Blöcke auf, generieren Sie Einbettungen für jeden Block und speichern Sie sie in einer Vektordatenbank
Abfrage: Wenn ein Benutzer eine Frage stellt, generieren Sie eine Einbettung für die Abfrage und durchsuchen Sie die Vektordatenbank nach ähnlichen Blöcken
Generieren: Übergeben Sie die abgerufenen Blöcke zusammen mit der Frage des Benutzers als Kontext an das LLM

Das ist es. Der Zauber liegt in den Einbettungen – sie erfassen die semantische Bedeutung von Text als Vektoren, sodass Sie relevante Inhalte finden können, auch wenn die genauen Wörter nicht übereinstimmen.

Voraussetzungen

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

Für die Produktion würden Sie den In-Memory-Speicher gegen Azure AI Search, Qdrant, Pinecone oder eine andere unterstützte Vektordatenbank austauschen. Aber In-Memory eignet sich perfekt zum Lernen und Prototyping.

Einrichten des Kernels

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();

Wir benötigen zwei Modelle: eines für die Chat-Vervollständigung (Beantwortung von Fragen) und eines für die Generierung von Einbettungen (Text in Vektoren umwandeln).

Definieren des Datenmodells

Wir benötigen eine Klasse, um unsere Dokumentblöcke im Vektorspeicher darzustellen:

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

Das VectorStoreRecordVector(1536)-Attribut teilt dem Vektorspeicher die Dimension unserer Einbettungen mit. Das text-embedding-3-small-Modell erzeugt 1536-dimensionale Vektoren.

Dokumente aufteilen

Bevor wir Einbettungen erstellen können, müssen wir unsere Dokumente in überschaubare Teile aufteilen. Hier ist ein einfacher Textsplitter:

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

Die Überlappung ist wichtig – sie stellt sicher, dass der Kontext an der Grenze zwischen den Blöcken nicht verloren geht. Wenn ein relevanter Satz auf zwei Abschnitte aufgeteilt wird, bedeutet die Überlappung, dass er in mindestens einem von ihnen vollständig vorkommt.

Dokumente werden aufgenommen

Lassen Sie uns nun alles zusammenfügen, um Dokumente in unseren Vektorspeicher aufzunehmen:

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

Suche nach relevanten Chunks

Wenn ein Benutzer eine Frage stellt, generieren wir eine Einbettung für seine Anfrage und suchen nach ähnlichen Blöcken:

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

Antworten mit Kontext generieren

Jetzt der RAG-Teil – wir nehmen die abgerufenen Blöcke und fügen sie als Kontext in unsere Eingabeaufforderung ein:

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

Benutze es

// 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

Übergang zur Produktion

Der In-Memory-Vektorspeicher eignet sich hervorragend für die Prototypenerstellung, für die Produktion benötigen Sie jedoch eine persistente Vektordatenbank. Semantic Kernel verfügt über Konnektoren für mehrere Optionen:

# 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

Der Austausch ist unkompliziert, da alle die gleiche IVectorStore-Schnittstelle implementieren:

// 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"])));
```Alles andere bleibt gleich. Das ist das Schöne an der Abstraktion.

## Tipps zum Aufbau von RAG-Systemen

Ein paar Dinge, die ich auf die harte Tour gelernt habe:

- **Die Blockgröße ist sehr wichtig.** Zu klein und Sie verlieren den Kontext. Zu groß und Sie verschwenden Token für irrelevante Inhalte. Beginnen Sie mit 500–800 Token und passen Sie diese basierend auf Ihren Daten an.
- **Überlappung verhindert Grenzprobleme.** Eine Überlappung von 50–100 Token zwischen Blöcken reicht normalerweise aus.
- **Mehr abrufen, als Sie denken.** Beginnen Sie mit `topK = 5` und reduzieren Sie die Lautstärke, wenn Sie zu viel Lärm bekommen. Es ist besser, zusätzlichen Kontext zu haben, als den relevanten Teil zu verpassen.
- **Systemaufforderungen sind von entscheidender Bedeutung.** Seien Sie sehr deutlich und verwenden Sie nur den bereitgestellten Kontext. Ohne diese Anweisung wird das Modell „basierend auf seinen Trainingsdaten“ glücklich halluzinieren.
- **Quellen verfolgen.** Speichern Sie immer Metadaten mit Ihren Chunks, damit Sie angeben können, woher die Antwort stammt. Benutzer vertrauen Antworten mehr, wenn sie die Quelle überprüfen können.
- **Bei Bedarf neu einordnen.** Die Vektorähnlichkeit ist nicht perfekt. Fügen Sie bei kritischen Anwendungen einen Re-Ranking-Schritt mithilfe eines Cross-Encoder-Modells hinzu, um die Präzision zu verbessern.

## Fazit

RAG ist derzeit eines der praktischsten Muster in der KI. Damit können Sie ohne Feinabstimmung KI-gestützte Q&A-Systeme auf Ihren eigenen Daten aufbauen, und Semantic Kernel macht es in C# überraschend sauber. Beginnen Sie mit dem In-Memory-Speicher, sorgen Sie für die richtige Aufteilung und Aufforderung und tauschen Sie dann eine echte Vektordatenbank ein, wenn Sie für die Produktion bereit sind.

Viel Spaß beim Codieren!

## Ressourcen

- [Semantic Kernel Vector Store-Dokumentation](https://learn.microsoft.com/en-us/semantic-kernel/concepts/vector-store-connectors/)
– [RAG-Muster mit Azure AI Search](https://learn.microsoft.com/en-us/azure/search/retrieval-augmented-generation-overview)
- [Texteinbettungsmodelle](https://learn.microsoft.com/en-us/azure/ai-services/openai/concepts/models#embeddings)

Erstellen Sie Agent-Workflows mit Microsoft Agent Framework

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

Einführung

Wenn Sie meine vorherigen Beiträge zum Agent Framework von Microsoft gelesen haben, wissen Sie, wie Sie einzelne Agenten und sogar Gruppenchats mit mehreren Agenten erstellen. In realen Szenarien benötigen Sie jedoch häufig etwas Strukturierteres – einen Workflow, bei dem Agenten in einer bestimmten Reihenfolge ausführen, Ergebnisse aneinander weitergeben und die Verzweigungslogik basierend auf den Ergebnissen verwalten.

Genau das bieten Ihnen die Workflow-Funktionen im Agent Framework. Anstatt Agenten in einen Gruppenchat zu schicken und zu hoffen, dass sie es herausfinden, definieren Sie explizite Schritte, Abhängigkeiten und Datenflüsse zwischen Agenten.

Was sind Agenten-Workflows?

Stellen Sie sich Agenten-Workflows wie eine Pipeline vor. Jeder Schritt wird von einem spezialisierten Agenten bearbeitet, und die Ausgabe eines Schritts fließt in den nächsten ein. Sie können Schritte nacheinander, parallel oder bedingt auf der Grundlage der Ergebnisse ausführen.

Einige Beispiele:

Content-Pipeline: Recherche → Entwurf → Überprüfung → Veröffentlichen
Datenverarbeitung: Extrahieren → Transformieren → Validieren → Laden
Kundensupport: Klassifizieren → Route → Reagieren → Nachverfolgung

Voraussetzungen

Stellen Sie sicher, dass Sie über die neuesten Agent Framework-Pakete verfügen:

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

Und ein Azure OpenAI- oder OpenAI-Endpunkt konfiguriert.

Aufbau eines sequentiellen Workflows

Lassen Sie uns einen Workflow zur Inhaltserstellung mit drei Agenten erstellen: einem Rechercheur, einem Autor und einem Redakteur.

Definieren der Agenten

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

Nacheinander ausführen

Der einfachste Workflow ist sequentiell – jeder Agent verarbeitet die Ausgabe des vorherigen:

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

Jeder Agent erhält den gesammelten Kontext, verarbeitet ihn und das Ergebnis geht zum nächsten Schritt über.

Parallele Ausführung

Manchmal können Agenten unabhängig arbeiten. Beispielsweise möchten Sie möglicherweise mehrere Unterthemen gleichzeitig recherchieren:

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

Anschließend können Sie alle Forschungsberichte einem einzigen Autorenagenten zuführen, um einen zusammenhängenden Beitrag zu erstellen.

Bedingte Verzweigung

Echte Arbeitsabläufe brauchen Entscheidungen. Vielleicht möchten Sie einen Qualitätsprüfungsschritt, der an den Autor zurückleitet, wenn der Beitrag nicht gut genug ist:

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

Dieses Muster ist super nützlich. Der Qualitätsprüfer fungiert als Tor und der Workflow wird in einer Schleife ausgeführt, bis die Ausgabe gut genug ist oder die maximale Revisionsgrenze erreicht.

Plugins zu Workflow-Agenten hinzufügen

Agenten in Workflows können Plugins genauso verwenden wie eigenständige Agenten. Hier werden die Dinge wirklich leistungsstark: Agenten können als Teil ihres Workflow-Schritts APIs aufrufen, Datenbanken abfragen oder Dateivorgänge ausführen:

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

Fehlerbehandlung in Workflows

Wenn Sie mehrere Agenten verketten, wird die Fehlerbehandlung von entscheidender Bedeutung. Sie möchten nicht, dass ein fehlgeschlagener Schritt den gesamten Workflow stillschweigend zum Absturz bringt:

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

Nachdem ich mehrere Agenten-Workflows erstellt habe, habe ich Folgendes gelernt:- Konzentrieren Sie sich auf die Anweisungen der Agenten – jeder Agent sollte eine Sache gut machen. Versuchen Sie nicht, einen Agenten aus einem Schweizer Taschenmesser zu machen.

Kontext einschränken – geben Sie nicht den gesamten Gesprächsverlauf an jeden Agenten weiter. Geben Sie jedem Schritt nur das, was er braucht.
Legen Sie Revisionsgrenzen fest – Qualitätsschleifen sind großartig, können aber ewig laufen, wenn Sie nicht aufpassen. Halten Sie immer eine maximale Anzahl an Iterationen ein.
Alles protokollieren – Agentenausgaben können unvorhersehbar sein. Protokollieren Sie die Eingaben und Ausgaben jedes Schritts zum Debuggen.
Nutzen Sie die parallele Ausführung mit Bedacht – es beschleunigt die Dinge, aber achten Sie auf Ihre API-Ratenbegrenzungen und Token-Kosten.
Testen Sie zuerst mit kleineren Modellen – entwickeln und testen Sie Ihre Workflow-Logik mit GPT-3.5, bevor Sie für die Produktion auf GPT-4o umsteigen.

Fazit

Mit Agenten-Workflows können Sie komplexe, mehrstufige KI-Pipelines erstellen, in denen jeder Agent ein Spezialist ist. Beginnen Sie mit sequenziellen Arbeitsabläufen, fügen Sie eine parallele Ausführung hinzu, bei der die Schritte unabhängig sind, und verwenden Sie bedingte Verzweigungen für Qualitäts-Gates. Die Muster sind kombinierbar – sobald Sie den Dreh raus haben, können Sie eine ziemlich ausgefeilte Automatisierung erstellen.

Viel Spaß beim Codieren!

Ressourcen

Lebenszyklus von Blazor-Komponenten: der vollständige Leitfaden

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

Ich benutze Blazor jetzt schon eine Weile und ehrlich gesagt haben mich die Lebenszyklusmethoden zunächst verwirrt. OnInitialized vs. OnInitializedAsync? OnParametersSet vs. OnAfterRender? Wann löst StateHasChanged tatsächlich ein erneutes Rendern aus? Nach vielen Versuchen und Irrtümern habe ich endlich ein solides mentales Modell für alles.

Der Lebenszyklus auf einen Blick

Wenn eine Blazor-Komponente gerendert wird, durchläuft sie diese Methoden der Reihe nach:

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

Lassen Sie uns jeden einzelnen durchgehen.

SetParametersAsync

Dies ist die allererste aufgerufene Methode. Es empfängt den Rohdatensatz ParameterView von der übergeordneten Komponente. Meistens überschreiben Sie dies nicht – Blazor verarbeitet die Zuordnungsparameter automatisch. Wenn Sie jedoch eine benutzerdefinierte Parameterbehandlung oder -validierung benötigen, bevor sie zugewiesen werden:

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

Ich habe das genau einmal in einem echten Projekt verwendet. Meistens überspringst du es.

OnInitialized / OnInitializedAsync

Hier erledigen Sie Ihre Einrichtungsarbeiten: Laden Sie Daten, initialisieren Sie Dienste und legen Sie Standardwerte fest. Es wird einmal ausgeführt, wenn die Komponente zum ersten Mal erstellt wird.

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

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

Eine Sache hat mich gestolpert: In Blazor Server wird OnInitializedAsync beim Vorrendern zweimal aufgerufen. Das erste Mal während des serverseitigen Prerenders und das zweite Mal, wenn die SignalR-Verbindung hergestellt wird. Wenn Ihr API-Aufruf teuer ist, möchten Sie vielleicht Folgendes erledigen:

private bool isPrerendering = true;

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

Oder noch besser: Verwenden Sie PersistentComponentState, um den Doppelaufruf vollständig zu vermeiden.

OnParametersSet / OnParametersSetAsync

Dies wird jedes Mal ausgelöst, wenn die übergeordnete Komponente erneut gerendert wird und neue Parameterwerte übergibt. Es wird auch nach OnInitialized ausgelöst. Hier sind Sie richtig, um auf Parameteränderungen zu reagieren:

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

Die Prüfung auf CategoryId != previousCategoryId ist wichtig – ohne sie würden Sie die Daten jedes Mal neu laden, wenn das übergeordnete Element erneut gerendert wird, selbst wenn sich die Kategorie nicht geändert hätte.

OnAfterRender / OnAfterRenderAsync

Dies wird ausgelöst, nachdem die Komponente im DOM gerendert wurde. Der Parameter firstRender sagt Ihnen, ob es sich um das erste Rendering handelt. Dies ist der Ort für JS-Interop-Aufrufe, da die DOM-Elemente an dieser Stelle vorhanden sind:

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

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

Ich verwende firstRender häufig, um zu vermeiden, dass JavaScript-Bibliotheken bei jedem erneuten Rendern neu initialisiert werden. Wenn Sie Ereignis-Listener, Diagrammbibliotheken oder alles, was das DOM direkt berührt, einrichten, ist dies der richtige Ort.

ShouldRender

Dieser ist weniger bekannt, aber super nützlich. Es steuert, ob eine Komponente erneut gerendert wird, wenn StateHasChanged aufgerufen wird:

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
}

Ich habe dies verwendet, um Komponenten zu optimieren, die große Listen verarbeiten. Anstatt bei jeder Elementänderung erneut zu rendern, stapeln Sie die Aktualisierungen und rendern sie am Ende einmal.

Entsorgen / DisposeAsync

Wenn eine Komponente von der Benutzeroberfläche entfernt wird, sollten Sie alle Ressourcen bereinigen. Implementieren Sie IDisposable oder 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();
 }
 }
}

Häufig zu entsorgende Dinge: Timer, Ereignisabonnements, JS-Modulreferenzen, CancellationTokenSource und alle von Ihnen erstellten IDisposable-Dienste.

StateHasChangedDies ist keine Lebenszyklusmethode, aber sie ist eng damit verbunden. Es sagt Blazor: „Hey, mein Zustand hat sich geändert, bitte rendern Sie mich neu.“ Blazor ruft es automatisch nach Ereignishandlern auf, aber manchmal müssen Sie es manuell aufrufen – normalerweise, wenn sich der Status außerhalb des normalen Blazor-Ereignisflusses ändert:

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

Ein wichtiger Hinweis: Wenn Sie von einem Hintergrundthread in Blazor Server aktualisieren, verwenden Sie InvokeAsync:

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

Das ganze Bild

Hier ist die Reihenfolge, in der alles passiert:

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

Sobald Sie diesen Ablauf im Kopf haben, wird das Debuggen von Lebenszyklusproblemen viel einfacher.

Ich hoffe, Ihnen hat der Beitrag gefallen! Sie können mich gerne in den sozialen Medien unter @emimontesdeoca kontaktieren.

Ressourcen

Das Agent Framework von Microsoft soll Weihnachten retten

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

Einführung

Die Suche nach den perfekten Weihnachtsgeschenken kann stressig sein. Zwischen dem Brainstorming von Geschenkideen, dem Preisvergleich in verschiedenen Geschäften und der Sicherstellung, dass alles pünktlich ankommt, wird der Weihnachtseinkauf schnell überwältigend. Was wäre, wenn wir diese Aufgaben an spezialisierte KI-Agenten delegieren könnten, die zusammenarbeiten? In diesem Beitrag untersuchen wir, wie Sie mit dem Agent Framework von Microsoft ein Multi-Agenten-System aufbauen, in dem sich jeder Agent auf eine bestimmte Aufgabe spezialisiert, von der Generierung von Geschenkideen bis zum Preisvergleich, alles koordiniert durch Arbeitsabläufe.

Festlicher Tech-Kalender 2025

Dieses Projekt ist Teil meiner Sitzung beim Festive Tech Calendar 2025, einem tollen Community-Event zur Feier der Technologie während der Feiertage. Mehr über die Veranstaltung finden Sie auf Sessionize.

Was ist das Agent Framework von Microsoft?

Das Agent Framework ist Microsofts Lösung zum Erstellen, Orchestrieren und Bereitstellen von KI-Agenten und Multiagentensystemen. Es bietet eine flexible Grundlage für die Erstellung von Agenten, die sequentiell, gleichzeitig oder über Übergabemuster arbeiten können. Das Framework unterstützt OpenAI-, Azure OpenAI- und Microsoft Foundry-Modelle und ist dadurch unglaublich vielseitig.

Zu den Hauptmerkmalen gehören:

Multi-Agent-Orchestrierung: Gruppenchat, sequentielle, gleichzeitige und Übergabemuster
Plugin-Ökosystem: Erweitern mit nativen Funktionen, OpenAPI und Model Context Protocol (MCP)
Workflow-Unterstützung: Erstellen Sie komplexe Agent-Pipelines mit Executoren und Edges

Voraussetzungen

Bevor Sie in den Code eintauchen, stellen Sie sicher, dass Sie Folgendes haben:

.NET 9
Azure OpenAI-Zugriff (oder OpenAI-API-Schlüssel)
Visual Studio oder Visual Studio Code

Installieren Sie die erforderlichen Pakete (beachten Sie, dass in der Vorschau das Flag --prerelease erforderlich ist):

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

Die Gift-Shopping-Agenten

Unser Weihnachtsgeschenkfinder besteht aus drei spezialisierten Agenten, die zusammenarbeiten:

Geschenkideen-Agent – Erstellt kreative Geschenkvorschläge basierend auf dem Profil des Empfängers
Preisvergleichsagent – Findet die besten Preise in verschiedenen Geschäften
Zusammenfassungsagent – Stellt die endgültigen Empfehlungen zusammen

Die Modelle

Beginnen wir mit der Definition unserer Datenmodelle, die durch die Agent-Pipeline fließen:

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

Aufbau der Agenten

Das Schöne am Agent Framework ist, wie einfach es ist, spezialisierte Agenten zu erstellen. Jeder Agent ist einfach ein ChatClientAgent mit einer spezifischen Systemaufforderung, die sein Fachwissen definiert.

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

Erstellen des Workflows

Jetzt kommt der spaßige Teil: die Verbindung unserer Agenten in einen sequentiellen Workflow. Das Agent Framework bietet WorkflowBuilder und AgentWorkflowBuilder, um Agenten in verschiedenen Mustern zusammenzustellen.

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

Agenten gleichzeitig ausführen

Was ist, wenn wir für mehrere Personen gleichzeitig nach Geschenken suchen möchten? Das Agent Framework unterstützt die gleichzeitige Ausführung, was perfekt für dieses Szenario ist:

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

Benutzerdefinierte Executoren für mehr KontrolleFür komplexere Szenarien können Sie benutzerdefinierte Executoren erstellen, die Ihnen eine detaillierte Kontrolle über den Workflow ermöglichen:

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

Anschließend können Sie diesen Executor in Ihren Workflow einfügen:

var validator = new GiftValidatorExecutor();

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

Hinzufügen einer echten Websuche mit Bing Grounding

Bisher generieren unsere Agenten Antworten basierend auf dem Wissen des KI-Modells. Was aber, wenn wir im Internet nach tatsächlichen Produktpreisen und -verfügbarkeiten suchen möchten? Hier kommt Grounding with Bing Search ins Spiel. Dabei handelt es sich um ein in Microsoft Foundry (ehemals Azure AI Foundry) verfügbares Tool, mit dem Ihre Agenten bei der Generierung von Antworten öffentliche Webdaten in Echtzeit einbeziehen können.

Zuerst müssen Sie im [Azure-Portal](https://portal.azure.com/#create/Microsoft.BingGroundingSearch eine Ressource „Grounding with Bing Search“ erstellen. Stellen Sie sicher, dass Sie es in derselben Ressourcengruppe wie Ihr KI-Projekt erstellen.

Erdung mit der Bing-Suche einrichten

Das Schöne an Grounding mit Bing Search ist, dass es direkt in Azure AI Agents integriert werden kann. Der Agent entscheidet anhand der Anfrage des Benutzers, wann er das Suchtool verwendet, durchsucht das Web und generiert anhand der Ergebnisse eine fundierte Antwort.

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

Erstellen eines Preisvergleichsagenten mit echter Suche

Lassen Sie uns nun einen vollständigen Preisvergleichsagenten erstellen, der das Internet nach echten Produktinformationen durchsucht:

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

Integration von Bing Grounding in den Workflow

So verwenden Sie den von Bing unterstützten Preisagenten in einem vollständigen Geschenksuche-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! 🎁");
}

Zitate aus Bing-Ergebnissen verarbeiten

Ein wichtiger Aspekt von Grounding mit Bing Search besteht darin, dass die Antworten Zitate mit Links zu den Quellwebsites enthalten. So extrahieren und zeigen Sie sie an:

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

Wenn der Preisvergleichsagent jetzt ausgeführt wird, verwendet er Grounding with Bing Search, um echte Produktlisten, aktuelle Preise und verfügbare Angebote im Live-Web zu finden. Der Agent entscheidet automatisch anhand der Anfrage, wann eine Suche durchgeführt werden soll, und gibt fundierte Antworten mit korrekten Zitaten zurück.

Das komplette Programm

So kommt in Program.cs alles zusammen:

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.Update.Text);
 break;
 case WorkflowOutputEvent output:
 Console.WriteLine("\n\n🎁 Happy Shopping! 🎁");
 break;
 }
}

Fazit

Das Agent Framework von Microsoft macht es überraschend einfach, Systeme mit mehreren Agenten zu erstellen, bei denen jeder Agent auf eine bestimmte Aufgabe spezialisiert ist. Indem wir diese Agenten durch Arbeitsabläufe koordinieren, können wir komplexe Probleme wie Weihnachtseinkäufe strukturiert und effizient angehen.

Was dies noch leistungsfähiger macht, ist die Möglichkeit, mithilfe von Tools reale Funktionen hinzuzufügen. Durch die Integration von Grounding mit Bing Search von Microsoft Foundry kann unser Preisvergleichsagent das Internet tatsächlich nach aktuellen Preisen, Angeboten und Verfügbarkeit durchsuchen – und verwandelt so einen einfachen KI-Chatbot in einen wirklich nützlichen Einkaufsassistenten mit korrekten Zitaten.

Die Unterstützung des Frameworks für sequentielle, gleichzeitige und Übergabemuster bedeutet, dass Sie Agentensysteme entwerfen können, die genau Ihren Anforderungen entsprechen. Ganz gleich, ob es um die Suche nach Geschenken, die Planung von Reisen oder eine andere mehrstufige Aufgabe geht, das Agent Framework stellt die Bausteine bereit, um dies zu ermöglichen.Überlassen Sie diese Weihnachtszeit den KI-Agenten die Recherche, während Sie sich auf das Verpacken von Geschenken und das Genießen der Zeit mit der Familie konzentrieren!

Quellcode

Die in diesem Beitrag gezeigten Konzepte basieren auf den offiziellen Agent Framework-Beispielen. Weitere Beispiele finden Sie im Microsoft Agent Framework GitHub-Repository.

Frohe Feiertage und viel Spaß beim Programmieren! 🎄

Aufbau eines KI-gestützten RSS-Feed-Aggregators

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

Als Microsoft MVP und Technikbegeisterter ertrinke ich ständig im Meer erstaunlicher Inhalte, die in den DevBlogs von Microsoft veröffentlicht werden. Von .NET-Ankündigungen bis zu Visual Studio-Updates, von Azure-Innovationen bis hin zu ausführlichen Einblicken in den Semantic Kernel – im Microsoft-Ökosystem passiert immer etwas Neues und Aufregendes.

Das Problem? Es ist fast unmöglich, mit allem Schritt zu halten.

Ich wollte über die neuesten Ankündigungen auf dem Laufenden bleiben und sie mit meinem Netzwerk teilen, aber das manuelle Überprüfen von sieben verschiedenen RSS-Feeds, das Lesen von Artikeln, das Verfassen ansprechender Social-Media-Beiträge und das Verfolgen dessen, was ich bereits geteilt habe, wurde zu einem Vollzeitjob für sich. Jeden Morgen öffnete ich mehrere Browser-Tabs, überflog Dutzende von Artikeln, versuchte mich daran zu erinnern, welche ich bereits geteilt hatte, und verbrachte dann wertvolle Zeit damit, Beiträge über diejenigen zu schreiben, die meine Aufmerksamkeit erregten.

Also habe ich getan, was jeder Entwickler tun würde: Ich habe es automatisiert.

In diesem umfassenden Leitfaden erkläre ich Ihnen, wie ich einen KI-gestützten RSS-Feed-Aggregator erstellt habe, der mehrere RSS-Feeds von Microsoft DevBlogs auf neue Inhalte überwacht, Azure OpenAI und Semantic Kernel verwendet, um Artikel zu analysieren und ansprechende Beiträge zu generieren, eine detaillierte Markdown-Dokumentation für jeden analysierten Artikel erstellt, Benachrichtigungen per Telegram sendet, damit ich den Inhalt überprüfen und teilen kann, alles verfolgt, um doppelte Beiträge zu vermeiden, und der automatisch über GitHub-Aktionen ausgeführt wird.

Lassen Sie uns tief in jeden Aspekt dieser Lösung eintauchen.

Die Geschichte hinter diesem Projekt

Leben mit Informationsüberflutung

Lassen Sie mich Ihnen ein Bild von meinem typischen Morgen zeichnen, bevor ich dieses Tool gebaut habe. Ich wachte auf, holte mir meinen Kaffee und öffnete meinen Laptop, um nachzusehen, was es Neues im Microsoft-Entwickler-Ökosystem gibt. Zuerst würde ich zur Hauptseite von DevBlogs navigieren, um zu sehen, ob es dort wichtige Ankündigungen gibt. Dann würde ich mir speziell den .NET-Blog ansehen, da dies mein primärer Technologie-Stack ist. Danach würde ich zum Semantic Kernel-Blog vorbeischauen, da KI immer wichtiger wird. Der Visual Studio-Blog stand als nächstes auf der Liste, da IDE-Updates meinen täglichen Arbeitsablauf erheblich beeinträchtigen können. Dann folgte der DevOps-Blog für CI/CD- und GitHub-bezogene Neuigkeiten, gefolgt vom All Things Azure-Blog für Cloud-Infrastruktur-Updates und schließlich der Azure SQL-Blog für Datenbankinnovationen.

Das sind sieben verschiedene Feeds, die überprüft werden müssen. Jeder dieser Blogs veröffentlicht mehrere Artikel pro Woche, manchmal mehrere pro Tag während wichtiger Ankündigungszeiträume wie .NET Conf oder Build. Das sind potenziell Dutzende Artikel, die Sie verfolgen, lesen und teilen können. Und hier ist die Sache: Als jemand, der Wert darauf legt, Wissen mit der Community zu teilen, wollte ich diese Artikel nicht nur lesen. Ich wollte die wertvollsten mit meinem Netzwerk auf LinkedIn teilen und so auch anderen Entwicklern helfen, auf dem Laufenden zu bleiben.Aber die Erstellung eines guten LinkedIn-Beitrags braucht Zeit. Sie müssen den Artikel gründlich lesen, die wichtigsten Punkte verstehen, darüber nachdenken, warum er für Ihr Publikum wichtig ist, einen ansprechenden Hook schreiben und alles gut formatieren. Multiplizieren Sie das mit mehreren Artikeln pro Woche, und Sie haben Stunden an Arbeit vor sich.

Was ich wirklich wollte

Nachdem ich mich monatelang damit beschäftigt hatte, habe ich mich hingesetzt und darüber nachgedacht, wie eine ideale Lösung aussehen könnte. In erster Linie wollte ich nie wieder wichtige Ankündigungen verpassen. Das System sollte neue Artikel automatisch erkennen, sobald sie veröffentlicht werden. Außerdem wollte ich bei der Inhaltserstellung Zeit sparen, indem ich die KI bei der Erstellung ansprechender Beiträge unterstützen ließ – nicht um meine Stimme vollständig zu ersetzen, sondern um mir einen soliden Ausgangspunkt zu geben, den ich anpassen kann.

Konsistenz war ein weiterer wichtiger Faktor. Ich wollte Inhalte regelmäßig teilen, ohne jeden Tag daran denken zu müssen, dies manuell zu tun. Auch der Tracking-Aspekt war entscheidend – ich brauchte eine Möglichkeit, herauszufinden, was ich bereits geteilt habe, um zu vermeiden, dass Du Duplikate postest und meine Follower verärgerst. Schließlich wollte ich mit einer permanenten Aufzeichnung aller von mir verarbeiteten Daten den Überblick behalten, damit ich zurückblicken und sehen kann, welche Themen ich behandelt habe.

Die Lösung nimmt Gestalt an

Die Lösung, die ich mir vorgestellt hatte, würde nach einem Zeitplan mithilfe von GitHub-Aktionen laufen, völlig freihändig. Es würde alle sieben Feeds automatisch abrufen, ohne dass ich einen einzigen Browser-Tab öffnen müsste. Die KI-Komponente würde den Inhalt tatsächlich lesen und verstehen und ihn dann auf eine Weise zusammenfassen, die für mein Publikum nützlich ist. Anstatt Beiträge von Grund auf neu schreiben zu müssen, würde es fertige Social-Media-Inhalte zum Teilen erstellen, die ich bei Bedarf anpassen könnte. Alles wurde zur Überprüfung an mein Telegram gesendet, sodass ich schnell einen Blick auf mein Telefon werfen und entscheiden konnte, was ich teilen wollte. Und natürlich würde alles dauerhaft aufgezeichnet werden, um später darauf zurückgreifen zu können.

Bevor wir mit dem Bau beginnen

Was Sie auf Ihrer Maschine benötigen

Um diesem Tutorial folgen zu können, müssen einige Dinge auf Ihrem Entwicklungscomputer installiert sein. Das wichtigste ist die .NET SDK-Version 9.0 oder höher. Dies ist unsere Laufzeit und stellt alle Build-Tools bereit, die wir benötigen. Wenn Sie es nicht installiert haben, gehen Sie zu dot.net und laden Sie die neueste Version herunter. Die Installation ist unkompliziert unter Windows, macOS oder Linux.

Sie möchten außerdem, dass Git zur Versionskontrolle installiert wird. Wir werden unseren Code auf GitHub übertragen und GitHub-Aktionen zur Automatisierung verwenden, daher ist es wichtig, dass Git lokal eingerichtet ist. Jede neuere Version wird einwandfrei funktionieren.

Für Ihre Entwicklungsumgebung empfehle ich entweder Visual Studio oder VS Code. Persönlich verwende ich heutzutage für den Großteil meiner Arbeit VS-Code, weil er leichtgewichtig ist und über die C#-Dev-Kit-Erweiterung hervorragende C#-Unterstützung bietet. Aber wenn Sie mit dem vollständigen Visual Studio vertrauter sind, funktioniert das auch perfekt.

Dienste und Konten, die Sie benötigenÜber die lokalen Tools hinaus benötigen Sie Konten bei einigen Diensten. Das wichtigste ist Azure OpenAI, das unsere KI-Analyse unterstützt. Hierbei handelt es sich um einen Pay-as-you-go-Dienst, die Kosten sind für diesen Anwendungsfall jedoch minimal – wir sprechen von Cent pro analysiertem Artikel. Wenn Sie kein Azure-Konto haben, können Sie sich für eine kostenlose Testversion anmelden, die einige Credits für den Einstieg enthält.

Für Benachrichtigungen verwenden wir einen Telegram Bot. Das Tolle an Telegram ist, dass die Nutzung der Bot-API völlig kostenlos ist. Sie können so viele Bots erstellen, wie Sie möchten, und unbegrenzt Nachrichten senden. Ich werde Sie später in diesem Handbuch durch den Einrichtungsprozess führen.

Schließlich benötigen Sie ein GitHub-Konto zum Hosten Ihres Codes und zum Ausführen von GitHub-Aktionen. Das kostenlose Kontingent ist für dieses Projekt mehr als ausreichend. GitHub bietet Ihnen 2.000 Minuten Actions-Laufzeit pro Monat für private Repositorys und unbegrenzte Minuten für öffentliche Repositorys.

Die Bibliotheken, die dies ermöglichen

Unser Projekt basiert auf drei Haupt-NuGet-Paketen, die jeweils einem bestimmten Zweck dienen.

Das erste ist HtmlAgilityPack, der Goldstandard für die HTML-Analyse in .NET. Wenn wir einen Artikel aus einem Blog abrufen, erhalten wir den vollständigen HTML-Code der Seite zurück – einschließlich Navigationsmenüs, Fußzeilen, Anzeigen und allen möglichen Elementen, die uns nicht interessieren. Mit HtmlAgilityPack können wir diesen HTML-Code analysieren und genau den Artikelinhalt extrahieren, den wir benötigen.

Das zweite Paket ist Microsoft.SemanticKernel, das SDK von Microsoft zur Integration von KI-Modellen in Anwendungen. Betrachten Sie es als Brücke zwischen Ihrem .NET-Code und großen Sprachmodellen wie GPT-4. Es bewältigt die gesamte Komplexität von API-Aufrufen, Token-Management und Antwortanalyse, sodass Sie sich auf das konzentrieren können, was die KI tatsächlich tun soll.

Das dritte Paket ist System.ServiceModel.Syndication, das integrierte Unterstützung für das Parsen von RSS- und Atom-Feeds bietet. RSS mag wie eine veraltete Technologie erscheinen, ist aber immer noch die beste Möglichkeit, strukturierte Updates von Blogs und Nachrichtenseiten zu erhalten. Dieses Paket wandelt rohe XML-Feeds in stark typisierte C#-Objekte um, mit denen man einfach arbeiten kann.

Die Architektur verstehen

Wie die Teile zusammenpassen

Bevor wir uns mit dem Code befassen, möchte ich erklären, wie alle Komponenten zusammenarbeiten. Wenn Sie das Gesamtbild verstehen, werden die Implementierungsdetails viel klarer.

Auf der höchsten Ebene haben wir unsere Hauptdatei Program.cs, die als Orchestrator fungiert. Dies ist der Einstiegspunkt unserer Anwendung und koordiniert alle anderen Komponenten. Wenn die Anwendung ausgeführt wird, lädt sie zunächst die Konfiguration aus Umgebungsvariablen – Dinge wie API-Schlüssel und Telegram-Anmeldeinformationen. Dann geht es los und ruft RSS-Feeds von allen sieben Microsoft DevBlogs-Quellen ab. Bei der Verarbeitung dieser Feeds werden Artikel dedupliziert, um Fälle zu bearbeiten, in denen derselbe Artikel in mehreren Feeds erscheint. Es prüft jeden Artikel anhand unserer Tracking-Datei, um festzustellen, ob wir ihn bereits verarbeitet haben. Neue Artikel werden zur Verarbeitung an den KI-Analysator übergeben.In der ArticleAnalyzer-Klasse geschieht die KI-Magie. Diese Komponente empfängt einen Artikel und macht mehrere Dinge damit. Zunächst wird der vollständige HTML-Inhalt von der URL des Artikels abgerufen. Dann extrahiert es sauberen Text aus diesem HTML und entfernt alle Navigationselemente, Skripte und Stile, die wir nicht benötigen. Sobald sauberer Text vorliegt, wird dieser über den Semantic Kernel mit einer sorgfältig ausgearbeiteten Eingabeaufforderung an Azure OpenAI gesendet. Die KI analysiert den Artikel und gibt eine strukturierte Antwort zurück, die eine Zusammenfassung, Schlüsselthemen, eine Erklärung zur Relevanz und vor allem einen gebrauchsfertigen LinkedIn-Beitrag enthält. Der Analysator analysiert diese Antwort und gibt ein ArticleAnalysis-Objekt zurück, das alle diese Informationen enthält.

Die MarkdownGenerator-Klasse nimmt dieses ArticleAnalysis-Objekt und erstellt eine permanente Aufzeichnung davon. Es generiert eine schön formatierte Markdown-Datei, die alle Artikelmetadaten, die KI-Analyse und den generierten Beitrag enthält. Diese Dateien werden in einem Verzeichnis „generated-posts“ gespeichert und bieten Ihnen ein durchsuchbares Archiv aller von Ihnen verarbeiteten Daten.

Schließlich sendet die Telegram-Integration den generierten Beitragsinhalt an Ihr Telefon. Dies ist der Punkt, an dem Sie als Mensch die Arbeit der KI überprüfen und entscheiden können, ob Sie sie teilen möchten. Der Bot sendet Ihnen eine Nachricht mit dem Inhalt des Beitrags, den Sie entweder direkt auf LinkedIn kopieren oder zunächst ändern können.

Der Datenfluss

Lassen Sie mich erklären, was passiert, wenn ein neuer Artikel im .NET-Blog veröffentlicht wird. Der Workflow beginnt, wenn GitHub Actions unsere Anwendung nach ihrem Zeitplan auslöst – sagen wir alle sechs Stunden. Die Anwendung wird aktiviert und beginnt mit dem Abrufen aller sieben RSS-Feeds. Jeder Feed gibt ein XML-Dokument zurück, das die neuesten Artikel aus diesem Blog enthält.

Während wir jeden Feed analysieren, extrahieren wir einzelne Artikel und speichern sie in einer Liste. Aber hier ist ein kniffliger Teil: Der Haupt-DevBlogs-Feed enthält oft Artikel, die auch in den einzelnen Kategorie-Feeds erscheinen. Daher könnte ein Artikel über „.NET 10“ sowohl im Haupt-Feed als auch im .NET-spezifischen Feed erscheinen. Wir handhaben dies, indem wir URLs in einem HashSet verfolgen, was automatisch Duplikate verhindert.

Sobald wir unsere deduplizierte Artikelliste haben, filtern wir sie auf die neuesten Artikel herunter – typischerweise Artikel, die am letzten Tag oder so veröffentlicht wurden. Wir möchten keine alten Artikel verarbeiten, die wir bereits in früheren Durchläufen bearbeitet haben. Dann vergleichen wir jeden aktuellen Artikel mit unserer Tracking-Datei. Wenn wir einen Artikel bereits bearbeitet und veröffentlicht haben, überspringen wir ihn.

Für jeden neuen Artikel starten wir die KI-Analysepipeline. Der Analysator ruft den vollständigen Artikel-HTML-Code ab, bereinigt ihn und sendet ihn mit unserer Eingabeaufforderung an GPT-4. Die KI liest den Artikel und generiert eine umfassende Analyse zusammen mit einem LinkedIn-Beitrag. Wir speichern diese Analyse für unsere Unterlagen in einer Markdown-Datei.Nach Abschluss der Analyse formatieren wir eine Nachricht und senden sie per Telegram. Die Nachricht enthält den generierten Beitragsinhalt mit angehängter URL und Hashtags. Auf meinem Telefon erhalte ich eine Benachrichtigung, überprüfe den Beitrag und wenn er mir gefällt, kann ich ihn mit nur wenigen Fingertipps kopieren und auf LinkedIn teilen.

Abschließend aktualisieren wir unsere Tracking-Datei, um diesen Artikel als verarbeitet zu markieren, sodass wir ihn in zukünftigen Läufen nicht erneut bearbeiten. Wenn Dateien erstellt oder geändert wurden, schreibt GitHub Actions diese Änderungen zurück in das Repository und hält alles synchron.

Einrichten des Projekts von Grund auf

Erstellen der Lösungsstruktur

Beginnen wir mit dem Bau. Öffnen Sie Ihr Terminal und navigieren Sie zu der Stelle, an der Sie das Projekt erstellen möchten. Ich organisiere meine Projekte gerne in einem Entwicklungsordner, aber Sie können ihn auch dort ablegen, wo es für Sie sinnvoll ist.

Zuerst erstellen wir eine neue Lösungsdatei. In .NET ist eine Lösung ein Container, der mehrere Projekte enthalten kann. Auch wenn wir derzeit nur ein Projekt haben, ist es einfacher, später bei Bedarf weitere Projekte hinzuzufügen, wenn wir mit einer Lösung beginnen. Führen Sie den Befehl dotnet new sln -n vs-feed-linkedin aus, um eine Lösung mit dem Namen vs-feed-linkedin zu erstellen.

Als nächstes müssen wir unser Konsolenanwendungsprojekt erstellen. Wir legen dies in einem src-Unterverzeichnis ab, um die Organisation zu gewährleisten. Führen Sie dotnet new console -n VsFeedLinkedin -o src aus, um ein Konsolenprojekt mit dem Namen VsFeedLinkedin im Ordner src zu erstellen. Fügen Sie dann dieses Projekt mit dotnet sln add src/VsFeedLinkedin.csproj zu unserer Lösung hinzu.

Navigieren Sie nun mit cd src in das src-Verzeichnis. Hier fügen wir unsere NuGet-Pakete hinzu und erledigen den Großteil unserer Entwicklung.

Hinzufügen der erforderlichen Pakete

Nachdem unser Projekt erstellt wurde, müssen wir die drei zuvor erwähnten NuGet-Pakete hinzufügen. Führen Sie jeden dieser Befehle nacheinander aus:

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

Nachdem Sie diese Befehle ausgeführt haben, sollte Ihre Projektdatei etwa so aussehen:

<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>

Die Projektdatei teilt .NET mit, dass wir eine ausführbare Datei (OutputType ist Exe) erstellen, die auf .NET 9.0 abzielt und moderne C#-Funktionen wie implizite Verwendungen und nullfähige Referenztypen verwendet. Der Abschnitt „ItemGroup“ listet unsere drei Paketabhängigkeiten mit ihren genauen Versionen auf.

Tauchen Sie tief in RSS-Feeds ein

Was genau ist RSS?

Bevor wir mit dem Schreiben von Code zum Abrufen von Feeds beginnen, stellen wir sicher, dass wir verstehen, womit wir arbeiten. RSS steht für Really Simple Syndication und ist ein standardisiertes XML-Format zur Verteilung von Inhaltsaktualisierungen. Die Idee ist einfach: Anstatt zu verlangen, dass Benutzer Ihre Website besuchen, um zu sehen, ob es neue Inhalte gibt, veröffentlichen Sie eine maschinenlesbare Datei, die Ihre neuesten Inhalte auflistet. Anwendungen können diese Datei dann regelmäßig abfragen, um neue Artikel zu entdecken.

RSS gibt es seit Ende der 1990er und Anfang der 2000er Jahre. Man könnte meinen, es handele sich um eine veraltete Technologie, aber tatsächlich wird sie immer noch häufig verwendet – insbesondere von Blogs, Nachrichtenseiten und Podcasts. Das Schöne an RSS ist seine Einfachheit. Es handelt sich lediglich um XML mit einer definierten Struktur, und jede Anwendung kann es analysieren.

Die Struktur eines DevBlogs-FeedsWenn Sie einen RSS-Feed von Microsoft DevBlogs abrufen, erhalten Sie ein XML-Dokument zurück, das einer bestimmten Struktur folgt. Auf der obersten Ebene gibt es ein RSS-Element, das ein einzelnes Kanalelement enthält. Der Kanal stellt den Blog selbst dar und enthält Metadaten wie den Titel, die URL und die Beschreibung des Blogs.

Innerhalb des Kanals finden Sie mehrere Elementelemente, die jeweils einen einzelnen Blogbeitrag darstellen. Jedes Element enthält einen Titel (die Überschrift des Artikels), einen Link (die URL, unter der Sie den vollständigen Artikel lesen können), ein pubDate (Veröffentlichungsdatum des Artikels), ein dc:creator-Element (den Namen des Autors), ein oder mehrere Kategorieelemente (Tags für den Artikel) und eine Beschreibung (normalerweise eine Zusammenfassung oder einen Auszug des Artikels).

Hier ist ein vereinfachtes Beispiel, wie das aussieht:

<?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>

Das Tolle am System.ServiceModel.Syndication-Paket von .NET ist, dass es all dies für uns analysiert. Wir müssen nicht manuell durch XML-Knoten navigieren oder uns um unterschiedliche RSS-Versionen kümmern. Wir laden einfach den Feed und erhalten stark typisierte Objekte zurück.

Die sieben Feeds, die wir überwachen

In meiner Implementierung überwache ich sieben verschiedene Microsoft DevBlogs-Feeds. Der Haupt-DevBlogs-Feed unter devblogs.microsoft.com/feed bietet uns einen umfassenden Überblick über alles, was Microsoft in all seinen Entwicklerblogs veröffentlicht. Der .NET-spezifische Feed unter devblogs.microsoft.com/dotnet/feed konzentriert sich speziell auf .NET-Versionen, -Funktionen und Best Practices. Der Semantic-Kernel-Feed unter devblogs.microsoft.com/semantic-kernel/feed befasst sich mit der Orchestrierung und Integration von KI – was immer wichtiger wird, da KI für die moderne Entwicklung von zentraler Bedeutung ist.

Der Visual Studio-Feed unter devblogs.microsoft.com/visualstudio/feed hält mich über IDE-Verbesserungen und Produktivitätsfunktionen auf dem Laufenden. Der DevOps-Feed unter devblogs.microsoft.com/devops/feed behandelt Azure DevOps-, GitHub- und CI/CD-Themen. Der All Things Azure-Feed unter devblogs.microsoft.com/all-things-azure/feed konzentriert sich auf Cloud-Dienste und Architekturmuster. Schließlich behandelt der Azure SQL-Feed unter devblogs.microsoft.com/azure-sql/feed Datenbankinnovationen und -funktionen.

Sie fragen sich vielleicht, warum ich sowohl den Haupt-Feed als auch die einzelnen Kategorie-Feeds überprüfe. Der Haupt-Feed gibt mir Abwechslung – ich sehe Artikel aus jedem Microsoft-Entwicklerblog, auch solche, von denen ich vielleicht nichts weiß. Die Kategorie-Feeds geben mir Tiefe – sie stellen sicher, dass ich nichts Wichtiges in meinen Kerninteressengebieten verpasse, selbst wenn diese Artikel durch neuere Inhalte aus dem Haupt-Feed verdrängt werden.

Aufbau der RSS-Abruflogik

Die Kernabruffunktion

Jetzt schreiben wir etwas Code. Die Grundlage unserer Anwendung ist die Möglichkeit, RSS-Feeds abzurufen und zu analysieren. Hier ist die Funktion, die das erledigt:

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

Lassen Sie mich durchgehen, was dieser Code bewirkt. Wir beginnen mit der Erstellung eines HttpClient, der in .NET integrierten Klasse zum Senden von HTTP-Anfragen. Wir setzen einen User-Agent-Header, da einige Server Anfragen blockieren, die sich nicht identifizieren. Es empfiehlt sich, dies auch dann festzulegen, wenn Server dies nicht benötigen.Anschließend stellen wir eine GET-Anfrage an die Feed-URL und erhalten die Antwort als String. Diese Zeichenfolge enthält das Roh-XML des RSS-Feeds.

Um dieses XML zu analysieren, erstellen wir einen StringReader, um unsere Antwortzeichenfolge zu umschließen, und konfigurieren dann einige XmlReaderSettings. Die Einstellung „DtdProcessing“ ist wichtig – RSS-Feeds enthalten manchmal DTD-Deklarationen (Document Type Definition), die verarbeitet werden müssen. Die Einstellung „MaxCharactersFromEntities“ ist eine Sicherheitsmaßnahme, die XML-Bombenangriffe verhindert, indem sie begrenzt, wie viel Entitätserweiterung stattfinden kann.

Schließlich erstellen wir einen XmlReader mit diesen Einstellungen und verwenden SyndicationFeed.Load, um das XML in ein stark typisiertes SyndicationFeed-Objekt zu analysieren. Dies gibt uns Zugriff auf die Metadaten des Feeds und alle seine Elemente über nette C#-Eigenschaften anstelle der reinen XML-Navigation.

Mehrere Feeds mit Fehlerbehandlung abrufen

In der realen Welt schlagen Netzwerkanfragen fehl. Server fallen aus, es kommt zu Zeitüberschreitungen bei Verbindungen und XML kann fehlerhaft sein. Wir müssen diese Fälle mit Würde behandeln. So rufen wir alle unsere Feeds ab und bleiben gleichzeitig ausfallsicher:

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

Wir unterhalten hier zwei Sammlungen. Die allArticles-Liste enthält alle von uns gefundenen Artikel sowie den Feed, aus dem sie stammen. Das seenUrls HashSet verfolgt, welche Artikel-URLs wir bereits gesehen haben, und hilft uns, Duplikate zu vermeiden.

Wir durchlaufen jede Feed-URL und schließen den Abrufvorgang in einen Try-Catch-Block ein. Wenn das Abrufen eines bestimmten Feeds fehlschlägt – möglicherweise ist der Server vorübergehend ausgefallen – protokollieren wir eine Warnung und fahren mit dem nächsten Feed fort. Auf diese Weise hindert uns ein Problem mit einem Feed nicht daran, die anderen zu verarbeiten.

Für jeden erfolgreich abgerufenen Feed durchlaufen wir seine Elemente. Wir extrahieren die Artikel-URL aus der Link-Sammlung des Artikels. Die HashSet.Add-Methode gibt „false“ zurück, wenn die URL bereits im Satz vorhanden ist, was perfekt für unsere Deduplizierungslogik ist. Wir nehmen den Artikel nur dann in unsere Liste auf, wenn er neu ist.

Wir speichern die Feed-URL zusammen mit jedem Artikel, da diese Informationen später nützlich sein könnten – beispielsweise möchten wir zu Debug- oder Protokollierungszwecken wissen, aus welchem spezifischen Feed ein Artikel stammt.

Umgang mit Duplikaten und Verfolgungsstatus

Die Herausforderung der Deduplizierung

Wie ich bereits erwähnt habe, verfügt Microsoft DevBlogs über eine hierarchische Feed-Struktur, die eine interessante Herausforderung darstellt. Wenn ein .NET-Teammitglied einen Artikel beispielsweise über Leistungsverbesserungen in .NET 10 veröffentlicht, wird dieser Artikel wahrscheinlich sowohl im Haupt-DevBlogs-Feed als auch im .NET-spezifischen Feed erscheinen. Manchmal erscheint es sogar im Visual Studio-Feed, wenn es sich auf IDE-Funktionen bezieht.

Wenn wir naiv jeden Artikel aus jedem Feed verarbeiten würden, würden wir am Ende denselben Artikel mehrmals analysieren und veröffentlichen. Das würde API-Aufrufe an Azure OpenAI verschwenden, unser Telegram mit doppelten Benachrichtigungen spammen und möglicherweise unsere Follower verärgern, wenn wir Duplikate posten.Die Lösung ist die URL-basierte Deduplizierung. Jeder Artikel hat eine eindeutige URL, sodass wir diese als Kennung verwenden können. Die HashSet-Datenstruktur ist dafür perfekt, da sie O(1)-Suchzeit bietet und Duplikate automatisch verhindert. Wenn wir versuchen, eine URL hinzuzufügen, die bereits im Satz enthalten ist, gibt die Add-Methode einfach „false“ zurück und weist uns so darauf hin, dass wir diesen Artikel überspringen sollten.

Persistenter Zustand mit Markdown

Die Deduplizierung verarbeitet Duplikate innerhalb eines einzigen Durchlaufs, aber wie sieht es mit mehreren Durchläufen aus? Wenn unsere Anwendung alle sechs Stunden ausgeführt wird, müssen wir uns merken, welche Artikel wir bereits verarbeitet haben, damit wir sie nicht erneut bearbeiten.

Ich habe mich entschieden, diesen Status in einer Markdown-Datei namens „posted-articles.md“ zu speichern. Warum Abschlag? Ein paar Gründe. Erstens ist es für Menschen lesbar. Ich kann die Datei öffnen und sofort sehen, welche Artikel ich geteilt habe. Zweitens ist es versioniert. Da sich diese Datei in unserem Git-Repository befindet, verfüge ich über einen vollständigen Verlauf der Artikelverarbeitung. Drittens dient es der Dokumentation. Jeder, der sich das Repository ansieht, kann sehen, was die Anwendung getan hat.

Das Format dieser Datei ist einfach. Es enthält einen Header, einen Zeitstempel, der angibt, wann die Anwendung zuletzt ausgeführt wurde, und dann eine Liste von Artikeln im 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)

Laden und Analysieren der Tracking-Datei

Um zu überprüfen, ob wir einen Artikel bereits verarbeitet haben, müssen wir diese Datei laden und die URLs extrahieren. Hier ist die Funktion, die dies tut:

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

Diese Funktion gibt ein HashSet zurück, das alle URLs enthält, die wir bereits verarbeitet haben. Wir prüfen zunächst, ob die Datei vorhanden ist. Beim ersten Start ist dies nicht der Fall, sodass wir einen leeren Satz zurückgeben.

Für jede Zeile in der Datei verwenden wir einen regulären Ausdruck, um die URL aus dem Markdown-Link-Format zu extrahieren. Der reguläre Ausdruck $([^)]+)$ stimmt mit allem überein, was in Klammern steht. Dort speichern Markdown-Links ihre URLs.

Dann kommt ein wichtiger Schritt: die URL-Normalisierung. URLs für denselben Artikel können im Format variieren. Der RSS-Feed gibt uns möglicherweise https://devblogs.microsoft.com/dotnet/article, aber unserer gespeicherten Version ist ein Tracking-Parameter angehängt: https://devblogs.microsoft.com/dotnet/article?wt.mc_id=DT-MVP-5004972. Einige URLs haben abschließende Schrägstriche, andere nicht.

Um dies zu bewältigen, entfernen wir alle Abfrageparameter (alles nach dem ?) und entfernen abschließende Schrägstriche. Durch diese Normalisierung wird sichergestellt, dass wir Artikel auch dann als Duplikate erkennen, wenn sich ihre URLs auf diese oberflächliche Weise unterscheiden.

Neue Artikel speichern

Wenn wir einen Artikel erfolgreich verarbeiten, müssen wir ihn zu unserer Tracking-Datei hinzufügen:

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

Diese Funktion erstellt einen Eintrag im Markdown-Format mit dem Titel des Artikels als Link, gefolgt von Zeitstempeln, die angeben, wann wir ihn gepostet haben und wann er ursprünglich veröffentlicht wurde. Wenn die Datei noch nicht existiert, erstellen wir sie zunächst mit einem Header.

Die KI-Analyse-Engine

Den semantischen Kernel verstehenNun kommen wir zum spannendsten Teil unserer Anwendung – der KI-Analyse. Semantic Kernel ist das Open-Source-SDK von Microsoft zur Integration großer Sprachmodelle in Anwendungen. Es ist mehr als nur ein Wrapper für API-Aufrufe. Es bietet einen Rahmen für die Erstellung anspruchsvoller KI-Anwendungen mit Funktionen wie Plugins, Planern und Speicher.

Für unseren Anwendungsfall verwenden wir die Chat-Vervollständigungsfunktionen von Semantic Kernel. Wir senden eine Eingabeaufforderung an Azure OpenAI und das Modell analysiert unseren Artikel und generiert eine Antwort. Der semantische Kernel übernimmt die gesamte Komplexität der API-Authentifizierung, Anforderungsformatierung und Antwortanalyse.

Einrichten des Artikelanalysators

Schauen wir uns an, wie wir unsere Analyseklasse einrichten:

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 verwendet ein Builder-Muster für die Konfiguration. Wir erstellen einen KernelBuilder, fügen unseren Azure OpenAI-Chat-Abschlussdienst mit den erforderlichen Anmeldeinformationen hinzu und erstellen dann den Kernel. Aus dem erstellten Kernel rufen wir die IChatCompletionService-Schnittstelle ab, die wir zum Senden von Eingabeaufforderungen und zum Empfangen von Antworten verwenden.

Der Konstruktor benötigt drei Parameter: den Azure OpenAI-Endpunkt (etwa https://your-resource.openai.azure.com/), Ihren API-Schlüssel und den Bereitstellungsnamen (etwa gpt-4o). Diese werden von Umgebungsvariablen übergeben, um unsere Anmeldeinformationen zu schützen.

Die perfekte Eingabeaufforderung erstellen

Die Eingabeaufforderung, die wir an die KI senden, ist entscheidend. Eine gut gestaltete Eingabeaufforderung führt zu konsistenten, qualitativ hochwertigen Ergebnissen. Eine vage oder schlecht strukturierte Eingabeaufforderung führt zu inkonsistenten, mittelmäßigen Ergebnissen. Ich habe viel Zeit damit verbracht, diese Eingabeaufforderung zu durchlaufen, um Ergebnisse zu erhalten, mit denen ich zufrieden bin:

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]
 """;

Lassen Sie mich hier die Designentscheidungen erläutern. Wir beginnen damit, der KI eine klare Rolle zuzuweisen: „Sie sind ein professioneller Tech-Content-Analyst und LinkedIn-Content-Ersteller.“ Dadurch wird das Modell darauf vorbereitet, mit dem passenden Stil und der passenden Stimme zu reagieren.

Wir stellen den gesamten Kontext bereit, den die KI benötigt: Artikeltitel, Autor, URL, Tags aus dem RSS-Feed und den vollständigen Artikelinhalt. Je mehr Kontext wir angeben, desto besser wird die Analyse sein.

Dann legen wir genau fest, was wir zurückhaben wollen. Ich bitte um vier Dinge: eine Zusammenfassung, Schlüsselthemen, eine Erklärung zur Relevanz und einen LinkedIn-Beitrag. Speziell für den LinkedIn-Beitrag gebe ich detaillierte Anweisungen dazu, was einen guten Beitrag ausmacht – er sollte einen Haken haben, den Wert hervorheben, einen Call-to-Action enthalten, Emojis angemessen verwenden und einen professionellen Ton beibehalten.

Ebenso wichtig sind die negativen Anweisungen. Ich sage der KI ausdrücklich, dass sie KEINE Hashtags oder die URL in den Beitrag einfügen soll. Warum? Weil ich diese separat hinzufüge und wenn die KI sie einbeziehen würde, hätte ich Duplikate. Diese Art der expliziten Anweisung verhindert häufige Fehler.

Abschließend lege ich das genaue Ausgabeformat fest. Indem ich nach Abschnitten frage, die mit ##-Überschriften gekennzeichnet sind, erleichtere ich die programmgesteuerte Analyse der Antwort. Die KI ist sehr gut darin, Formatierungsanweisungen zu befolgen, und diese Konsistenz macht unseren Parsing-Code einfacher und zuverlässiger.

Ausführen der Analyse

So haben wir alles zusammengestellt:

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);
}
```Wir extrahieren zunächst sauberen Text aus dem HTML-Inhalt (ich erkläre dies im nächsten Abschnitt). Dann kürzen wir den Inhalt, wenn er zu lang ist. Für große Sprachmodelle gelten Token-Grenzwerte, die bei sehr langen Artikeln möglicherweise überschritten werden. Durch die Begrenzung auf 8000 Zeichen stellen wir sicher, dass wir innerhalb der Grenzen bleiben und dennoch einen umfassenden Kontext bieten.

Wir erstellen ein ChatHistory-Objekt und fügen unsere Eingabeaufforderung als Benutzernachricht hinzu. Dies ist die Abstraktion des Semantic Kernels für chatbasierte Interaktionen. Wir senden dies an den Chat-Abschlussdienst und erhalten eine Antwort zurück. Abschließend analysieren wir die Antwort, um die einzelnen Abschnitte zu extrahieren.

### Analysieren der KI-Antwort

Die KI gibt ihre Antwort als Text zurück, der mit unserer angeforderten Struktur formatiert ist. Wir müssen dies in einzelne Felder analysieren:

```csharp
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;
}

Wir teilen die Antwort durch die ##-Markierungen auf, wodurch wir jeden Abschnitt erhalten. Für jeden Abschnitt teilen wir ihn durch eine neue Zeile auf, um die Kopfzeile vom Inhalt zu trennen. Anschließend verwenden wir eine Switch-Anweisung, um den Inhalt jedes Abschnitts der entsprechenden Eigenschaft zuzuweisen.

Wir speichern auch die rohe, ungeparste Antwort. Dies ist beim Debuggen nützlich – wenn beim Parsen etwas schief geht, können wir sehen, was die KI tatsächlich zurückgegeben hat.

Inhalte aus HTML extrahieren

Warum wir HTML bereinigen müssen

Wenn wir einen Artikel aus einem Blog abrufen, erhalten wir den vollständigen HTML-Code der Seite. Dazu gehört viel mehr als nur der Artikelinhalt – es gibt Navigationsmenüs, Kopf- und Fußzeilen, Seitenleisten, Widgets für verwandte Artikel, Kommentarabschnitte, Skripte für Analyse und Nachverfolgung, Stylesheets und alle möglichen anderen Elemente.

Wenn wir das alles an unsere KI schicken würden, würden mehrere schlimme Dinge passieren. Die KI müsste eine Menge irrelevanten Text verarbeiten, was Token verschwendet und die Analyse möglicherweise verwirren würde. Der Navigations- und Fußzeilentext wird möglicherweise in die Zusammenfassung einbezogen. Skripte und CSS würden als Inhalte behandelt, was die Analyse weiter verunreinigt.

Wir müssen nur den Artikelinhalt extrahieren – den Teil, den ein menschlicher Leser tatsächlich lesen würde.

Verwenden von HtmlAgilityPack

HtmlAgilityPack ist eine robuste HTML-Parsing-Bibliothek für .NET. Im Gegensatz zu XML ist HTML häufig fehlerhaft – Tags werden möglicherweise nicht richtig geschlossen, Attribute werden möglicherweise nicht richtig in Anführungszeichen gesetzt. HtmlAgilityPack handhabt all dies elegant und gibt uns eine DOM-ähnliche Struktur, die wir abfragen und bearbeiten können.

Hier ist unsere Extraktionsfunktion:

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

Wir laden den HTML-Code in ein HtmlDocument, das ihn in eine Baumstruktur analysiert. Dann verwenden wir XPath, um alle Knoten auszuwählen, die wir entfernen möchten. Der XPath-Ausdruck //script|//style|//nav|//footer|//header wählt alle Skriptelemente (JavaScript-Code, den wir nicht benötigen), Stilelemente (CSS, die wir nicht benötigen), Navigationselemente (Navigationsmenüs), Fußzeilenelemente und Kopfzeilenelemente aus.

Nachdem wir diese Knoten entfernt haben, erhalten wir die InnerText-Eigenschaft, die den gesamten Textinhalt extrahiert und gleichzeitig HTML-Tags entfernt. Dies gibt uns den Klartext des Artikels.Zum Schluss bereinigen wir Leerzeichen. HTML enthält oft viele zusätzliche Leerzeichen für Formatierungszwecke – mehrere Leerzeichen, Tabulatoren, Zeilenumbrüche. Wir verwenden einen regulären Ausdruck, um eine beliebige Folge von Leerzeichen durch ein einzelnes Leerzeichen zu ersetzen, und kürzen dann das Ergebnis.

Den vollständigen Artikel abrufen

Der RSS-Feed liefert uns nur Zusammenfassungen, keinen vollständigen Artikelinhalt. Um den vollständigen Text zu erhalten, müssen wir die Webseite des Artikels abrufen:

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

Das ist ganz einfach: Wir stellen eine HTTP-GET-Anfrage an die Artikel-URL und geben die HTML-Antwort zurück. Wir verpacken es in einen Try-Catch, da Netzwerkanforderungen fehlschlagen können und wir lieber eine leere Zeichenfolge zurückgeben, als die gesamte Anwendung zum Absturz zu bringen.

Permanente Dokumentation erstellen

Warum Markdown-Dateien generieren?

Jedes Mal, wenn wir einen Artikel analysieren, erstellen wir eine detaillierte Markdown-Datei, die diese Analyse dokumentiert. Dies dient mehreren Zwecken.

Zunächst wird ein durchsuchbares Archiv erstellt. Mit der Zeit bauen Sie eine Sammlung analysierter Artikel auf. Sie können diese Dateien durchsuchen, um frühere Inhalte zu bestimmten Themen zu finden.

Zweitens sorgt es für Transparenz. Sie können genau sehen, was die KI für jeden Artikel generiert hat, einschließlich der vollständigen Analyse und des LinkedIn-Beitrags.

Drittens ist es nützlich zum Debuggen. Wenn bei einem Beitrag etwas schief geht, können Sie sich die Markdown-Datei ansehen, um zu verstehen, was passiert ist.

Die Markdown-Generator-Klasse

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

Der Konstruktor nimmt einen Ausgabeverzeichnispfad und erstellt ihn, falls er nicht vorhanden ist. Die GenerateMarkdownFile-Methode nimmt ein ArticleAnalysis-Objekt und erstellt ein schön formatiertes Markdown-Dokument.

Der Dateiname enthält das Datum und eine bereinigte Version des Titels. Dadurch lassen sich Dateien einfach chronologisch sortieren und auf einen Blick identifizieren.

Umgang mit unsicheren Dateinamen

Artikeltitel können Zeichen enthalten, die in Dateinamen nicht zulässig sind – beispielsweise Doppelpunkte, Schrägstriche, Fragezeichen und Anführungszeichen. Wir müssen diese desinfizieren:

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

Wir verwenden Path.GetInvalidFileNameChars(), um eine Liste von Zeichen abzurufen, die auf dem aktuellen Betriebssystem nicht in Dateinamen vorkommen dürfen. Wir filtern diese heraus, ersetzen Leerzeichen zur besseren Lesbarkeit durch Bindestriche, begrenzen die Länge auf 50 Zeichen und wandeln sie aus Konsistenzgründen in Kleinbuchstaben um.

Einrichten von Telegrammbenachrichtigungen

Warum ich Telegram gewählt habe

Für die Benachrichtigungskomponente habe ich mehrere Optionen in Betracht gezogen – E-Mail, SMS, Slack, Discord und Telegram. Letztendlich habe ich mich aus mehreren Gründen für Telegram entschieden.

Die API ist völlig kostenlos und weist bei angemessener Nutzung keine Ratenbeschränkungen auf. Bei vielen Benachrichtigungsdiensten ist die Anzahl der Nachrichten, die Sie kostenlos senden können, begrenzt, aber Telegram beschränkt Bot-Nachrichten nicht auf einzelne Benutzer.

Die Bot-API ist unglaublich einfach. Es handelt sich lediglich um HTTP-Anfragen mit JSON-Nutzlasten. Keine komplexen Authentifizierungsabläufe, keine Webhooks für grundlegende Funktionen erforderlich.Telegram funktioniert überall – auf meinem Telefon, auf meinem Desktop, in meinem Webbrowser. Ich kann Benachrichtigungen empfangen, wo immer ich bin, und sofort reagieren.

Nachrichten unterstützen umfangreiche Formatierung. Ich kann Fettdruck, Kursivschrift und sogar Codeblöcke verwenden, um meine Benachrichtigungen besser lesbar zu machen.

Erstellen Sie Ihren Telegram-Bot

Das Einrichten eines Telegram-Bots ist überraschend einfach. Öffnen Sie Telegram und suchen Sie nach @BotFather – dies ist der offizielle Bot von Telegram zum Erstellen und Verwalten von Bots. Starten Sie ein Gespräch mit BotFather und senden Sie den Befehl /newbot. BotFather fragt Sie nach einem Namen für Ihren Bot (dies ist der Anzeigename) und einem Benutzernamen (dieser muss eindeutig sein und auf „bot“ enden). Sobald Sie diese bereitgestellt haben, erstellt BotFather Ihren Bot und gibt Ihnen ein API-Token. Dieses Token ist wie ein Passwort – halten Sie es geheim und geben Sie es nicht an öffentliche Repositorys weiter.

Um Ihre Chat-ID zu finden, damit der Bot weiß, wohin er Nachrichten senden soll, beginnen Sie eine Konversation mit Ihrem neuen Bot, indem Sie danach suchen und auf Start klicken. Greifen Sie dann in Ihrem Browser oder mit Curl auf die URL https://api.telegram.org/bot<YOUR_TOKEN>/getUpdates zu. Suchen Sie in der Antwort nach dem Objekt chat – das Feld id ist Ihre Chat-ID.

Senden von Nachrichten über die API

Hier ist unsere Funktion zum Versenden von Telegram-Nachrichten:

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

Die Telegram Bot API ist REST-basiert. Wir stellen eine POST-Anfrage an den sendMessage-Endpunkt mit einem JSON-Body, der die Chat-ID (wohin gesendet werden soll), den Nachrichtentext (was gesendet werden soll) und optional einen Analysemodus (zur Formatierung) enthält.

Wenn wir parse_mode auf „HTML“ setzen, können wir in unseren Nachrichten grundlegende HTML-Tags verwenden – Dinge wie <b>bold</b> und <i>italic</i>. Dies kann die Lesbarkeit von Benachrichtigungen verbessern, obwohl wir für unseren aktuellen Anwendungsfall Klartext senden.

Wenn die Anfrage fehlschlägt, lösen wir eine Ausnahme mit Details zum Fehler aus. Dies hilft beim Debuggen, wenn etwas nicht funktioniert.

Konfigurieren der Anwendung

Umgebungsvariablen

Unsere Anwendung benötigt mehrere vertrauliche Informationen – API-Schlüssel, Bot-Tokens und Endpunkt-URLs. Wir sollten diese niemals fest codieren oder der Versionskontrolle unterwerfen. Stattdessen verwenden wir Umgebungsvariablen, die in jeder Umgebung, in der die Anwendung ausgeführt wird, sicher festgelegt werden können.

Für Telegram benötigen wir TELEGRAM_BOT_TOKEN (das Token, das BotFather Ihnen gegeben hat) und TELEGRAM_CHAT_ID (Ihre Chat-ID, an die Nachrichten gesendet werden sollen).

Für Azure OpenAI benötigen wir AZURE_OPENAI_ENDPOINT (die URL Ihrer Ressource), AZURE_OPENAI_API_KEY (Ihren API-Schlüssel) und AZURE_OPENAI_DEPLOYMENT (den Namen Ihres bereitgestellten Modells, z. B. „gpt-4o“).

Konfiguration im Code laden

So laden wir diese Werte beim Anwendungsstart:

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

Wir verwenden Environment.GetEnvironmentVariable, um jeden Wert zu lesen. Für den Bereitstellungsnamen stellen wir den Standardwert „gpt-4o“ bereit, wenn kein Wert festgelegt ist.

Anschließend prüfen wir, ob die KI-Analyse aktiviert werden sollte, indem wir überprüfen, ob wir sowohl einen Endpunkt als auch einen API-Schlüssel haben. Dadurch kann die Anwendung in einem herabgesetzten Modus ausgeführt werden, wenn Azure OpenAI nicht konfiguriert ist – sie ruft weiterhin Feeds ab und verfolgt Artikel, nur ohne die KI-Analyse.###Anmutige Erniedrigung

Dieses Konzept der würdevollen Degradierung ist wichtig. Wir möchten nicht, dass die Anwendung abstürzt, nur weil eine optionale Funktion nicht konfiguriert ist:

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

Wenn KI aktiviert ist, erstellen wir den Analysator und Markdown-Generator. Wenn nicht, lassen wir sie null und überspringen die KI-bezogenen Schritte während der Verarbeitung. Auch ohne die KI-Verbesserung bietet die Anwendung weiterhin einen Mehrwert durch das Abrufen von Feeds und das Senden grundlegender Benachrichtigungen.

Automatisieren mit GitHub-Aktionen

Warum GitHub-Aktionen

Die wahre Stärke dieser Lösung liegt in der Automatisierung. Wir möchten die Anwendung nicht alle paar Stunden manuell ausführen, sondern automatisch im Hintergrund ausführen.

GitHub Actions ist dafür perfekt. Es ist in GitHub integriert, sodass kein zusätzlicher Dienst eingerichtet werden muss. Es ist für öffentliche Repositories kostenlos und beinhaltet großzügige Freiminuten für private Repositories. Es kann nach einem Zeitplan ausgeführt werden und unsere Anwendung in regelmäßigen Abständen auslösen. Es verfügt über eine integrierte Geheimnisverwaltung zur sicheren Speicherung unserer API-Schlüssel. Und es kann Änderungen zurück in das Repository übertragen und so unsere Tracking-Datei auf dem neuesten Stand halten.

Die Workflow-Datei

Erstellen Sie unter .github/workflows/fetch-and-notify.yml eine Datei mit folgendem Inhalt:

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

Lassen Sie mich jeden Teil erklären. Der Abschnitt „on“ definiert, wann der Workflow ausgeführt wird. Der Zeitplanauslöser verwendet Cron-Syntax – 0 */6 * * * bedeutet „zu Minute 0 jeder 6. Stunde“. Der Workflow wird also um Mitternacht, 6:00 Uhr, 12:00 Uhr und 18:00 Uhr UTC ausgeführt. Der Workflow_dispatch-Trigger ermöglicht manuelle Ausführungen über die GitHub-Benutzeroberfläche, was zum Testen nützlich ist.

Der Job läuft auf ubuntu-latest, einer virtuellen Linux-Maschine. Wir überprüfen unser Repository, richten .NET 9 ein, stellen NuGet-Pakete wieder her und erstellen das Projekt.

Im Schritt „Anwendung ausführen“ geschieht die Magie. Wir übergeben unsere Geheimnisse als Umgebungsvariablen mithilfe der Syntax ${{ Secrets.SECRET_NAME }}. Diese Geheimnisse werden sicher in GitHub gespeichert und niemals in Protokollen offengelegt.

Abschließend übertragen wir alle Änderungen zurück in das Repository. Wir konfigurieren Git mit einer Bot-Identität, prüfen, ob es Änderungen an unserer Tracking-Datei oder dem Verzeichnis der generierten Beiträge gibt, und wenn ja, erstellen wir einen Commit und pushen ihn.

Geheimnisse einrichten

Um Geheimnisse zu Ihrem GitHub-Repository hinzuzufügen, gehen Sie zu den Einstellungen Ihres Repositorys, dann zu Geheimnissen und Variablen und dann zu Aktionen. Klicken Sie auf „Neues Repository-Geheimnis“ und fügen Sie alle Ihre Umgebungsvariablen hinzu. Die Namen müssen genau mit denen übereinstimmen, auf die wir in der Workflow-Datei verweisen.

Zusammenfassung

Was wir gebaut haben

Wenn wir auf alles zurückblicken, was wir besprochen haben, haben wir einen umfassenden, KI-gestützten RSS-Feed-Aggregator entwickelt, der einen früher mühsamen manuellen Prozess automatisiert. Die Anwendung überwacht automatisch sieben Microsoft DevBlogs-Feeds und erfasst jeden neuen Artikel, sobald er veröffentlicht wird. Es bewältigt die Komplexität der Deduplizierung und erkennt, wenn derselbe Artikel in mehreren Feeds erscheint.Die auf Semantic Kernel und Azure OpenAI basierende KI-Analyse liest und versteht Artikelinhalte, erstellt Zusammenfassungen, identifiziert Schlüsselthemen und erläutert die Relevanz – alles automatisch. Am wichtigsten ist, dass dadurch ansprechende LinkedIn-Beiträge erstellt werden, die ich mit minimalem Bearbeitungsaufwand teilen kann.

Durch die Telegram-Integration werde ich auf meinem Telefon benachrichtigt, wenn es neue Inhalte zu überprüfen gibt. Ich kann einen Blick auf die Nachricht werfen, entscheiden, ob ich sie teilen möchte, und sofort handeln.

Und da es auf GitHub Actions nach einem Zeitplan ausgeführt wird, muss ich nicht daran denken, etwas zu tun. Das System arbeitet im Hintergrund und ich greife nur dann zu, wenn es etwas gibt, das es wert ist, geteilt zu werden.

Die Technologien, die es möglich gemacht haben

Dieses Projekt vereinte mehrere Technologien, die jeweils eine entscheidende Rolle spielten. .NET 9 bot mit seinen modernen Sprachfunktionen und seiner hervorragenden Leistung eine solide Grundlage. Semantic Kernel machte die KI-Integration unkompliziert und bewältigte die gesamte Komplexität von API-Aufrufen und Antwortmanagement. Azure OpenAI lieferte die Intelligenz – die Fähigkeit, technische Inhalte tatsächlich zu verstehen und zu analysieren. HtmlAgilityPack löste das komplizierte Problem, sauberen Text aus Webseiten zu extrahieren. System.ServiceModel.Syndication machte das Parsen von RSS zum Kinderspiel. Die Telegram Bot API lieferte uns kostenlose und zuverlässige Benachrichtigungen. Und GitHub Actions verknüpfte alles mit einer automatisierten, geplanten Ausführung.

Über Kosten nachdenken

Eine Frage, die Sie möglicherweise haben, ist: Wie viel kostet der Betrieb? Die Antwort lautet: Gar nicht viel.

Telegram ist völlig kostenlos – es fallen keine Gebühren für das Versenden von Nachrichten über Ihren Bot an.

GitHub Actions ist für öffentliche Repositories kostenlos. Für private Repositories erhalten Sie im kostenlosen Kontingent 2.000 Minuten pro Monat, was für unseren Anwendungsfall mehr als ausreichend ist.

Azure OpenAI ist die einzige kostenpflichtige Komponente und die Kosten sind minimal. Mit GPT-4o kostet die Analyse eines typischen Blogartikels zwischen einem und drei Cent. Selbst wenn Sie Dutzende Artikel pro Monat verarbeiten, fallen für Sie KI-Kosten von weniger als einem Dollar an.

Wohin Sie das als nächstes bringen könnten

Obwohl diese Lösung für meine Anforderungen hervorragend funktioniert, gibt es viele Möglichkeiten, sie zu erweitern. Sie könnten Unterstützung für mehrere soziale Plattformen hinzufügen – vielleicht zusätzlich zu LinkedIn auch auf Twitter/X, Mastodon oder Bluesky posten. Sie könnten eine Stimmungsanalyse implementieren, um den Ton von Artikeln im Laufe der Zeit zu verfolgen und Trends zu erkennen. Sie können unterschiedliche Eingabeaufforderungsvorlagen für unterschiedliche Feeds zulassen und so unterschiedliche Beitragsstile für unterschiedliche Themen generieren. Sie könnten ein Web-Dashboard zum Überprüfen und Verwalten von Beiträgen erstellen, anstatt Telegram zu verwenden. Sie können Engagement-Metriken für veröffentlichte Inhalte verfolgen, um zu sehen, welche Themen bei Ihrem Publikum am meisten Anklang finden.

Abschließende GedankenWas ich an diesem Projekt am meisten liebe, ist, dass es eine Philosophie verkörpert, an die ich fest glaube: Die Automatisierung sollte die mühsamen Teile erledigen, während die kreativen und entscheidungsrelevanten Teile den Menschen überlassen werden. Das System übernimmt die ganze Arbeit – Abrufen, Parsen, Analysieren, Generieren –, aber ich überprüfe trotzdem alles, bevor ich es teile. Die von der KI generierten Beiträge sind Ausgangspunkte, die ich anpassen und personalisieren kann.

Durch die Kombination der Leistungsfähigkeit von .NET, Semantic Kernel und Azure OpenAI haben wir ein Tool geschaffen, das jede Woche Stunden manueller Arbeit einspart und gleichzeitig Qualität und Konsistenz beibehält. Es ist die Art praktischer Automatisierung, die im täglichen Leben einen echten Unterschied macht.

Wenn Sie etwas Ähnliches bauen oder Ideen für Verbesserungen haben, würde ich gerne davon hören. Kontaktieren Sie uns gerne auf LinkedIn!

Viel Spaß beim Programmieren und frohe Weihnachten! 🎄

Erstellen von Multi-Agent-KI-Systemen mit dem Agent Framework von Microsoft

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

Einführung

Wir sind in die Ära der Multiagenten-KI-Systeme eingetreten. Anstelle einer einzigen monolithischen KI, die alles erledigt, setzt die Branche auf spezialisierte Agenten, die zusammenarbeiten, um komplexe Probleme zu lösen – ähnlich wie ein gut organisiertes Expertenteam. Ein Agent recherchiert, ein anderer analysiert, ein dritter schreibt und ein Koordinator hält alle auf dem Laufenden.

Wenn Sie mit großen Sprachmodellen gearbeitet haben, haben Sie wahrscheinlich die Grenze dessen erreicht, was eine einzelne Eingabeaufforderung leisten kann. Kontextfenster füllen sich, Anweisungen geraten durcheinander und die Qualität nimmt ab. Multi-Agenten-Architekturen lösen dieses Problem, indem sie komplexe Aufgaben in gezielte Verantwortlichkeiten zerlegen, wobei jeder Agent ein Experte für eine Sache ist.

Das Agent Framework von Microsoft, Teil des umfassenderen Semantic-Kernel-Ökosystems, bietet .NET-Entwicklern ein erstklassiges Toolkit zum Aufbau genau dieser Art von Systemen. In diesem Beitrag gehen wir von Null auf eine voll funktionsfähige Multi-Agent-Pipeline über und behandeln dabei die Kernkonzepte, Orchestrierungsmuster und den praktischen Code, den Sie für den Einstieg benötigen.

Was ist das Agent Framework von Microsoft?

Das Agent Framework ist Microsofts Antwort auf die Erstellung, Orchestrierung und Bereitstellung von KI-Agenten und Multiagentensystemen in .NET. Es liegt neben dem Semantic Kernel, der seit 2023 das Open-Source-SDK von Microsoft für die KI-Orchestrierung ist, und ist tief in diesen integriert.

Stellen Sie sich das so vor: Semantic Kernel stellt Ihnen die Grundelemente (Kernel, Plugins, Speicher, Planer) zur Verfügung, während das Agent Framework Ihnen Abstraktionen auf höherer Ebene bietet, die speziell für die Kommunikation und Koordination zwischen Agenten entwickelt wurden.

Das Framework unterstützt mehrere Modellanbieter, darunter Azure OpenAI, OpenAI und auf Azure AI Foundry gehostete Modelle. Das Design ist modellunabhängig, aber tief in das Azure-Ökosystem integriert, was es besonders für Unternehmensszenarien attraktiv macht.

Zu den wichtigsten Fähigkeiten gehören:

Mehrere Agententypen: ChatCompletionAgent, OpenAIAssistantAgent und AzureAIAgent für verschiedene Backends
Orchestrierungsmuster: Sequentielle, gleichzeitige, Übergabe- und Gruppenchat-Workflows
Plugin-Ökosystem: Erweitern Sie Agenten mit nativen C#-Funktionen, OpenAPI-Spezifikationen und Model Context Protocol (MCP)-Tools
Konversationsmanagement: Integrierte Threading-, Verlaufsverwaltungs- und Beendigungsstrategien
Beobachtbarkeit: Integration mit OpenTelemetry zur Verfolgung von Agenteninteraktionen

Schlüsselkonzepte

Bevor wir Code schreiben, legen wir das Vokabular fest. Das Agent Framework dreht sich um einige Kernabstraktionen.

Agenten

Ein Agent ist eine Entität, die von einem KI-Modell unterstützt wird und mit spezifischen Anweisungen (einer Systemaufforderung), einem Namen und optional einer Reihe von Plugins oder Tools konfiguriert ist. Jeder Agent ist ein Spezialist – Sie definieren, was er weiß, was er kann und wie er sich verhalten soll.

ChatCompletionAgentDer einfachste Agententyp. Es umschließt einen Chat-Abschlussendpunkt (Azure OpenAI, OpenAI usw.) und verwaltet eine Konversation. Zwischen Aufrufen ist es zustandslos – Sie geben den Verlauf an und es antwortet. Dies macht es leicht und einfach zu überlegen.

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

Dieser Agententyp nutzt die OpenAI Assistants-API, die den serverseitigen Konversationsstatus, die Dateiverwaltung und die Codeinterpretation bereitstellt. Es ist umfangreicher, bietet Ihnen aber persistente Threads und integrierte Tools wie Code-Interpreter und Dateisuche.

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

###AgentGroupChat

Das ist der Orchestrator. AgentGroupChat verwaltet Multi-Runden-Gespräche zwischen mehreren Agenten und steuert, wer als nächstes spricht, wann das Gespräch endet und wie der Verlauf geteilt wird. Hier entsteht die Magie der Multi-Agenten-Zusammenarbeit.

Orchestrierungsmuster

Das Framework unterstützt vier primäre Orchestrierungsmuster, die jeweils für unterschiedliche Probleme geeignet sind.

Sequentiell

Agenten werden nacheinander in einer definierten Reihenfolge ausgeführt. Die Ausgabe von Agent A wird an Agent B weitergeleitet, dessen Ausgabe an Agent C weitergeleitet wird. Dies ist ideal für Pipelines: Entwurf → Überprüfung → Bearbeiten → Veröffentlichen.

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

Gleichzeitig

Mehrere Agenten arbeiten gleichzeitig an derselben Eingabe. Sie fächern die Arbeit auf und aggregieren dann die Ergebnisse. Ideal, um unterschiedliche Perspektiven zu erhalten – zum Beispiel, wenn drei Prüfer denselben Pull-Request prüfen.

Übergabe

Ein Agent entscheidet basierend auf dem Gesprächskontext, die Kontrolle an einen anderen Agenten zu übertragen. Dies ähnelt der Arbeitsweise eines Kundendienstteams: Der Mitarbeiter an der Front bearbeitet grundlegende Fragen und leitet sie bei Bedarf an Spezialisten weiter.

Gruppenchat

Mehrere Agenten nehmen an einem offenen Gespräch teil und wechseln sich auf der Grundlage einer Auswahlstrategie ab. Die Klasse AgentGroupChat implementiert dieses Muster mit konfigurierbarer Turn-Taking- und Beendigungslogik.

Aufbau Ihres ersten Agenten

Lassen Sie uns praktisch werden. Hier erfahren Sie Schritt für Schritt, wie Sie Ihren ersten Agenten aufbauen.

Voraussetzungen

Sie benötigen:

.NET 9 SDK – Eine Azure OpenAI-Ressource mit einem bereitgestellten Modell (z. B. gpt-4o)
Visual Studio oder VS Code

Einrichten des Projekts

Erstellen Sie eine neue Konsolenanwendung und installieren Sie die erforderlichen Pakete:

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

Erstellen eines einfachen Agenten

Richten Sie zunächst den Kernel mit Ihrer Azure OpenAI-Konfiguration ein:

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();

Erstellen Sie nun einen Agenten und rufen Sie ihn auf:

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

Das ist es. Sie haben einen Arbeitsagenten. Doch die wahre Stärke entfaltet sich, wenn Agenten zusammenarbeiten.

Multi-Agent-Orchestrierung mit AgentGroupChat

Lassen Sie uns etwas Interessanteres erstellen – einen Gruppenchat, in dem mehrere Agenten zusammenarbeiten. Die Klasse AgentGroupChat verwaltet den Gesprächsablauf, einschließlich der Frage, wer als nächstes spricht und wann aufgehört werden soll.

Definieren der Agenten

Wir erstellen drei Agenten: einen Autor, einen Rezensenten und einen Herausgeber.

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

Einrichten des Gruppenchats

Das AgentGroupChat benötigt zwei Schlüsselkonfigurationen: eine Auswahlstrategie (wer als nächstes spricht) und eine Beendigungsstrategie (wann soll aufgehört werden).

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

Benutzerdefinierte KündigungsstrategieDie Beendigungsstrategie definiert, wann das Gespräch endet. Hier ist ein benutzerdefiniertes, das nach dem Schlüsselwort „COMPLETE“ sucht:

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

Das Gespräch führen

Beginnen Sie das Gespräch mit einer Benutzernachricht und lassen Sie die Agenten zusammenarbeiten:

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

Der Ablauf sieht etwa so aus:

Autor erstellt einen Entwurf
Rezensent gibt Feedback
Der Autor überarbeitet basierend auf dem Feedback
Rezensent sagt „GENEHMIGT“
Redakteur poliert und sagt „VOLLSTÄNDIG“
Das Gespräch wird beendet

Dieses Hin und Her wird automatisch fortgesetzt, bis die Abbruchbedingung erfüllt ist oder MaximumIterations erreicht ist.

Plugins und Tools

Wirklich mächtig werden Agenten dann, wenn sie mit externen Systemen interagieren können. Das Agent Framework unterstützt drei Haupterweiterungsmechanismen.

Native Funktionen (Kernel-Plugins)

Sie können Agenten Zugriff auf C#-Methoden als Tools gewähren. Der Agent ruft diese Funktionen auf, wenn er feststellt, dass sie benötigt werden:

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

Registrieren Sie das Plugin im Kernel, bevor Sie den Agenten erstellen:

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 ist ein offener Standard zur Anbindung von KI-Modellen an externe Tools und Datenquellen. Das Agent Framework unterstützt MCP, was bedeutet, dass Ihre Agenten Tools verwenden können, die von jedem MCP-kompatiblen Server bereitgestellt werden. Dies öffnet die Tür zu Dateisystemen, Datenbanken, APIs und mehr – alles über eine standardisierte Schnittstelle.

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

Das ist besonders spannend, weil es bedeutet, dass Ihre Agenten nicht auf das beschränkt sind, was Sie erstellen – sie können auf ein Ökosystem von MCP-Tools zugreifen, die andere entwickeln und teilen.

Beispiel aus der Praxis: Content-Review-Pipeline

Lassen Sie uns alles mit einem praktischen Szenario zusammenstellen. Stellen Sie sich vor, Sie entwickeln ein internes Tool, das die Inhaltsüberprüfung für ein Dokumentationsteam automatisiert. Die Pipeline besteht aus vier Phasen:

Forscher – Sammelt relevante technische Informationen
Autor – Erstellt einen Entwurf basierend auf Recherchen
Prüfer – Überprüft die Richtigkeit und Vollständigkeit
Publisher – Formatiert und bereitet die endgültige Ausgabe vor

Hier ist eine komprimierte Implementierung:

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();

Diese Pipeline erzeugt einen vollständig recherchierten, geschriebenen, überprüften und formatierten Artikel – alles durch die Zusammenarbeit der Agenten. Jeder Agent konzentriert sich auf das, was er am besten kann, und der AgentGroupChat koordiniert den Arbeitsablauf.

Best Practices

Nachdem ich mehrere Multiagentensysteme erstellt habe, sind hier die Muster und Praktiken aufgeführt, die ich am wertvollsten gefunden habe.

Fehlerbehandlung

Legen Sie bei Ihrer Kündigungsstrategie immer MaximumIterations fest. Ohne sie können Agenten in Endlosschleifen geraten – insbesondere, wenn ein Prüfer weiterhin Probleme findet und ein Autor ständig Überarbeitungen ohne Verbesserung durchführt.

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

Wickeln Sie Ihre Agentenaufrufe in Try-Catch-Blöcke ein. API-Ratenbegrenzungen, Netzwerkprobleme und Modellfehler sind Realitäten von Produktionssystemen:

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

BeobachtbarkeitDas Agent Framework lässt sich in OpenTelemetry integrieren, was bedeutet, dass Sie jede Agenteninteraktion, jeden Tool-Aufruf und jede Token-Nutzung verfolgen können. Dies ist wichtig für das Debuggen von Multi-Agent-Workflows, bei denen nicht immer offensichtlich ist, welcher Agent ein Problem verursacht hat.

Richten Sie grundlegende Telemetriedaten ein, indem Sie die Semantic Kernel-Telemetriepakete hinzufügen und Ihren bevorzugten Exporter (Application Insights, Jaeger usw.) konfigurieren:

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

Kostenmanagement

Multi-Agenten-Systeme vervielfachen Ihre API-Kosten – jede Agentenrunde ist ein API-Aufruf, und Gruppenchats können viele Runden generieren. Einige Strategien, um die Kosten unter Kontrolle zu halten:

Günstigere Modelle für einfachere Agenten verwenden: Nicht jeder Agent benötigt GPT-4o. Ein Rezensent könnte mit einem kleineren Modell gut zurechtkommen, während nur der Autor das starke Modell braucht.
Verlauf begrenzen: Verwenden Sie ReducedHistoryCount in Ihren Ausführungseinstellungen, um zu begrenzen, wie viel Konversationskontext jeder Agent erhält.
Strikte Iterationsgrenzen festlegen: Verhindern Sie außer Kontrolle geratene Gespräche mit angemessenen MaximumIterations-Werten.
Wenn möglich zwischenspeichern: Wenn ein Agent dieselbe Suche wiederholt durchführt, speichern Sie die Ergebnisse in einem Plugin zwischen.

Agentendesign

Anweisungen fokussiert halten: Jeder Agent sollte eine einzige, klare Verantwortung haben. Breite Anweisungen führen bei allen Aufgaben zu einer mittelmäßigen Leistung.
Machen Sie Angaben zum Ausgabeformat: Teilen Sie den Agenten genau mit, wie sie ihre Antworten strukturieren sollen. Dies macht das Downstream-Parsing zuverlässig.
Beendigungsschlüsselwörter verwenden: Definieren Sie eindeutige Signale (wie „GENEHMIGT“ oder „ABGESCHLOSSEN“), mit denen Agenten angeben, dass sie fertig sind. Dies macht Kündigungsstrategien einfach und vorhersehbar.

Fazit

Multiagenten-KI-Systeme stellen einen grundlegenden Wandel in der Art und Weise dar, wie wir intelligente Anwendungen erstellen. Anstatt sich mit einer einzigen Eingabeaufforderung herumschlagen zu müssen, die alles erledigt, können wir Probleme in spezialisierte Rollen zerlegen und Agenten zusammenarbeiten lassen.

Das Agent Framework von Microsoft macht dies für .NET-Entwickler praktisch. Die Abstraktionen sind sauber – Agenten, Gruppenchats, Auswahl- und Kündigungsstrategien – und sie komponieren natürlich. In Kombination mit dem Plugin-Ökosystem des Semantic Kernels und dem Modellhosting von Azure verfügen Sie über einen vollständigen Stack für den Aufbau produktionstauglicher Multi-Agent-Systeme.

Das Framework befindet sich noch in der Entwicklung (viele Pakete befinden sich in der Vorschau), aber die Kernmuster sind solide und die Richtung ist klar. Wenn Sie KI-gestützte Anwendungen in .NET erstellen, ist es jetzt an der Zeit, mit Multi-Agent-Architekturen zu experimentieren.

Fangen Sie klein an – stellen Sie zwei Agenten zusammen, die bei einer einfachen Aufgabe zusammenarbeiten. Sobald Sie die Qualitätsverbesserung gegenüber Einzelagenten-Ansätzen sehen, sollten Sie alles in Agententeams aufteilen.

Viel Spaß beim Codieren!

Rendern von Roh-HTML in Blazor mit MarkupString

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

Neulich habe ich eine Komponente erstellt, die HTML rendern musste, das von einem CMS kam. Ich hatte die HTML-Zeichenfolge in einer Variablen und habe sie einfach wie @myHtml in die Vorlage eingefügt. Und natürlich hat Blazor alles umgangen und die eigentlichen Tags als Text auf der Seite dargestellt. Nicht das, was ich wollte.

Das Problem

Standardmäßig codiert Blazor jede Zeichenfolge, die Sie in einer Vorlage rendern. Wenn Sie also Folgendes haben:

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

Und du machst das:

<div>@content</div>

Auf der Seite wird anstelle von Hallo Welt der wörtliche Text <strong>Hello</strong> <em>world</em> angezeigt. Blazor tut dies absichtlich, um XSS-Angriffe zu verhindern, was das richtige Standardverhalten ist.

Die Lösung: MarkupString

Wenn Sie tatsächlich rohes HTML rendern müssen, packen Sie Ihre Zeichenfolge in ein MarkupString:

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

Und das ist es! Jetzt rendert Blazor den HTML-Code als tatsächliches Markup. Sie können es auch einer Variablen zuweisen:

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

<div>@HtmlContent</div>

Ein Beispiel aus der Praxis

Ich habe Blog-Inhalte von einer API abgerufen und musste sie in einer Vorschaukomponente rendern. Der Inhalt enthielt alle Arten von HTML – Überschriften, Codeblöcke, Links, Bilder. So ungefähr sah es aus:

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

Funktioniert perfekt. Der HTML-Code der API wird als eigentliches Markup gerendert.

Seien Sie vorsichtig mit nicht vertrauenswürdigen Inhalten

Das ist wichtig: MarkupString bereinigt den HTML-Code nicht. Es rendert alles, was Sie ihm geben, einschließlich <script>-Tags. Wenn der Inhalt also aus Benutzereingaben oder einer nicht vertrauenswürdigen Quelle stammt, müssen Sie ihn zuerst bereinigen.

In Blazor gibt es keinen integrierten HTML-Sanitizer, aber Sie können eine Bibliothek wie [HtmlSanitizer](https://github.com/mganss/HtmlSanitizer verwenden):

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>

Dadurch werden gefährliche Elemente wie <script>, onclick-Handler und andere Dinge entfernt, die nicht aus vom Benutzer bereitgestellten Inhalten gerendert werden sollen.

Wann man es verwenden sollte

Ich verwende MarkupString für:

– CMS-Inhalt oder Markdown, der serverseitig in HTML konvertiert wurde

Rich-Text-Editor-Ausgabe
Vorschau der E-Mail-Vorlagen
Alle vorgefertigten HTML-Codes aus vertrauenswürdigen Quellen

Alles, was aus Benutzereingaben stammt, muss immer zuerst bereinigt werden. Vorsicht ist besser als Nachsicht.

Ich hoffe, Ihnen hat der Beitrag gefallen! Sie können mich gerne in den sozialen Medien unter @emimontesdeoca kontaktieren.

Ressourcen

Was ist neu in EF Core 9: Die Funktionen, die Sie kennen müssen

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

Entity Framework Core 9 wurde im November 2024 zusammen mit .NET 9 ausgeliefert, und nachdem ich viel Zeit damit verbracht habe, in mehreren Projekten damit zu arbeiten, kann ich sagen, dass es eine der bedeutendsten Versionen seit langem ist. Nicht, weil es das Rad neu erfindet, sondern weil es die Bereiche aufpoliert, in denen EF Core in der Vergangenheit die meisten Reibungspunkte verursacht hat – Abfrageübersetzung, Leistung und die Arbeit mit modernen Datenmustern.

In diesem Beitrag gehe ich auf die Funktionen ein, die den größten Einfluss auf meine tägliche Arbeit hatten. Wenn Sie noch EF Core 8 (oder sogar 7) verwenden, sollte Ihnen dies ein klares Bild davon geben, was Sie auf der anderen Seite des Upgrades erwartet.

EF Core 9 im .NET 9-Ökosystem

EF Core 9 zielt auf .NET 8 und .NET 9 ab, was bedeutet, dass Sie nicht unbedingt Ihre gesamte Anwendung auf .NET 9 aktualisieren müssen, um die meisten dieser Funktionen nutzen zu können. Allerdings sind einige der AOT- und Leistungsverbesserungen eng mit .NET 9-Laufzeitänderungen verknüpft, sodass Sie das Beste daraus machen können, wenn Sie den ganzen Weg gehen.

Die Veröffentlichung folgt dem von Microsoft festgelegten ungeraden/geraden Rhythmus: Veröffentlichungen mit ungeraden Nummern (wie .NET 9) sind Standard Term Support (STS) mit 18 Monaten Support, während gerade Veröffentlichungen (wie .NET 8) Long Term Support (LTS) sind. Berücksichtigen Sie dies bei der Planung Ihres Upgrade-Zeitplans.

LINQ-Übersetzungsverbesserungen

Hier werden die meisten Entwickler den Unterschied sofort spüren. EF Core 9 hat bei der Übersetzung von LINQ-Ausdrücken in SQL erhebliche Fortschritte gemacht, die tatsächlich Sinn machen.

Bessere GroupBy-Übersetzungen

Wenn Sie jemals eine GroupBy-Abfrage in EF Core geschrieben haben und dabei clientseitige Auswertungswarnungen oder bizarres SQL erhalten haben, kennen Sie den Schmerz. EF Core 9 verarbeitet einen viel breiteren Satz von GroupBy-Szenarien direkt 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 früheren Versionen fielen Abfragen, die Aggregationen über Navigationseigenschaften innerhalb von GroupBy beinhalteten, manchmal auf die Clientauswertung zurück. EF Core 9 übersetzt dies sauber in eine einzelne SQL-Abfrage mit GROUP BY, SUM, AVG und COUNT.

Komplexe Projektionen und Unterabfragen

Auch verschachtelte Unterabfragen und komplexe Projektionen wurden erheblich verbessert. Betrachten Sie etwa Folgendes:

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 kann jetzt diesen gesamten Ausdruck in SQL übersetzen, ohne eine clientseitige Auswertung auszulösen. Die generierte Abfrage verwendet gegebenenfalls korrelierte Unterabfragen und seitliche Verknüpfungen, und der SQL-Plan ist erheblich effizienter als die Ergebnisse früherer Versionen.

Parametrisierte Primitivsammlungen

Eine der herausragenden LINQ-Verbesserungen ist die Möglichkeit, Sammlungen primitiver Werte direkt an Abfragen zu übergeben:

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

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

In EF Core 8 wurde dies mithilfe von IN-Klauseln mit inline-Werten übersetzt, was bedeutete, dass der Abfrageplan-Cache nicht wiederverwendet werden konnte, wenn sich die Liste änderte. EF Core 9 parametrisiert diese Sammlungen ordnungsgemäß und sendet sie als strukturierte Parameter. Dies ist eine große Sache für das Caching von Abfrageplänen auf SQL Server und PostgreSQL.## Massenoperationen – ExecuteUpdate und ExecuteDelete

ExecuteUpdate und ExecuteDelete wurden in EF Core 7 eingeführt, aber EF Core 9 erweitert die Möglichkeiten, die Sie mit ihnen machen können, auf sinnvolle Weise.

Komplexere Aktualisierungsausdrücke

Sie können jetzt komplexere Ausdrücke in ExecuteUpdate verwenden, einschließlich Verweisen auf andere Tabellen über Navigationseigenschaften:

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

Dadurch wird eine einzelne UPDATE-Anweisung mit einem JOIN für die Kategorientabelle generiert – keine Notwendigkeit, Entitäten in den Speicher zu laden, kein Aufwand für die Änderungsverfolgung.

Bedingte Massenlöschungen mit Unterabfragen

Massenlöschungen mit Unterabfragefiltern werden jetzt vollständig unterstützt:

await context.AuditLogs
 .Where(log => log.CreatedAt < DateTime.UtcNow.AddYears(-2))
 .Where(log => !context.ProtectedRecords
 .Any(pr => pr.AuditLogId == log.Id))
 .ExecuteDeleteAsync();

Dies entspricht einer DELETE-Unterabfrage mit einer NOT EXISTS-Unterabfrage, genau das, was Sie von Hand schreiben würden. Keine Entitäten geladen, keine Hin- und Rückfahrten.

JSON-Spaltenverbesserungen

JSON-Spalten waren eine der aufregendsten Funktionen in den letzten EF Core-Versionen, und EF Core 9 geht noch einen Schritt weiter.

Abfragen innerhalb von JSON

Sie können jetzt Daten aus JSON-Spalten heraus filtern und projizieren, mit besserer Übersetzungsunterstützung:

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

Konfiguration in Ihrem 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();
 });
 });
}

Jetzt können Sie direkt in JSON abfragen:

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 generiert ordnungsgemäße JSON_VALUE- und JSON_QUERY-Aufrufe auf SQL Server (oder gleichwertig auf anderen Anbietern), und die Übersetzung deckt einen viel größeren Bereich von LINQ-Operationen für JSON-Elemente ab als zuvor.

JSON-Eigenschaften aktualisieren

Einer der Reibungspunkte in EF Core 8 bestand darin, dass das Aktualisieren einer einzelnen Eigenschaft innerhalb einer JSON-Spalte dazu führen würde, dass das gesamte JSON-Dokument neu geschrieben wird. EF Core 9 verbessert dies durch eine detailliertere Änderungsverfolgung für JSON-zugeordnete Typen und generiert nach Möglichkeit gezieltere Updates.

var order = await context.Orders.FindAsync(orderId);
order.Address.ZipCode = "10001";
await context.SaveChangesAsync();

Bei unterstützten Anbietern kann dies zu einer gezielteren JSON-Änderung führen, anstatt den gesamten Blob neu zu schreiben.

Komplexe Typen – Wertobjekte ohne Identität

Komplexe Typen sind eine der Funktionen, auf die Domain-Driven-Design-Praktiker gewartet haben. Im Gegensatz zu eigenen Typen haben komplexe Typen keine Identität – sie sind reine Wertobjekte.

[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; }
}

Diese werden als abgeflachte Spalten in der übergeordneten Tabelle gespeichert – Budget_Amount, Budget_Currency, Timeline_Start, Timeline_End – ohne dass eine separate Tabelle oder ein Schlüssel erforderlich ist.

Der Hauptunterschied zu eigenen Typen: Komplexe Typen werden nach Wert und nicht nach Referenz verglichen. Zwei Money-Instanzen mit demselben Amount und Currency gelten als gleich, unabhängig davon, zu welcher Entität sie gehören.

var expensiveProjects = await context.Projects
 .Where(p => p.Budget.Amount > 100_000m && p.Budget.Currency == "USD")
 .OrderByDescending(p => p.Budget.Amount)
 .ToListAsync();

Dies führt direkt zur Filterung der abgeflachten Spalten – sauber, effizient und genau das, was Sie erwarten.

HierarchyId-Unterstützung für SQL Server

Wenn Sie jemals mit hierarchischen Daten in SQL Server gearbeitet haben – Organigramme, Kategoriebäume, Dateisysteme – wissen Sie, dass HierarchyId der integrierte Typ dafür ist. EF Core 9 bringt dafür erstklassigen Support.

public class Employee
{
 public int Id { get; set; }
 public string Name { get; set; }
 public string Title { get; set; }
 public HierarchyId PathFromCeo { get; set; }
}

Sie können hierarchische Beziehungen jetzt direkt abfragen:

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 dies lässt sich in die nativen `HierarchyId`-Methoden von SQL Server übersetzen. Wenn Sie Baumstrukturen mit selbstreferenzierenden Fremdschlüsseln und rekursiven CTEs implementiert haben, ist dies ein viel saubererer Ansatz.

## Kompilierte Modelle und AOT-Unterstützung

Leistungsbewusste Entwickler werden die kontinuierliche Investition in kompilierte Modelle und die Unterstützung der AOT-Kompilierung (Ahead-of-Time) zu schätzen wissen.

### Kompilierte Modelle

Kompilierte Modelle generieren vorab die Modellmetadaten, die EF Core normalerweise beim Start erstellt. Bei großen Modellen (denken Sie an Hunderte von Entitäten) kann dies die Kaltstartzeit erheblich verkürzen.

```bash
dotnet ef dbcontext optimize --output-dir CompiledModels --namespace MyApp.CompiledModels

Dann verkabeln Sie es:

builder.Services.AddDbContext<AppDbContext>(options =>
 options
 .UseSqlServer(connectionString)
 .UseModel(MyApp.CompiledModels.AppDbContextModel.Instance));

In EF Core 9 sind kompilierte Modelle vollständiger – sie unterstützen mehr Zuordnungsfunktionen und erzeugen eine kleinere Ausgabe. Bei einem Modell mit etwa 400 Entitäten kann die Startzeit von mehreren Sekunden auf nahezu augenblicklich sinken.

AOT-Kompilierungsfortschritt

Die vollständige native AOT-Unterstützung für EF Core ist noch in Arbeit, aber EF Core 9 macht erhebliche Fortschritte. Viele der reflexionsintensiven Codepfade wurden umgestaltet, um das Trimmen zu erleichtern, und kompilierte Modelle sind ein wichtiger Teil der AOT-Geschichte. Wenn Sie auf Szenarios wie Azure Functions oder Microservices abzielen, bei denen ein Kaltstart wichtig ist, sind diese Verbesserungen direkt relevant.

Aktualisierungen des Cosmos DB-Anbieters

Der Azure Cosmos DB-Anbieter wird mit EF Core 9 weiter ausgereift. Einige bemerkenswerte Verbesserungen:

Umgang mit Partitionsschlüsseln

Der Anbieter unterstützt jetzt hierarchische Partitionsschlüssel und handhabt Partitionsschlüsselfilter intelligenter:

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();

Verbesserte LINQ-zu-NoSQL-Übersetzung

Weitere LINQ-Operationen werden jetzt in den SQL-Dialekt von Cosmos DB übersetzt, einschließlich besserer Unterstützung für Contains, Any, Operationen für verschachtelte Arrays und mathematische Funktionen. Anfragen, die zuvor auf die Client-Auswertung zurückfielen, werden jetzt serverseitig bearbeitet.

Unterstützung für die Vektorsuche

EF Core 9 führt eine frühe Unterstützung für die Vektorähnlichkeitssuche mit Cosmos DB ein, was nützlich ist, wenn Sie Anwendungen erstellen, die Einbettungen oder KI-gesteuerte Suche integrieren:

var results = await context.Documents
 .OrderBy(d => EF.Functions.VectorDistance(d.Embedding, queryVector))
 .Take(10)
 .ToListAsync();

Migrationsverbesserungen

Die Migrationen haben einige Verbesserungen der Lebensqualität mit sich gebracht, die die Arbeit mit ihnen in Teamumgebungen weniger mühsam machen.

Temporale Tabellen in Migrationen

Migrationen handhaben die Konfiguration temporaler Tabellen jetzt reibungsloser, mit ordnungsgemäßer Unterstützung für Periodenspalten und Verlaufstabellenbenennung:

protected override void OnModelCreating(ModelBuilder modelBuilder)
{
 modelBuilder.Entity<Employee>()
 .ToTable("Employees", b => b.IsTemporal(t =>
 {
 t.HasPeriodStart("ValidFrom");
 t.HasPeriodEnd("ValidTo");
 t.UseHistoryTable("EmployeeHistory");
 }));
}

Idempotente Skripte

Der Befehl Script-Migration (und sein CLI-Äquivalent) erzeugt standardmäßig bessere idempotente Skripte mit verbesserter Handhabung von Randfällen rund um Schemaänderungen, die von in bestimmten Zuständen vorhandenen Daten abhängen.

Migrationspakete

Migrationspakete, die Ihre Migrationen für die Bereitstellung in eine eigenständige ausführbare Datei packen, sind in EF Core 9 zuverlässiger und bieten eine bessere Fehlerberichterstattung und Wiederholungslogik für vorübergehende Fehler.

dotnet ef migrations bundle --self-contained -r linux-x64

Dadurch wird eine Binärdatei erstellt, die Sie in Ihrer CI/CD-Pipeline ausführen können, ohne dass das .NET SDK auf Ihrem Bereitstellungsziel installiert werden muss.

LeistungsbenchmarksHier sind einige grobe Benchmarks aus meinen eigenen Tests. Diese stammen aus einem Projekt mit etwa 200 Entitäten, die mit SQL Server 2022 ausgeführt werden, gemessen mit BenchmarkDotNet. Ihre Zahlen werden variieren, aber die relativen Verbesserungen sollten ähnlich sein.

Szenario	EF Core 8	EF Core 9	Verbesserung
Modellbau (Kaltstart)	1.850 ms	320 ms	~5,8x schneller (kompiliert)
Einfache Abfrage (einzelne Entität nach PK)	0,42 ms	0,38 ms	~10 % schneller
Komplexe Abfrage (Joins + Aggregation)	3,1 ms	2,4 ms	~23 % schneller
Massenaktualisierung (10.000 Zeilen)	145 ms	118 ms	~19 % schneller
JSON-Spaltenabfrage	2,8 ms	1,9 ms	~32 % schneller
SaveChanges (100 Entitäten)	48 ms	41 ms	~15 % schneller

Die Verbesserung des kompilierten Modells ist die dramatischste, aber die stetigen Verbesserungen auf ganzer Linie summieren sich – insbesondere in Szenarien mit hohem Durchsatz, in denen Sie Tausende von Abfragen pro Sekunde ausführen.

Upgrade von EF Core 8

Wenn Sie EF Core 8 verwenden, ist der Upgrade-Pfad relativ reibungslos. Hier ist eine Checkliste:

1. Aktualisieren Sie Ihre Pakete:

<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. Suchen Sie nach wichtigen Änderungen. Die Liste für EF Core 9 ist im Vergleich zu einigen früheren Versionen relativ kurz. Die bemerkenswertesten:

– Einige zuvor veraltete APIs wurden entfernt – Änderungen in der Art und Weise, wie bestimmte GroupBy-Abfragen übersetzt werden (sie gehen jetzt serverseitig, was das Verhalten ändert, wenn Sie sich auf die Client-Auswertung verlassen haben) – Kleinere Änderungen in der Ausgabe des Migrationsgerüsts

3. Generieren Sie kompilierte Modelle neu, wenn Sie sie verwenden. Das Format hat sich geändert, sodass alte kompilierte Modelle nicht mit EF Core 9 funktionieren.

4. Führen Sie Ihre Testsuite aus. Achten Sie besonders auf Abfragen, die zuvor auf dem Client ausgewertet wurden – sie werden jetzt möglicherweise auf dem Server ausgewertet, was normalerweise besser ist, aber zu Datenunterschieden führen kann.

5. Überprüfen Sie Ihre Cosmos DB-Abfragen, wenn Sie diesen Anbieter verwenden. Die verbesserten Übersetzungen bedeuten, dass einige Abfragen anders ausgeführt werden (normalerweise schneller), es lohnt sich jedoch zu überprüfen, ob die Ergebnisse identisch sind.

Ein minimales Upgrade für ein typisches Projekt sieht so aus:

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

Wenn alles kompiliert und die Tests bestanden werden, sind Sie wahrscheinlich in guter Verfassung. Wenn Sie auf Probleme stoßen, finden Sie in der Dokumentation zu EF Core 9 Breaking Changes detaillierte Migrationsanleitungen für jede Änderung.

Zusammenfassung

EF Core 9 ist keine revolutionäre Version – es ist eine evolutionäre Version, und genau das musste es sein. Allein die LINQ-Verbesserungen rechtfertigen das Upgrade für die meisten Projekte, und Funktionen wie JSON-Spaltenverbesserungen, komplexe Typen und HierarchyId unterstützen Öffnungsmuster, die zuvor umständlich oder unmöglich waren.

Wenn ich die drei Funktionen auswählen müsste, die den größten Einfluss auf meine Projekte hatten:

Parametrisierte primitive Sammlungen – weil die Effizienz des Abfrageplan-Cache im großen Maßstab von Bedeutung ist
JSON-Spaltenverbesserungen – weil das hybride relationale Dokumentmuster unglaublich nützlich ist
Kompilierte Modelle – weil sich die Startzeit direkt auf die Produktivität der Entwickler und die Bereitstellungsgeschwindigkeit auswirktDas EF Core-Team befindet sich seit EF Core 5 auf einem soliden Weg, und Version 9 setzt diesen Trend fort. Wenn Sie bereits EF Core 8 verwenden, ist das Upgrade risikoarm und lohnend. Wenn Sie etwas Älteres haben, gab es noch nie einen besseren Zeitpunkt, den Sprung zu wagen.

Viel Spaß beim Codieren – und viel Spaß beim Abfragen.

Erste Schritte mit Semantic Kernel: KI-Orchestrierung in C#

Sun, 05 Oct 2025 00:00:00 +0000

Wenn Sie .NET-Anwendungen erstellt und die Entwicklung der KI-Landschaft beobachtet haben, haben Sie sich wahrscheinlich gefragt: Wie kann ich große Sprachmodelle am besten in meine C#-Projekte integrieren, ohne meine Codebasis in Spaghetti zu verwandeln? Das ist genau das Problem, das der Semantic Kernel von Microsoft löst, und nachdem ich das letzte Jahr damit verbracht habe, Produktionsanwendungen damit zu erstellen, kann ich Ihnen sagen, dass es zu einem der wichtigsten Tools in meinem Entwickler-Toolkit geworden ist.

In diesem Beitrag erkläre ich Ihnen alles, was Sie für den Einstieg in Semantic Kernel benötigen – vom Verständnis der Kernkonzepte bis zum Aufbau eines realen KI-Assistenten. Egal, ob Sie gerade erst in die KI-Entwicklung eintauchen oder nach einer strukturierten Möglichkeit suchen, LLM-Aufrufe in Ihren vorhandenen .NET-Anwendungen zu orchestrieren, dieser Leitfaden deckt alles ab.

Was ist ein semantischer Kernel?

Semantic Kernel (SK) ist ein Open-Source-SDK von Microsoft, das als Orchestrierungsschicht zwischen Ihrem Anwendungscode und großen Sprachmodellen wie GPT-4o, Azure OpenAI oder anderen KI-Diensten fungiert. Betrachten Sie es als eine leichtgewichtige Middleware, mit der Sie traditionellen C#-Code mit KI-Funktionen auf saubere, zusammensetzbare Weise kombinieren können.

Aber warum nicht einfach die OpenAI-API direkt aufrufen? Das ist absolut möglich – und für einfache Anwendungsfälle ist das auch in Ordnung. Aber in dem Moment müssen Sie:

Lassen Sie die KI basierend auf Benutzereingaben entscheiden, welche Funktionen aufgerufen werden sollen
Kombinieren Sie mehrere KI-Aufrufe mit herkömmlichem Code in einer Pipeline
Fügen Sie Speicher und Kontext hinzu, damit sich die KI an frühere Interaktionen erinnert
Erstellen Sie mehrstufige Agenten, die komplexe Aufgaben bewältigen

…Sie werden feststellen, dass Sie das Rad neu erfinden. Semantic Kernel bietet Ihnen all dies sofort einsatzbereit, mit erstklassiger .NET-Unterstützung, Abhängigkeitsinjektionsintegration und einer Plugin-Architektur, die für jeden C#-Entwickler selbstverständlich ist.

Das Projekt befindet sich auf GitHub im Repository microsoft/semantic-kernel und verfügt über SDKs für C#, Python und Java. Das C#-SDK ist das ausgereifteste und das, auf das wir uns hier konzentrieren werden.

Kernkonzepte

Bevor wir Code schreiben, wollen wir die Bausteine verstehen.

Der Kernel

Das Kernel ist das zentrale Objekt im Semantic Kernel. Es ist der Orchestrator – das, was Ihre KI-Dienste, Plugins und Konfigurationen miteinander verbindet. Sie erstellen eines, registrieren Ihre Dienste und Plugins darauf und verwenden es dann, um Eingabeaufforderungen auszuführen oder Funktionen aufzurufen. Wenn Sie mit der Abhängigkeitsinjektion in ASP.NET Core vertraut sind, wird Ihnen der Kernel sehr vertraut vorkommen – es handelt sich im Wesentlichen um einen Servicecontainer mit KI-Superkräften.

Plugins und Funktionen

Ein Plugin ist eine Sammlung verwandter Funktionen, die der Kernel aufrufen kann. Funktionen gibt es in zwei Varianten:

Eingabeaufforderungsfunktionen – definiert als Vorlagen in natürlicher Sprache, die an das LLM gesendet werden
Native Funktionen – reguläre C#-Methoden, die mit Attributen versehen sind, die der Kernel erkennen und aufrufen kann

Beispielsweise könnten Sie ein WeatherPlugin mit einer nativen Funktion GetCurrentWeather(string city) und einer Eingabeaufforderungsfunktion haben, die Wetterdaten auf benutzerfreundliche Weise zusammenfasst.### KI-Anschlüsse

Über Konnektoren kommuniziert der semantische Kernel mit KI-Diensten. Die häufigsten sind:

– AzureOpenAIChatCompletion – für Azure OpenAI Service

OpenAIChatCompletion – direkt für die OpenAI-API
Einbettung von Konnektoren für Vektorsuche und Speicher

Sie registrieren diese beim Start im Kernel und alles andere funktioniert einfach.

Einrichten Ihres Projekts

Machen wir uns die Hände schmutzig. Beginnen Sie mit der Erstellung einer neuen Konsolenanwendung:

dotnet new console -n SemanticKernelDemo
cd SemanticKernelDemo

Fügen Sie nun die Semantic Kernel NuGet-Pakete hinzu:

dotnet add package Microsoft.SemanticKernel
dotnet add package Microsoft.SemanticKernel.Connectors.AzureOpenAI

Wenn Sie OpenAI direkt anstelle von Azure OpenAI verwenden:

dotnet add package Microsoft.SemanticKernel.Connectors.OpenAI

Für Speicher- und Einbettungsunterstützung (wir werden dies später verwenden):

dotnet add package Microsoft.SemanticKernel.Plugins.Memory
dotnet add package Microsoft.Extensions.VectorData.Abstractions

Ihr .csproj sollte auf .NET 8 oder höher ausgerichtet sein. Die neuesten Versionen von Semantic Kernel nutzen alle Vorteile moderner .NET-Funktionen.

Ihr erster Kernel

Beginnen wir mit dem einfachsten möglichen Beispiel – einem Kernel erstellen, ihn mit einem KI-Dienst verbinden und ihm eine Frage stellen.

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

Wenn Sie OpenAI direkt verwenden, tauschen Sie die Dienstregistrierung aus:

builder.AddOpenAIChatCompletion(
 modelId: "gpt-4o",
 apiKey: "your-openai-api-key"
);

Das ist es. Wenn Sie es ausführen, erhalten Sie eine kurze Erklärung der Abhängigkeitsinjektion. Aber das kratzt nur an der Oberfläche.

Verwendung von Eingabeaufforderungsvorlagen

Mit Eingabeaufforderungsvorlagen können Sie Ihre Eingabeaufforderungen mit Variablen unter Verwendung der Handlers-Syntax parametrisieren:

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

Hier beginnt Semantic Kernel zu glänzen – Sie können wiederverwendbare Eingabeaufforderungsvorlagen definieren, diese versionieren und in größeren Workflows zusammenstellen.

Plugins und native Funktionen

Mit Plugins schließt Semantic Kernel die Lücke zwischen KI und Ihrem vorhandenen C#-Code. Eine native Funktion ist lediglich eine reguläre Methode, die Sie dem Kernel zur Verfügung stellen.

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

Beachten Sie die Attribute [KernelFunction] und [Description]. Diese sind von entscheidender Bedeutung – die Beschreibungen sind das, was die KI liest, um zu verstehen, wann und wie Ihre Funktionen aufgerufen werden. Gute Beschreibungen machen den Unterschied zwischen einer KI, die Ihre Werkzeuge effektiv nutzt, und einer KI, die verwirrt ist.

Registrieren Sie das Plugin auf Ihrem Kernel:

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();

Sie können auch komplexere Plugins erstellen, die Dienste einbinden. Da Semantic Kernel in Microsoft.Extensions.DependencyInjection integriert ist, können Ihre Plugins wie jeder andere Dienst Konstruktorabhängigkeiten empfangen:

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

Funktionsaufruf und automatischer Aufruf

Hier wird es richtig interessant. Beim Funktionsaufruf (auch als Tool-Aufruf bezeichnet) lassen Sie das KI-Modell basierend auf dem Konversationskontext entscheiden, welche Ihrer registrierten Funktionen aufgerufen werden sollen. Das Modell führt keinen Code aus – es gibt eine strukturierte Anfrage mit der Meldung „Ich möchte Funktion X mit diesen Argumenten aufrufen“ zurück und der Kernel übernimmt den eigentlichen Aufruf.

So aktivieren Sie den automatischen Funktionsaufruf:

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

Mit FunctionChoiceBehavior.Auto() wird der Kernel:

Senden Sie Ihre Eingabeaufforderung zusammen mit Beschreibungen aller verfügbaren Funktionen an die KI
Die KI entscheidet, dass sie get_time_in_timezone und get_weather aufrufen muss.
Der Kernel führt diese Funktionen automatisch aus
Die Ergebnisse werden an die KI zurückgesendet
Die KI erstellt anhand der Funktionsergebnisse eine Antwort in natürlicher SpracheDiese Schleife kann in einem einzigen Aufruf mehrmals auftreten – die KI ruft möglicherweise mehrere Funktionen nacheinander auf, um alle benötigten Informationen zu sammeln. Sie können auch FunctionChoiceBehavior.Required() verwenden, um die KI zu zwingen, mindestens eine Funktion aufzurufen, oder eine bestimmte Liste von Funktionen bereitzustellen, die sie verwenden darf.

Chat-Abschluss mit Verlauf

Für Konversationsanwendungen sollten Sie ChatCompletionService direkt mit einem ChatHistory-Objekt verwenden:

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

Dadurch erhalten Sie einen vollständig interaktiven Chatbot, der den Gesprächsverlauf verwaltet und Ihre Plugins bei Bedarf aufrufen kann.

Speicher und Einbettungen

Eines der leistungsstärksten Muster in KI-Anwendungen ist Retrieval-Augmented Generation (RAG) – es gibt der KI Zugriff auf Ihre eigenen Daten, indem es diese in den Vektorraum einbettet und relevante Blöcke zum Zeitpunkt der Abfrage abruft.

Semantic Kernel bietet Abstraktionen für die Arbeit mit Vektorspeichern und Einbettungen. So richten Sie einen In-Memory-Vektorspeicher für die Entwicklung ein:

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

Für Produktionsszenarien würden Sie diese Einbettungen in einer dedizierten Vektordatenbank wie Azure AI Search, Qdrant oder Pinecone speichern. Semantic Kernel verfügt über Konnektoren für all dies über die Microsoft.Extensions.VectorData-Abstraktionen.

Ein typischer RAG-Ablauf sieht so aus:

Ingest: Teilen Sie Ihre Dokumente auf, generieren Sie Einbettungen und speichern Sie sie in einer Vektordatenbank
Abrufen: Wenn ein Benutzer eine Frage stellt, betten Sie die Abfrage ein und finden Sie die ähnlichsten Dokumente
Generieren: Übergeben Sie die abgerufenen Dokumente zusammen mit der Frage des Benutzers als Kontext an das LLM

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

Indem Sie Ihre RAG-Pipeline als Kernelfunktion verfügbar machen, kann die KI automatisch entscheiden, wann sie Ihre Wissensdatenbank durchsuchen muss – so bleibt die Orchestrierung sauber und das Modell kann das tun, was es am besten kann.

Planer und Agenten

Da Ihre KI-Anwendungen immer komplexer werden, benötigen Sie die KI, um mehrstufige Aufgaben zu planen und auszuführen. Hier kommt das Agent-Framework von Semantic Kernel ins Spiel.

Die Grundlagen: Chat Completion Agent

Der einfachste Agententyp umschließt ein Chat-Abschlussmodell mit Anweisungen und 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);
}

Zusammenarbeit mehrerer Agenten

Richtig wirkungsvoll wird es, wenn mehrere Agenten zusammenarbeiten. Semantic Kernel unterstützt Gruppenchatmuster, bei denen Agenten mit unterschiedlichen Spezialisierungen zusammenarbeiten:

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

Dieses Muster ist äußerst nützlich für komplexe Aufgaben, bei denen unterschiedliche Perspektiven oder Fachgebiete berücksichtigt werden müssen. Jeder Agent arbeitet mit seiner eigenen Systemaufforderung und kann über einen eigenen Satz von Plugins verfügen.

Praxisbeispiel: Erstellen eines Projektdokumentationsassistenten

Lassen Sie uns alles mit einem praktischen Beispiel verknüpfen – einem KI-Assistenten, der Entwicklern hilft, eine Codebasis zu verstehen, indem er Dateien liest und Fragen beantwortet.

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

Dieser Assistent kann:- Dateien auflisten und lesen aus Ihrem Projektverzeichnis

Beantworten Sie Fragen zur Codebasis, indem Sie tatsächliche Quelldateien lesen
Dokumentation generieren im Markdown-Format
Konversationskontext beibehalten, damit Folgefragen natürlich funktionieren

Die KI entscheidet automatisch, wann read_file, list_files oder generate_summary aufgerufen wird, je nachdem, was Sie fragen. Fragen Sie: „Was macht der OrderService?“ und es liest die Datei, analysiert sie und erklärt sie. Bitten Sie es um „Dokumentation für das Authentifizierungsmodul erstellen“ und es durchsucht die Dateien, versteht die Struktur und erstellt eine formatierte Zusammenfassung.

Tipps für die Produktion

Bevor Sie Ihre Semantic-Kernel-Anwendung versenden, habe ich einige Dinge auf die harte Tour gelernt:

Verwenden Sie die Abhängigkeitsinjektion ordnungsgemäß. Registrieren Sie in ASP.NET Core-Apps den Kernel und die Dienste in Ihrem DI-Container, anstatt sie inline zu erstellen:

builder.Services.AddKernel()
 .AddAzureOpenAIChatCompletion(
 deploymentName: "gpt-4o",
 endpoint: configuration["AzureOpenAI:Endpoint"]!,
 apiKey: configuration["AzureOpenAI:ApiKey"]!
 )
 .Plugins.AddFromType<TimePlugin>()
 .AddFromType<OrderPlugin>();

Behandeln Sie Fehler ordnungsgemäß. LLM-Aufrufe können fehlschlagen, eine Zeitüberschreitung verursachen oder unerwartete Ergebnisse zurückgeben. Wickeln Sie Ihre Aufrufe in Try-Catch-Blöcke ein und implementieren Sie Wiederholungsrichtlinien mit Polly oder den integrierten Resilienzfunktionen.

Token-Nutzung überwachen. Jede Eingabeaufforderung, jede Funktionsbeschreibung und jeder Teil des Chat-Verlaufs verbraucht Token. Verwenden Sie Filter, um die Nutzung zu protokollieren und zu verfolgen:

kernel.FunctionInvocationFilters.Add(new LoggingFilter());

Halten Sie Ihre Funktionsbeschreibungen präzise. Vage Beschreibungen führen dazu, dass die KI Funktionen falsch aufruft. Testen Sie Ihre Beschreibungen, indem Sie fragen: „Wenn ich nur die Beschreibung lesen würde, wüsste ich dann genau, wann und wie ich diese Funktion verwende?“

Fazit

Semantic Kernel ist eine dieser Bibliotheken, die Ihre Einstellung zum Erstellen von Anwendungen grundlegend verändert. Es handelt sich nicht nur um einen API-Wrapper, sondern um ein Orchestrierungs-Framework, mit dem Sie KI-Funktionen mit herkömmlichem Code auf eine wartbare, testbare und produktionsbereite Weise zusammenstellen können.

Was mir am meisten daran gefällt, ist, dass es das .NET-Ökosystem respektiert. Es verwendet Muster, die Sie bereits kennen – Abhängigkeitsinjektion, Attribute, Async/Await, Schnittstellen – und erweitert sie auf die KI-Welt. Sie müssen kein völlig neues Paradigma erlernen; Sie fügen einfach KI als weitere Fähigkeit zu Ihrem Toolkit hinzu.

Wenn Sie .NET-Anwendungen erstellen und Semantic Kernel noch nicht kennengelernt haben, ist jetzt der richtige Zeitpunkt dafür. Das SDK ist stabil, die Community ist aktiv und die Muster, die es ermöglicht – von einfacher prompter Orchestrierung bis hin zur Zusammenarbeit mit mehreren Agenten – werden für moderne Entwickler zu unverzichtbaren Fähigkeiten.

Fangen Sie klein an. Erstellen Sie einen Kernel, registrieren Sie ein Plugin und beobachten Sie, wie die KI Ihren Code aufruft. Sobald das Klick macht, werden Sie Möglichkeiten sehen, überall in Ihren Anwendungen Intelligenz hinzuzufügen.

Die offizielle Dokumentation und das GitHub-Repository sind hervorragende Ressourcen, um Ihre Reise fortzusetzen. Viel Spaß beim Bauen!

Erben von Komponenten in Blazor

Thu, 04 Sep 2025 00:00:00 +0000

Ich habe ein Projekt mit einer Reihe von Formularseiten erstellt, und jede einzelne hatte dieselbe Ladestatuslogik, dieselbe Fehlerbehandlung und dieselben Toastbenachrichtigungen. Das Kopieren und Einfügen fühlte sich alles falsch an, also habe ich mich mit der Komponentenvererbung in Blazor befasst. Es stellt sich heraus, dass es ziemlich einfach ist, da Blazor-Komponenten nur C#-Klassen sind.

Die Grundlagen

Jede Blazor-Komponente erbt standardmäßig von ComponentBase. Sie können Ihre eigene Basisklasse erstellen, die ComponentBase erweitert, und dann Ihre Komponenten davon erben lassen.

Nehmen wir an, die meisten unserer Seiten benötigen eine Ladestatus- und Fehlerbehandlung. Wir können eine Basisklasse erstellen:

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

Verwendung der Basisklasse

Jetzt erben wir in jeder Seitenkomponente nicht mehr von ComponentBase, sondern von unserem 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");
 });
 }
}

Die @inherits PageBase-Direktive ist der Schlüssel. Es weist Blazor an, unsere Basisklasse anstelle der Standardklasse ComponentBase zu verwenden. Jetzt erhalten wir IsLoading, ErrorMessage und LoadDataAsync() kostenlos auf jeder Seite, die davon erbt.

Injizieren von Diensten in die Basisklasse

Sie können auch Dienste in die Basisklasse einfügen, damit sie für alle untergeordneten Komponenten verfügbar sind:

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

Jede Komponente, die von PageBase erbt, hat jetzt Zugriff auf Navigation, Toast, NavigateBack() und ShowSuccess(), ohne dass etwas eingefügt werden muss.

Mit generischen Basisklassen tiefer gehen

Sie können sogar generische Basisklassen für gängige CRUD-Muster erstellen:

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

Dann wird Ihre eigentliche Seite supersauber:

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

Wann man es verwendet und wann nicht

Die Komponentenvererbung eignet sich hervorragend für gemeinsames Verhalten wie Ladezustände, Fehlerbehandlung, Authentifizierungsprüfungen oder CRUD-Muster. Übertreiben Sie es aber nicht mit tiefen Vererbungshierarchien – wenn Sie feststellen, dass Sie mehr als zwei Ebenen tief gehen, ist die Komposition wahrscheinlich besser dran (wie der LoadingComponent-Ansatz aus einem früheren Beitrag).

Normalerweise beschränke ich mich auf eine Basisklasse pro „Seitentyp“: PageBase für normale Seiten, FormPageBase für Formulare, und das war’s auch schon.

Ich hoffe, Ihnen hat der Beitrag gefallen! Sie können mich gerne in den sozialen Medien unter @emimontesdeoca kontaktieren.

Ressourcen

ASP.NET Core Razor-Komponentenvererbung

.NET Aspire: Cloud-native Anwendungen richtig erstellen

Wed, 20 Aug 2025 00:00:00 +0000

Wenn Sie jemals eine verteilte Anwendung in .NET erstellt haben, kennen Sie die Übung. Sie starten eine Web-API, fügen einen Hintergrund-Worker hinzu, fügen Redis für das Caching, PostgreSQL für die Persistenz und vielleicht RabbitMQ für die Nachrichtenübermittlung hinzu – und plötzlich verbringen Sie mehr Zeit mit der Verkabelung der Infrastruktur als mit dem Schreiben von Geschäftslogik. Über appsettings.json Dateien verstreute Verbindungszeichenfolgen, Gesundheitsprüfungen, die Sie vergessen haben zu konfigurieren, und Beobachtbarkeit, die immer „das Problem des nächsten Sprints“ ist.

Ich war dort. Mehrmals, als ich zugeben möchte.

Das ist genau das Problem, das .NET Aspire lösen soll. Nachdem ich es nun seit mehreren Monaten in der Produktion laufe, möchte ich mit Ihnen teilen, was ich gelernt habe – das Gute, das Großartige und die Fallstricke.

Was ist .NET Aspire?

.NET Aspire ist ein eigenständiger Stack zum Erstellen beobachtbarer, produktionsbereiter, verteilter Anwendungen mit .NET. Es handelt sich nicht um ein Framework im herkömmlichen Sinne – es ersetzt weder ASP.NET Core noch zwingt es Sie zu einem neuen Programmiermodell. Stattdessen baut es auf dem auf, was Sie bereits wissen, und füllt die Lücken, die beim Erstellen cloudnativer Apps schon immer bestanden haben.

Im Kern bietet Ihnen Aspire vier Dinge:

AppHost – Ein Projekt, das Ihre gesamte verteilte Anwendungstopologie definiert. Welche Dienste existieren, wovon sie abhängen und wie sie miteinander verbunden sind.
Dienststandards – Ein gemeinsames Projekt, das übergreifende Belange wie Gesundheitsprüfungen, Ausfallsicherheitsrichtlinien und OpenTelemetry einmalig für alle Ihre Dienste konfiguriert.
Komponenten – NuGet-Pakete, die standardisierte Integrationen mit unterstützenden Diensten wie Redis, PostgreSQL, RabbitMQ, Azure Storage und mehr bieten.
Entwickler-Dashboard – Eine Echtzeit-Benutzeroberfläche, die Protokolle, Ablaufverfolgungen und Metriken für Ihre gesamte verteilte App während der lokalen Entwicklung anzeigt.

Die Philosophie ist einfach: Wenn jede .NET-Cloud-App diese Dinge benötigt, warum implementieren wir sie dann alle jedes Mal von Grund auf?

Einrichten Ihres ersten Aspire-Projekts

Der Einstieg ist unkompliziert. Sie benötigen .NET 8 oder höher und den Aspire-Workload installiert:

dotnet workload update
dotnet workload install aspire

Erstellen Sie nun ein neues Aspire-Starterprojekt:

dotnet new aspire-starter -n MyCloudApp

Dadurch entsteht eine Lösung mit vier Projekten:

MyCloudApp.AppHost – Der Orchestrator
MyCloudApp.ServiceDefaults – Gemeinsame Konfiguration
MyCloudApp.ApiService – Eine Beispiel-Web-API
MyCloudApp.Web – Ein Blazor-Frontend

Führen Sie AppHost aus und Sie sehen sofort, dass das Aspire-Dashboard in Ihrem Browser geöffnet ist und alle Ihre Dienste, ihre Protokolle und ihren Zustand anzeigt. Keine Docker Compose-Datei. Keine manuelle Portverwaltung. Es funktioniert einfach.

dotnet run --project MyCloudApp.AppHost

Diese erste Erfahrung hat mich fasziniert. In weniger als einer Minute haben Sie eine vollständig orchestrierte verteilte App mit integrierter Observability.

Das AppHost-Muster

Der AppHost ist der Ort, an dem die Magie lebt. Es handelt sich um eine kleine Konsolenanwendung, die ein Builder-Muster verwendet, um die Topologie Ihrer verteilten Anwendung zu definieren – welche Ressourcen vorhanden sind und wie Dienste eine Verbindung zu ihnen herstellen.

So sieht ein realistischer AppHost aus:

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();
```Lesen Sie diesen Code laut vor. Es dokumentiert sich praktisch von selbst. „Die Katalog-API verweist auf PostgreSQL, Redis und RabbitMQ. Das Frontend verweist auf die Katalog-API und die Bestell-API.“ Das ist Ihre Architektur, ausgedrückt im Code.

Ein paar Dinge, die es zu beachten gilt:

- **`WithReference`** übernimmt die schwere Arbeit. Über Umgebungsvariablen und Konfiguration fügt es automatisch Verbindungszeichenfolgen und Dienst-URLs in das konsumierende Projekt ein. Ihre Dienste müssen nicht wissen, *wo* Redis ausgeführt wird – Aspire kümmert sich darum.
- **`WithPgAdmin()`** und **`WithManagementPlugin()`** richten neben den eigentlichen Diensten auch Admin-UIs für PostgreSQL und RabbitMQ ein. Während der Entwicklung sind diese von unschätzbarem Wert.
- **`WithExternalHttpEndpoints()`** markiert einen Dienst als extern zugänglich, was zum Zeitpunkt der Bereitstellung wichtig ist.

### Ressourcenkonfiguration

Sie können Ressourcen mit differenzierter Steuerung konfigurieren:

```csharp
var postgres = builder.AddPostgres("postgres")
 .WithEnvironment("POSTGRES_MAX_CONNECTIONS", "200")
 .WithDataVolume("postgres-data")
 .AddDatabase("catalogdb");

var redis = builder.AddRedis("cache")
 .WithDataVolume("redis-data");

Datenmengen stellen sicher, dass Ihre lokalen Entwicklungsdaten Container-Neustarts überstehen. Kleines Detail, große Verbesserung der Lebensqualität.

Dienststandards: Der unbesungene Held

Das ServiceDefaults-Projekt ist der am meisten unterschätzte Teil von Aspire. Es handelt sich um eine gemeinsam genutzte Bibliothek, auf die jeder Dienst in Ihrer Lösung verweist, und sie konfiguriert alle übergreifenden Anliegen, die Sie sonst vergessen oder inkonsistent implementieren würden.

So sieht ein typisches Extensions.cs in ServiceDefaults aus:

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

Dann erledigt im Program.cs jedes Dienstes eine Zeile alles:

var builder = WebApplication.CreateBuilder(args);
builder.AddServiceDefaults();

// Your service-specific configuration...

var app = builder.Build();
app.MapDefaultEndpoints();
app.Run();

Mit diesem einzigen AddServiceDefaults()-Aufruf erhalten Sie:

OpenTelemetry mit strukturierter Protokollierung, Metriken und verteilter Ablaufverfolgung
Gesundheitsprüfungen mit Liveness- und Readiness-Endpunkten
Diensterkennung, damit Dienste einander anhand ihres Namens finden können
Resilienzrichtlinien für alle ausgehenden HTTP-Aufrufe (Wiederholungsversuche, Leistungsschalter, Zeitüberschreitungen)

Das ist es, was eine „funktioniert auf meiner Maschine“-Demo von einem produktionsbereiten System unterscheidet. Und Aspire macht es zur Standardeinstellung und nicht zu einem nachträglichen Gedanken.

Aspire-Komponenten

Aspire-Komponenten sind NuGet-Pakete, die standardisieren, wie Ihre Dienste mit der unterstützenden Infrastruktur verbunden werden. Sie sind mehr als nur Client-Bibliotheken – sie umfassen sofort einsatzbereite Integritätsprüfungen, Protokollierung, Ablaufverfolgung und konfigurierbare Ausfallsicherheit.

Redis

var builder = WebApplication.CreateBuilder(args);
builder.AddServiceDefaults();
builder.AddRedisDistributedCache("cache");

Das ist es. Die Verbindungszeichenfolge kommt vom AppHost über WithReference. Die Komponente registriert einen von Redis unterstützten IDistributedCache, wobei Gesundheitsprüfungen und OpenTelemetry-Instrumentierung bereits verkabelt sind.

Sie können Redis auch für das Ausgabe-Caching verwenden:

builder.AddRedisOutputCache("cache");

PostgreSQL mit Entity Framework Core

builder.AddNpgsqlDbContext<CatalogDbContext>("catalogdb", settings =>
{
 settings.DisableRetry = false;
});

Dadurch wird Ihr DbContext mit einer Verbindung zur im AppHost definierten catalogdb-Datenbank registriert. Es umfasst Verbindungspooling, Zustandsprüfungen und Wiederholungsrichtlinien.

RabbitMQ

builder.AddRabbitMQClient("messaging");

Registriert einen IConnection aus der RabbitMQ-Clientbibliothek, vollständig konfiguriert und auf Integrität überprüft.

Azure-Integrationen

Auch für Azure-Dienste verfügt Aspire über erstklassige Komponenten:

// Azure Blob Storage
builder.AddAzureBlobClient("blobs");

// Azure Service Bus
builder.AddAzureServiceBusClient("servicebus");

// Azure Key Vault
builder.AddAzureKeyVaultClient("secrets");
```Das Muster ist immer das gleiche: eine Zeile im AppHost zum Definieren der Ressource, eine Zeile im verbrauchenden Dienst zur Verwendung. Verbindungsdetails fließen automatisch.

## Das Entwickler-Dashboard

Das Aspire-Dashboard ist eine dieser Funktionen, die zunächst wie ein „Nice-to-have“ erscheinen, bis Sie sie tatsächlich verwenden – dann können Sie sich die Arbeit ohne sie nicht mehr vorstellen.

Wenn Sie Ihren AppHost lokal ausführen, wird das Dashboard gestartet und bietet Ihnen Folgendes:

- **Ressourcenübersicht** – Alle Ihre Dienste und Infrastruktur auf einen Blick, mit Statusanzeigen
- **Strukturierte Protokolle** – Protokoll-Streaming in Echtzeit von jedem Dienst, filterbar und durchsuchbar
- **Verteilte Ablaufverfolgungen** – End-to-End-Anfrageverfolgungen über mehrere Dienste hinweg, visualisiert als Flammendiagramme
- **Metriken** – HTTP-Anfrageraten, Fehlerraten, Latenzen und benutzerdefinierte Metriken in Echtzeit
- **Konsolenprotokolle** – Raw stdout/stderr von jedem Container und Projekt

Besonders wertvoll ist das verteilte Tracing. Wenn eine Anfrage Ihr Frontend erreicht, durch die Katalog-API fließt, Redis und PostgreSQL berührt, sehen Sie die gesamte Kette mit dem Timing für jeden Hop. Kein Rätselraten mehr, wo der Engpass liegt.

Ich fand das Dashboard beim Debuggen am nützlichsten. Anstatt mehrere Terminalfenster zu verfolgen oder zwischen Protokolldateien zu springen, befindet sich alles an einem Ort mit Korrelations-IDs, die verwandte Ereignisse dienstübergreifend verknüpfen.

Das Dashboard ist auch als eigenständiger Container verfügbar, sodass Sie es in Staging-Umgebungen oder CI-Pipelines verwenden können:

```bash
docker run --rm -p 18888:18888 \
 mcr.microsoft.com/dotnet/aspire-dashboard:latest

Bereitstellung

Aspire hilft bei der Entwicklung, aber wie sieht es mit der Produktion aus? Hier wird es praktisch.

Azure-Container-Apps

Der einfachste Bereitstellungspfad ist Azure Container Apps (ACA), der erstklassige Aspire-Unterstützung bietet. Sie können die Bereitstellung direkt über die Azure Developer CLI durchführen:

azd init
azd up

Der Befehl azd init erkennt Ihren Aspire AppHost und generiert die erforderliche Infrastruktur als Code. azd up stellt alles bereit – Containerregistrierung, Container-Apps, Datenbanken, Redis-Instanzen – basierend auf Ihrer AppHost-Topologie.

Ihr AppHost wird im Wesentlichen zu Ihrem Bereitstellungsmanifest. Derselbe Code, der „Katalog-API hängt von PostgreSQL und Redis ab“ definiert, steuert die Infrastrukturbereitstellung.

Kubernetes

Für Kubernetes-Bereitstellungen generiert Aspire Manifeste nicht direkt, aber Ihre AppHost-Topologie wird sauber den Kubernetes-Ressourcen zugeordnet. Das Community-Tool aspirate (Aspir8) kann Helm-Charts oder Kubernetes-Manifeste aus Ihrem AppHost generieren:

dotnet tool install -g aspirate
aspirate generate
aspirate apply

Überlegungen zur Bereitstellung

Ein paar Dinge, die Sie beachten sollten:- Verbindungszeichenfolgen ändern sich zwischen Umgebungen. Lokal startet Aspire Container und fügt Verbindungszeichenfolgen automatisch ein. In der Produktion verweisen Sie auf verwaltete Dienste. Aspire verwendet die standardmäßige .NET-Konfiguration, sodass Umgebungsvariablen und Azure Key Vault wie erwartet funktionieren.

Der AppHost wird nicht in der Produktion ausgeführt. Es handelt sich um ein Entwicklungs- und Bereitstellungs-Orchestrierungstool. In der Produktion werden Ihre Dienste unabhängig ausgeführt und über Umgebungsvariablen und Orchestratoren konfiguriert.
Infrastrukturressourcen werden zu verwalteten Diensten. Ihr lokaler PostgreSQL-Container wird zur Azure-Datenbank für PostgreSQL. Ihr lokaler Redis-Container wird zu Azure Cache for Redis. Der konsumierende Code ändert sich nicht.

Tipps aus der Praxis

Nachdem wir Aspire eine Zeit lang in der Produktion betrieben haben, sind hier die Lektionen, die uns Zeit gespart haben:

1. Verwenden Sie benutzerdefinierte Ressourcenlebenszyklusprüfungen

Verlassen Sie sich nicht nur auf den Container-Start, um festzustellen, ob eine Ressource bereit ist. PostgreSQL akzeptiert möglicherweise TCP-Verbindungen, bevor es tatsächlich bereit ist, Abfragen zu bedienen.

var postgres = builder.AddPostgres("postgres")
 .AddDatabase("catalogdb")
 .WithHealthCheck();

Aspire kann Integritätsprüfungen für Ressourcen durchführen und abhängige Dienste zurückhalten, bis sie tatsächlich bereit sind.

2. Gemeinsame Muster in Erweiterungen extrahieren

Wenn mehrere Dienste ähnliche Konfigurationen teilen, erstellen Sie Erweiterungsmethoden:

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. Nutzen Sie WithReplicas für Lasttests

var catalogApi = builder.AddProject<Projects.CatalogApi>("catalog-api")
 .WithReference(postgres)
 .WithReference(redis)
 .WithReplicas(5);

WithReplicas startet mehrere Instanzen eines Dienstes lokal. Dies eignet sich hervorragend zum Testen von Lastausgleich, Parallelitätsfehlern und verteiltem Caching-Verhalten ohne Bereitstellung in einem Cluster.

4. Verwenden Sie Parameter für sensible Werte

Kodieren Sie Anmeldeinformationen nicht fest, auch nicht für die lokale Entwicklung:

var dbPassword = builder.AddParameter("db-password", secret: true);

var postgres = builder.AddPostgres("postgres", password: dbPassword)
 .AddDatabase("catalogdb");

Bei lokaler Ausführung fragt Aspire nach dem Wert oder liest ihn aus den Benutzergeheimnissen. In CI/CD kommt es aus Umgebungsvariablen.

5. Integrationstests werden trivial

Aspire enthält ein Testpaket, das das Integrationstesten verteilter Apps bemerkenswert einfach macht:

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

Dadurch wird Ihre gesamte verteilte Anwendung hochgefahren – einschließlich Datenbanken und Nachrichtenbrokern –, Ihr Test wird dagegen ausgeführt und sie wird heruntergefahren. Echte Integrationstests mit echter Infrastruktur in Ihrer CI-Pipeline. Keine Verspottungen.

6. Überwachen Sie die Ressourcennutzung lokal

Behalten Sie beim lokalen Betrieb mehrerer Container den Ressourcenverbrauch im Auge. Eine PostgreSQL-, Redis- und RabbitMQ-Instanz mit Verwaltungsoberfläche kann leicht 2–3 GB RAM verbrauchen. Wenn Sie einen eingeschränkten Computer verwenden, sollten Sie die Verwendung einfacherer Ressourcenkonfigurationen in Betracht ziehen:

var redis = builder.AddRedis("cache")
 .WithContainerRuntimeArgs("--memory=256m");

Fazit

.NET Aspire hat die Art und Weise, wie ich verteilte Anwendungen erstelle, grundlegend verändert. Nicht, weil es revolutionäre Konzepte einführt – Gesundheitschecks, OpenTelemetry und Container-Orchestrierung sind nicht neu. Sondern weil es sie zur Standardeinstellung macht. Es nimmt die hundert kleinen Entscheidungen, die Sie normalerweise treffen müssten, implementiert sie mit sinnvollen Standardeinstellungen und ermöglicht es Ihnen, sie bei Bedarf zu überschreiben.Das AppHost-Muster ist meiner Meinung nach der größte Gewinn. Wenn Ihre verteilte Anwendungstopologie als Code ausgedrückt wird – und nicht über Docker Compose-Dateien, Kubernetes-Manifeste und README-Dokumente verstreut ist –, wird das System verständlich. Neue Teammitglieder können Program.cs im AppHost öffnen und die gesamte Architektur in wenigen Minuten verstehen.

Wenn Sie verteilte Anwendungen mit .NET erstellen, sollten Sie sich Aspire ernsthaft ansehen. Beginnen Sie mit der Vorlage aspire-starter, erkunden Sie das Dashboard und übernehmen Sie nach und nach die Komponenten, wenn Sie sie benötigen. Sie müssen nicht gleich vom ersten Tag an aufs Ganze gehen – Aspire ist von Natur aus additiv.

Die Zeiten, in denen Sie Ihren ersten Sprint mit der Verkabelung der Infrastruktur-Grundbausteine verbrachten, sind vorbei. Überlassen Sie Aspire die Installation, damit Sie sich auf das Wesentliche konzentrieren können: Ihre Anwendung.

Authentifizierung und Autorisierung in Blazor: Ein praktischer Leitfaden

Sat, 12 Jul 2025 00:00:00 +0000

Wenn Sie mit ASP.NET MVC oder Razor Pages gearbeitet haben, haben Sie wahrscheinlich ein mentales Modell dafür, wie die Authentifizierung funktioniert: Middleware fängt die Anfrage ab, prüft ein Cookie oder Token, füllt HttpContext.User auf, und schon kann es losgehen. Blazor ändert dieses mentale Modell auf subtile, aber wichtige Weise – und wenn Sie diese Unterschiede nicht frühzeitig verstehen, werden Sie am Ende Authentifizierungsprobleme beheben, die unmöglich erscheinen.

In diesem Beitrag möchte ich erläutern, wie Authentifizierung und Autorisierung in Blazor tatsächlich funktionieren, und dabei sowohl Server- als auch WebAssembly-Hostingmodelle abdecken. Wir werden von den Grundlagen bis hin zu benutzerdefinierten Anbietern, externem OAuth und den Fallstricken vorgehen, die selbst erfahrenen .NET-Entwicklern in die Quere kommen.

Warum die Authentifizierung in Blazor anders ist

In herkömmlichem ASP.NET ist jede Benutzerinteraktion eine HTTP-Anfrage. Der Server validiert Anmeldeinformationen, setzt ein Cookie und jede nachfolgende Anfrage trägt dieses Cookie. Die Authentifizierungspipeline ist linear und vorhersehbar.

Blazor Server arbeitet über eine dauerhafte SignalR-Verbindung. Nachdem die erste HTTP-Anfrage die Seite geladen hat, erfolgen alle nachfolgenden Interaktionen über WebSockets. Es gibt keine neue HTTP-Anfrage für jeden Tastenklick, sodass die Middleware nicht bei jeder Interaktion erneut ausgeführt wird. Der HttpContext ist während der ersten Verbindung verfügbar, sich jedoch während der gesamten Lebensdauer einer Schaltung darauf zu verlassen, ist ein Rezept für Fehler.

Blazor WebAssembly läuft vollständig im Browser. Es gibt überhaupt kein serverseitiges HttpContext. Der Authentifizierungsstatus muss von einer API abgerufen, clientseitig gespeichert und über Tokens – typischerweise JWTs – verwaltet werden. Der Server vertraut dem Client nur, soweit es um die Token-Validierung geht.

Das bedeutet, dass Blazor eine eigene Abstraktion für den Authentifizierungsstatus benötigt, die unabhängig vom Hosting-Modell funktioniert. Diese Abstraktion ist der AuthenticationStateProvider.

Authentifizierungsstatus: Die Stiftung

Das Herzstück des Authentifizierungssystems von Blazor ist AuthenticationStateProvider. Dies ist eine abstrakte Klasse, die eine einzelne kritische Methode verfügbar macht:

public abstract Task<AuthenticationState> GetAuthenticationStateAsync();

Das AuthenticationState-Objekt umschließt ein ClaimsPrincipal – dasselbe Identitätsmodell, das überall in .NET verwendet wird. Komponenten kommunizieren nicht direkt mit Cookies oder Token; Sie fragen den AuthenticationStateProvider nach dem aktuellen Stand.

Um diesen Status für Ihren gesamten Komponentenbaum verfügbar zu machen, stellt Blazor CascadingAuthenticationState bereit. Normalerweise hüllen Sie Ihren Router damit in App.razor oder Ihr Layout ein:

<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>

Der AuthorizeRouteView erfüllt hier eine doppelte Aufgabe: Er prüft, ob der Benutzer authentifiziert und autorisiert ist, bevor er die übereinstimmende Seitenkomponente rendert, und stellt eine Fallback-Benutzeroberfläche bereit, wenn dies nicht der Fall ist.

In .NET 8 und höher mit dem einheitlichen Blazor-Modell konfigurieren Sie dies in Ihrem App.razor und das Framework verarbeitet den kaskadierenden Parameter automatisch, wenn Sie AddCascadingAuthenticationState() in Ihrer Dienstregistrierung verwenden.

ASP.NET-Identitätsintegration

Bei den meisten Projekten müssen Sie die Authentifizierung nicht von Grund auf neu erstellen. ASP.NET Identity bietet Ihnen sofort Benutzerverwaltung, Passwort-Hashing, Zwei-Faktor-Authentifizierung und Kontobestätigung.Die Einrichtung mit Blazor beginnt 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;
 });

Mit der Blazor-Web-App-Vorlage in .NET 8+ verwendet die gegerüstete Identitäts-Benutzeroberfläche Razor-Komponenten direkt. Sie erhalten Anmelde-, Registrierungs- und Kontoverwaltungsseiten, die sich auf natürliche Weise in den Rest Ihrer Blazor-Anwendung integrieren lassen – keine umständliche Mischung aus Razor-Seiten und Blazor-Komponenten mehr.

Der ApplicationDbContext erbt von IdentityDbContext und Sie müssen Migrationen ausführen, um die Identitätstabellen zu erstellen:

public class ApplicationDbContext : IdentityDbContext<IdentityUser>
{
 public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
 : base(options) { }
}

dotnet ef migrations add InitialIdentity
dotnet ef database update

Die AuthorizeView-Komponente

Sobald der Authentifizierungsstatus durch Ihren Komponentenbaum fließt, können Sie mit AuthorizeView die Benutzeroberfläche bedingt rendern:

<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>

Mit dem Parameter context in <Authorized> erhalten Sie Zugriff auf AuthenticationState, sodass Sie Ansprüche, Rollen und die Identität des Benutzers direkt in Ihrem Markup überprüfen können.

Sie können AuthorizeView auch mit Rollen und Richtlinien verwenden:

<AuthorizeView Roles="Admin,Moderator">
 <Authorized>
 <button @onclick="DeletePost">Delete Post</button>
 </Authorized>
</AuthorizeView>

<AuthorizeView Policy="CanEditArticles">
 <Authorized>
 <button @onclick="EditArticle">Edit</button>
 </Authorized>
</AuthorizeView>

Beachten Sie Folgendes: AuthorizeView ist ein Problem mit der Benutzeroberfläche. Elemente werden ausgeblendet oder angezeigt, die zugrunde liegende Logik wird jedoch nicht geschützt. Wenn jemand Ihren API-Endpunkt aufrufen oder Ihre Methode direkt aufrufen kann, umgeht er AuthorizeView vollständig. Erzwingen Sie die Autorisierung immer auch auf der Serverseite.

Das [Autorisieren]-Attribut

Um eine ganze Seite zu schützen, wenden Sie das Attribut [Authorize] an:

@page "/admin/dashboard"
@attribute [Authorize(Roles = "Admin")]

<h1>Admin Dashboard</h1>
<p>Only administrators can see this page.</p>

Wenn ein nicht authentifizierter Benutzer zu dieser Seite navigiert, wird AuthorizeRouteView aktiviert und rendert die zuvor definierte <NotAuthorized>-Vorlage. Sie können stattdessen zu einer Anmeldeseite umleiten, indem Sie den Fall NotAuthorized mit der Navigation bearbeiten:

<NotAuthorized>
 @if (!context.User.Identity?.IsAuthenticated ?? true)
 {
 <RedirectToLogin />
 }
 else
 {
 <p>You don't have permission to access this page.</p>
 }
</NotAuthorized>

Eine einfache RedirectToLogin-Komponente könnte wie folgt aussehen:

@inject NavigationManager Navigation

@code {
 protected override void OnInitialized()
 {
 var returnUrl = Uri.EscapeDataString(Navigation.Uri);
 Navigation.NavigateTo($"/account/login?returnUrl={returnUrl}", forceLoad: true);
 }
}

Der forceLoad: true ist hier wichtig – Sie möchten eine tatsächliche HTTP-Navigation, damit die serverseitige Authentifizierungs-Middleware den Anmeldefluss ordnungsgemäß verarbeiten kann.

Rollenbasierte und richtlinienbasierte Autorisierung

Rollen sind das einfachste Modell: Weisen Sie Benutzer Gruppen wie „Admin“ oder „Editor“ zu und überprüfen Sie dann die Mitgliedschaft. Aber Policen geben Ihnen viel mehr Flexibilität.

Registrieren Sie Richtlinien in Program.cs:

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

Benutzerdefinierte Anforderungen erfordern einen 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;
 }
}

Registrieren Sie den Handler:

builder.Services.AddSingleton<IAuthorizationHandler, MinimumAgeHandler>();

In Komponenten können Sie die Autorisierung auch programmgesteuert überprüfen, wenn Sie dynamische Logik benötigen:

@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;
 }
}

Externe OAuth-Anbieter

Die Unterstützung von „Mit Google anmelden“ oder „Mit GitHub anmelden“ ist mit der ASP.NET-Authentifizierungs-Middleware unkompliziert. Diese werden serverseitig konfiguriert, da der OAuth-Fluss HTTP-Weiterleitungen erfordert.

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

Für GitHub benötigen Sie das NuGet-Paket AspNet.Security.OAuth.GitHub, da es nicht in den Standard-ASP.NET-Bibliotheken enthalten ist.

Die Anmelde-Benutzeroberfläche stellt dann Links bereit, die die externe Herausforderung auslösen:

@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>

Der API-Endpunkt löst die Herausforderung aus und verarbeitet den Rückruf:

app.MapPost("/api/auth/external-login", (string provider, HttpContext context) =>
{
 var properties = new AuthenticationProperties
 {
 RedirectUri = "/api/auth/external-callback"
 };
 return Results.Challenge(properties, [provider]);
});

Die externe Authentifizierung in Blazor erfordert immer eine ganzseitige Navigation – Sie können eine OAuth-Umleitung nicht innerhalb einer SignalR-Schaltung oder einer WebAssembly-App durchführen, ohne den Server zu durchlaufen.

Das Framework bietet AuthorizationMessageHandler zum automatischen Anhängen von Token:

builder.Services.AddHttpClient("API",
 client => client.BaseAddress = new Uri("https://api.example.com"))
 .AddHttpMessageHandler<AuthorizationMessageHandler>();

builder.Services.AddScoped(sp =>
 sp.GetRequiredService<IHttpClientFactory>().CreateClient("API"));

Für eigenständige Blazor WASM-Apps, die sich anhand ihrer eigenen API authentifizieren, implementieren Sie ein benutzerdefiniertes AuthenticationStateProvider, das das JWT analysiert:

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

Nach erfolgreicher Anmeldung speichern Sie das Token und teilen den Authentifizierungsstatus mit:

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

Ein Wort der Vorsicht: Durch das Speichern von JWTs in localStorage sind sie XSS-Angriffen ausgesetzt. Für Anwendungen mit höherer Sicherheit sollten Sie erwägen, Token nur im Speicher zu belassen und Aktualisierungstoken zu verwenden oder das Backend-for-Frontend-Muster (BFF) zu übernehmen, bei dem der Server Token verwaltet und der Client reine HTTP-Cookies verwendet.

Blazor Server vs. WebAssembly: Sicherheitsüberlegungen

Das Hosting-Modell verändert Ihre Sicherheitslage grundlegend.

Blazor Server speichert Ihre gesamte Komponentenlogik auf dem Server. Der Client sieht nur gerenderte HTML-Unterschiede über SignalR. Das bedeutet:

Sensible Logik verlässt niemals den Server
Sie können direkt von Komponenten aus auf Datenbanken und interne Dienste zugreifen – Der Authentifizierungsstatus stammt vom HttpContext des Servers bei der ersten Verbindung – Die Verbindung kann das Authentifizierungs-Cookie überleben – wenn das Cookie eines Benutzers abläuft, bleibt die Verbindung bestehen, bis die Verbindung getrennt wird
Sie sollten die Verbindungsunterbrechung ordnungsgemäß handhaben und den Authentifizierungsstatus bei erneuter Verbindung erneut überprüfen

Blazor WebAssembly läuft vollständig im Browser. Das bedeutet:

Ihr gesamter Komponentencode ist herunterladbar und einsehbar – Fügen Sie niemals Geheimnisse, Verbindungszeichenfolgen oder vertrauliche Geschäftslogik in WASM-Komponenten ein – Auth wird nur auf dem Client für UX erzwungen; Die eigentliche Durchsetzung muss auf Ihrer API-Ebene erfolgen
Die Tokenverwaltung liegt in Ihrer Verantwortung – Erwägen Sie die Verwendung des gehosteten Modells, bei dem ein Serverprojekt die Authentifizierung übernimmt und die WASM-App bereitstellt

Ein Muster, das ich für WebAssembly-Apps empfehle, besteht darin, jede Komponente so zu behandeln, als wäre sie eine „nicht vertrauenswürdige Benutzeroberfläche“ und jeder API-Endpunkt so, als würde er von einem unbekannten Client aufgerufen. Validieren Sie alles serverseitig, unabhängig davon, was der Client überprüft.

Erstellen eines benutzerdefinierten AuthenticationStateProviders

Manchmal passen die integrierten Anbieter nicht zu Ihrer Architektur. Möglicherweise integrieren Sie ein älteres Authentifizierungssystem oder Sie müssen eine Abfrage nach Authentifizierungsstatusänderungen durchführen. Hier ist ein umfassenderer benutzerdefinierter Anbieter für 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);
 }
}

Registrieren Sie es in Program.cs:

builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();
builder.Services.AddScoped<CustomAuthStateProvider>();

Die wichtigste Erkenntnis hier ist NotifyAuthenticationStateChanged – der Aufruf löst die Aktualisierung des kaskadierenden Parameters aus, der alle AuthorizeView und AuthorizeRouteView in Ihrem Komponentenbaum neu auswertet. Auf diese Weise können Sie dafür sorgen, dass die Benutzeroberfläche auf Anmelde-/Abmeldeereignisse reagiert, ohne dass eine vollständige Seitenaktualisierung erforderlich ist.

Häufige Fallstricke und Lösungen

Nachdem ich in vielen Projekten mit Blazor Auth gearbeitet habe, sehe ich hier die Probleme, die am häufigsten auftreten:

1. Verwenden von HttpContext in Blazor Server-Komponenten`HttpContext` ist während der ersten HTTP-Anfrage verfügbar, aber während SignalR-Interaktionen ist es `null` oder veraltet. Fügen Sie `IHttpContextAccessor` nicht in Komponenten ein, die nach dem ersten Rendern ausgeführt werden.

Lösung: Erfassen Sie während der Initialisierung, was Sie von HttpContext benötigen, und speichern Sie es in einem bereichsbezogenen Dienst:

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

2. Authentifizierungsstatus wird nach der Anmeldung nicht aktualisiert

Sie rufen Ihre Anmelde-API auf, sie ist erfolgreich, aber auf der Benutzeroberfläche wird weiterhin „Anmelden“ angezeigt.

Lösung: Sie müssen NotifyAuthenticationStateChanged auf Ihrem AuthenticationStateProvider aufrufen, nachdem sich der Authentifizierungsstatus geändert hat. Das Framework erkennt nicht auf magische Weise, dass ein Token gespeichert oder ein Cookie gesetzt wurde.

3. Autorisieren-Attribut funktioniert bei Komponenten nicht

Sie fügen [Authorize] zu einer Komponente hinzu, aber nicht authentifizierte Benutzer werden dadurch nicht blockiert.

Lösung: Stellen Sie sicher, dass Sie AuthorizeRouteView anstelle von einfachem RouteView in Ihrem App.razor verwenden. Der Standard RouteView ignoriert Autorisierungsattribute vollständig.

4. Durch das Vorrendern wird der Authentifizierungsstatus unterbrochen

Beim serverseitigen Vorrendern in Blazor WebAssembly ist kein Authentifizierungstoken verfügbar. Komponenten werden als nicht authentifiziert dargestellt und wechseln dann nach dem Laden von WASM in den authentifizierten Zustand.

Lösung: Deaktivieren Sie entweder das Vorrendern für authentisierungsempfindliche Seiten mit @rendermode InteractiveWebAssembly (ohne Vorrendern) oder behandeln Sie den Ladezustand ordnungsgemäß:

<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-Ablauf in lang laufenden Schaltkreisen

Blazor-Server-Verbindungen können stundenlang aktiv bleiben. Wenn Ihr Token oder Ihre Sitzung abläuft, bleibt der Benutzer in der Benutzeroberfläche „authentifiziert“, API-Aufrufe schlagen jedoch fehl.

Lösung: Führen Sie eine regelmäßige Überprüfung durch oder verwenden Sie einen 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;
 }
}

Dadurch wird alle 30 Minuten überprüft, ob der Benutzer noch existiert (und sein Sicherheitsstempel sich nicht geändert hat).

Fazit

Authentifizierung und Autorisierung in Blazor erfordern einen Umdenken gegenüber dem traditionellen Request-Response-ASP.NET. Die AuthenticationStateProvider-Abstraktion ist der Schlüssel zum Verständnis, wie alles zusammenpasst – sobald man das verinnerlicht hat, ergibt sich der Rest von selbst.

Beginnen Sie für die meisten Anwendungen mit ASP.NET Identity und den integrierten Vorlagen. Sie kümmern sich um die schwere Arbeit der Benutzerverwaltung, des Passwort-Hashings und der Token-Generierung. Fügen Sie Richtlinien und anspruchsbasierte Autorisierung hinzu, wenn Ihre Anforderungen wachsen. Fügen Sie externe OAuth-Anbieter hinzu, wenn Ihre Benutzer sie erwarten.

Das Hosting-Modell ist wichtig: Blazor Server bietet Ihnen eine traditionellere Sicherheitslage, bei der der Code auf dem Server bleibt, während WebAssembly Sie zu einem API-First-Denken drängt, bei dem der Client vom Design her nicht vertrauenswürdig ist. Keines von beiden ist von Natur aus sicherer – sie verfügen lediglich über unterschiedliche Bedrohungsmodelle.

Für welchen Ansatz Sie sich auch entscheiden, denken Sie an die goldene Regel: Die Autorisierung in der Benutzeroberfläche dient der Benutzererfahrung, die Autorisierung auf dem Server dient der Sicherheit. Erzwingen Sie immer beides.

Isoliertes JavaScript in Blazor mit zusammengestellten JS-Dateien

Wed, 18 Jun 2025 00:00:00 +0000

Wenn Sie schon einmal mit Blazor und JS Interop gearbeitet haben, haben Sie wahrscheinlich eine riesige app.js-Datei voller Zufallsfunktionen für verschiedene Komponenten erhalten. Es funktioniert, aber es wird schnell chaotisch. Glücklicherweise gibt es einen viel saubereren Ansatz: zusammengestellte JavaScript-Dateien.

Die Idee

Genau wie bei der CSS-Isolation können Sie mit Blazor eine .razor.js-Datei neben Ihrer Komponente platzieren. Das JavaScript-Modul wird bei Bedarf nur dann geladen, wenn die Komponente es tatsächlich benötigt. Keine globalen Skripte, keine Umweltverschmutzung.

Einrichten

Nehmen wir an, wir haben eine Clipboard.razor-Komponente, die Text in die Zwischenablage kopiert. Erstellen Sie direkt daneben eine Datei mit dem Namen Clipboard.razor.js:

export function copyToClipboard(text) {
 navigator.clipboard.writeText(text).then(() => {
 console.log("Copied to clipboard!");
 });
}

Beachten Sie das Schlüsselwort export – das ist wichtig. Blazor lädt es als Standard-ES-Modul.

Laden des Moduls in Blazor

In Ihrer Komponente verwenden Sie IJSRuntime, um das Modul zu importieren. Der Pfad folgt einer Konvention: ./_content/{ASSEMBLY_NAME}/{COMPONENT_PATH}.razor.js für Bibliotheken oder einfach der relative Pfad für das aktuelle Projekt.

@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();
 }
 }
}

Hier ein paar Dinge zu beachten:

– Wir laden das Modul in OnAfterRenderAsync, da JS Interop während des serverseitigen Vorrenderns nicht verfügbar ist

Wir behalten einen Verweis auf das Modul bei IJSObjectReference – Wir implementieren IAsyncDisposable, um das Modul zu bereinigen, wenn die Komponente zerstört wird

Warum das besser ist

Früher habe ich alles in einem einzigen wwwroot/js/app.js abgelegt. Es funktionierte, aber das Finden von Funktionen war mühsam und jede Seite lud JavaScript, das sie nicht brauchte. Mit zusammengestellten JS-Dateien:

Jede Komponente besitzt ihr eigenes JavaScript
Module werden nur bei Bedarf langsam geladen
Keine globalen Funktionsnamenkonflikte
Einfacher zu warten und zu löschen – wenn Sie die Komponente löschen, löschen Sie auch das JS

Ein Problem mit dem Pfad

Der Pfad, den Sie an import übergeben, hängt davon ab, ob Sie sich in einer eigenständigen Blazor-App oder einer Razor-Klassenbibliothek befinden. Bei einer regulären Blazor-App ist der Pfad relativ zu wwwroot. Die Datei .razor.js wird zur Erstellungszeit dorthin kopiert, sodass Sie sie vom Speicherort der Komponente im Projekt aus referenzieren.

Wenn Sie beim Laden des Moduls eine 404 erhalten, überprüfen Sie den Pfad noch einmal und stellen Sie sicher, dass die Datei mit .razor.js und nicht nur mit .js endet.

Ich hoffe, Ihnen hat der Beitrag gefallen! Sie können mich gerne in den sozialen Medien unter @emimontesdeoca kontaktieren.

Ressourcen

ASP.NET Core Blazor JavaScript mit zusammengestelltem JS

Blazor-Interaktivität in .NET 9 und .NET 10: Eine vollständige Anleitung

Sun, 15 Jun 2025 00:00:00 +0000

Wenn Sie in den letzten Jahren Webanwendungen mit Blazor erstellt haben, wissen Sie, dass das Framework einen langen Weg zurückgelegt hat. Was als Wahl zwischen Blazor Server und Blazor WebAssembly begann, hat sich zu einem einheitlichen, flexiblen Rendering-Modell entwickelt, mit dem Sie für jede Komponente Ihrer Anwendung die richtige Interaktivitätsstrategie auswählen können.

Mit .NET 8 haben wir den grundlegenden Wandel vollzogen – die Einführung von Rendermodi und statischem serverseitigem Rendering (SSR) als Standard. Jetzt bauen .NET 9 und .NET 10 auf dieser Grundlage mit Verbesserungen auf, die das Entwicklererlebnis reibungsloser und das Endbenutzererlebnis schneller machen.

In diesem Beitrag möchte ich Sie durch das gesamte Bild der Blazor-Interaktivität in ihrer heutigen Form führen: wie Rendermodi funktionieren, was Streaming-SSR mit sich bringt, wie verbesserte Navigation und Formularverarbeitung das Spiel verändern und was in den neuesten Versionen neu ist. Wenn Sie ein neues Blazor-Projekt planen oder über ein Upgrade nachdenken, ist dies der Leitfaden, den ich mir gewünscht habe, als ich anfing, mich mit all dem zu befassen.

Ein kurzer Blick zurück: Wie wir hierher kamen

Vor .NET 8 mussten Sie sich auf Projektebene auf ein Hostingmodell festlegen. Blazor Server bedeutete, dass alles über eine SignalR-Verbindung auf dem Server lief. Blazor WebAssembly bedeutete, dass alles im Browser lief. Bei jedem gab es Kompromisse, und diese zu vermischen war schmerzhaft.

.NET 8 hat das Spiel verändert, indem es eine einzige Projektvorlage – die Blazor Web App – eingeführt hat, die beide Modelle vereint. Das Schlüsselkonzept sind Rendermodi: Sie entscheiden pro Komponente, wie sie gerendert werden soll und wo Interaktivität stattfindet. Der Standardwert wurde zum statischen SSR, was bedeutet, dass Komponenten auf dem Server gerendert werden und einfaches HTML an den Browser senden – kein SignalR, kein WebAssembly, nur schnelles HTML.

.NET 9 hat diese Konzepte verfeinert, das Entwicklererlebnis verbessert und die Leistung optimiert. .NET 10 geht noch einen Schritt weiter und bietet eine bessere Handhabung von Wiederverbindungen, einen persistenten Komponentenstatus über alle Rendermodi hinweg und Verbesserungen bei der Bereitstellung des Blazor-Skripts selbst.

Lassen Sie uns alles aufschlüsseln.

Rendermodi in .NET 9

Das Herzstück des modernen Blazor ist das Konzept der Rendermodi. Es gibt vier Modi, die Sie kennen sollten:

1. Statisches SSR (Standard)

Wenn Sie eine neue Blazor-Web-App erstellen, werden Komponenten standardmäßig statisch auf dem Server gerendert. Der Server verarbeitet die Razor-Komponente, generiert HTML und sendet es an den Browser. Es gibt keine dauerhafte Verbindung, keine WebAssembly-Laufzeit – nur herkömmliche Anfrage/Antwort.

Dies ist perfekt für inhaltsintensive Seiten, Dashboards, die hauptsächlich Daten anzeigen, oder jede Seite, auf der Sie keine Echtzeitinteraktion benötigen.

@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();
 }
}

Diese Komponente rendert auf dem Server, erzeugt HTML und das war’s. Keine laufende Verbindung. Schnelles anfängliches Laden, ideal für SEO, minimale Serverressourcennutzung.

2. Interaktiver ServerWenn Sie Echtzeit-Interaktivität benötigen – etwa das Klicken auf Schaltflächen, die Verarbeitung von Benutzereingaben oder die dynamische Aktualisierung der Benutzeroberfläche – können Sie sich für den interaktiven Servermodus entscheiden. Dadurch wird eine SignalR-Verbindung zwischen dem Browser und dem Server hergestellt, und UI-Updates erfolgen über diese Verbindung.

@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++;
 }
}

Die @rendermode InteractiveServer-Direktive ist alles, was Sie brauchen. Die Komponente wird zunächst auf dem Server gerendert und dann wird eine SignalR-Verbindung hergestellt, um nachfolgende Interaktionen abzuwickeln. Ihre C#-Ereignishandler werden auf dem Server ausgeführt und die UI-Unterschiede werden an den Browser gesendet.

Wann sollte man es verwenden: Wenn Sie Interaktivität benötigen, benötigen Ihre Komponenten Zugriff auf serverseitige Ressourcen (Datenbanken, APIs, Dateisysteme) und Sie möchten einen schnellen anfänglichen Ladevorgang, ohne auf den Download von WebAssembly warten zu müssen.

3. Interaktive WebAssembly

Wenn Sie Interaktivität wünschen, ohne eine Serververbindung aufrechtzuerhalten, führt Interactive WebAssembly Ihre Komponentenlogik mithilfe der .NET WebAssembly-Laufzeitumgebung direkt im Browser aus.

@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();
 }
}

Der Nachteil: Es fallen anfängliche Downloadkosten für die .NET-Laufzeitumgebung und Ihre Assemblys an. Aber sobald sie geladen ist, läuft die Komponente vollständig im Browser, ohne Server-Roundtrips für UI-Interaktionen.

Wann sollte man es verwenden: Für hochgradig interaktive Komponenten, bei denen die Latenz wichtig ist (denken Sie an Rich-Text-Editoren, Zeichentools, Echtzeitfilterung), wenn Sie die Serverlast reduzieren möchten oder wenn Sie eine progressive Web-App (PWA) erstellen.

4. Interaktives Auto

Das ist der pragmatische Mittelweg und eines meiner Lieblingsfeatures. Interactive Auto beginnt mit dem serverseitigen Rendering über SignalR für den ersten Ladevorgang und lädt dann stillschweigend die WebAssembly-Laufzeit im Hintergrund herunter. Bei späteren Besuchen wird die Komponente auf WebAssembly ausgeführt.

@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;
 }
}

Dies bietet Ihnen das Beste aus beiden Welten: schnelles erstes Rendern (kein Warten auf den WASM-Download) und schließlich wird die Komponente clientseitig ausgeführt. Der Benutzer bemerkt den Übergang nicht.

Wann sollte man es verwenden: Wenn Sie sowohl schnelle anfängliche Ladevorgänge als auch eine eventuelle clientseitige Ausführung wünschen. Es ist eine großartige Standardauswahl für viele interaktive Komponenten.

Streaming SSR: Das Beste aus beiden Welten

Streaming SSR ist eine dieser Funktionen, die einfach klingt, aber einen enormen Unterschied in der wahrgenommenen Leistung macht. Hier ist die Idee: Anstatt darauf zu warten, dass alle Ihre Daten geladen sind, bevor HTML gesendet wird, sendet der Server die Seiten-Shell sofort und streamt Inhaltsaktualisierungen, sobald Daten verfügbar sind.

@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();
 }
}

Mit dem Attribut [StreamRendering] passiert Folgendes:

Der Server sendet den HTML-Code sofort mit dem Loading Spinner.
OnInitializedAsync wird ausgeführt und ruft die Daten ab.
Wenn die Daten eintreffen, streamt der Server den aktualisierten HTML-Code (die Tabelle) an den Browser.
Der Browser patcht das DOM, ohne dass die gesamte Seite neu geladen werden muss.

Der Benutzer sieht die Seite sofort mit einer Ladeanzeige, dann wird der Inhalt ausgefüllt. Kein JavaScript-Framework erforderlich. Keine WebSocket-Verbindung. Einfach cleverer Einsatz von HTTP-Streaming.Verwendungszweck: Jede statische SSR-Seite, die beim Rendern Daten abruft. Produktlistenseiten, Dashboards, Berichte – überall dort, wo das anfängliche Laden der Daten mehr als ein paar hundert Millisekunden dauern kann.

Wann sollte man es NICHT verwenden: Wenn die Daten extrem schnell geladen werden (unter 100 ms), lohnt sich der Streaming-Overhead nicht. Außerdem bietet Ihnen das Streaming von SSR keine kontinuierliche Interaktivität – dafür benötigen Sie immer noch einen interaktiven Rendermodus.

Eine der subtilen, aber wirkungsvollen Verbesserungen im modernen Blazor ist die verbesserte Navigation. Standardmäßig fängt Blazor interne Linkklicks und Formularübermittlungen ab, ruft den neuen Seiteninhalt über fetch ab und patcht das DOM, anstatt eine vollständige Browsernavigation durchzuführen.

Das bedeutet, dass sich das Navigieren zwischen statischen SSR-Seiten wie ein SPA anfühlt – kein ganzer Seiten-Flash, die Scroll-Position kann beibehalten werden und das Erlebnis ist seidenweich.

Wie es funktioniert

Wenn das Blazor-Skript (blazor.web.js) geladen wird, fängt es automatisch Klicks auf interne Links ab. Anstelle einer herkömmlichen Browser-Navigation:

Stellt eine fetch-Anfrage an die Ziel-URL.
Empfängt die HTML-Antwort.
Führt den neuen Inhalt in das vorhandene DOM ein.
Aktualisiert die URL und den Verlauf des Browsers.

Sie müssen nichts tun, um dies zu aktivieren – es ist standardmäßig aktiviert. Aber Sie können es kontrollieren:

<!-- 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>

Verbesserte Formularverarbeitung

Formulare werden gleich behandelt. Wenn Sie EditForm oder das Standardelement <form> mit der Formularverarbeitung von Blazor verwenden, werden Übermittlungen über fetch abgefangen und verarbeitet:

@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();
 }
}

Das Enhance-Attribut auf EditForm weist Blazor an, die Formularübermittlung abzufangen. Das Formular wird an den Server gesendet, der Server verarbeitet es und rendert die Seite erneut, und der aktualisierte HTML-Code wird zurückgestreamt – alles ohne eine vollständige Seitennavigation. Es fühlt sich interaktiv an, ist aber vollständig vom Server gerendert.

Beachten Sie das Attribut [SupplyParameterFromForm] – auf diese Weise bindet Blazor gepostete Formulardaten in statischen SSR-Szenarien an Ihr Modell. Es ist die Brücke zwischen traditionellen Formpfosten und dem Komponentenmodell von Blazor.

Interaktivität pro Seite und pro Komponente

Einer der leistungsstärksten Aspekte des neuen Modells besteht darin, dass Sie Rendermodi innerhalb einer einzigen Anwendung mischen können. Ihre Produktlistenseite kann ein statisches SSR sein, Ihr Warenkorb kann ein interaktiver Server sein und Ihr Produktkonfigurator kann ein interaktiver WebAssembly sein – alles in derselben App.

Rendermodi auf Komponentenebene festlegen

Mit der Direktive @rendermode können Sie den Rendermodus direkt für eine Komponente festlegen:

@* This component is interactive via Server *@
@rendermode InteractiveServer

<h3>Live Chat</h3>
<!-- chat UI here -->

Oder Sie können es festlegen, wenn Sie eine Komponente von einem übergeordneten Element verwenden:

@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 diesem Beispiel ist die Seite selbst ein statisches SSR. Die Komponente ProductConfigurator wird auf WebAssembly ausgeführt und sorgt für umfassende clientseitige Interaktivität. Die Komponente ProductReviews bleibt statisch, da sie nur Daten anzeigt.

Rendermodi global festlegen

Wenn Sie möchten, dass alle Seiten standardmäßig interaktiv sind, können Sie den Rendermodus auf der Stammebene in App.razor festlegen:

<Routes @rendermode="InteractiveServer" />
```Dadurch wird jede Seite über das Server-Rendering interaktiv. Einzelne Komponenten können dies bei Bedarf immer noch überschreiben.

### Wichtige Regeln, die Sie beachten sollten

Beim Mischen von Rendermodi sind einige Einschränkungen zu beachten:

- **Eine untergeordnete Komponente kann keinen „interaktiveren“ Rendermodus als ihre übergeordnete Komponente haben.** Wenn eine übergeordnete Komponente statisch ist, können untergeordnete Komponenten statisch oder interaktiv sein. Wenn ein übergeordnetes Element jedoch ein interaktiver Server ist, kann ein untergeordnetes Element kein interaktives WebAssembly sein (es müsste ein Server oder ein automatischer Server sein).
- **Interaktive Komponenten können bereichsbezogene Dienste von statischen übergeordneten Komponenten nicht direkt nutzen.** Wenn eine Komponente auf WebAssembly ausgeführt wird, kann sie nicht direkt auf serverseitige `DbContext`-Instanzen zugreifen – Sie benötigen eine API-Ebene.
- **Der Status wird nicht automatisch zwischen den Rendermodi übertragen.** Wenn eine Komponente auf dem Server vorgerendert wird und dann zu WebAssembly wechselt, müssen Sie die Statuspersistenz explizit behandeln – mehr dazu im Abschnitt .NET 10.

## Was ist neu in .NET 10?

.NET 10 setzt den Ansatz der inkrementellen Verbesserung fort und konzentriert sich auf Zuverlässigkeit und Entwicklererfahrung. Hier sind die Highlights für die Blazor-Interaktivität:

### Verbessertes Wiederverbindungserlebnis

Wenn Sie den Interactive Server-Modus in der Produktion verwendet haben, sind Sie wahrscheinlich auf das Overlay für die erneute Verbindung gestoßen – den Moment, in dem die SignalR-Verbindung unterbrochen wird und dem Benutzer die Meldung „Verbindung wird wiederhergestellt …“ angezeigt wird. In .NET 10 wird dieses Erlebnis deutlich besser.

Die Wiederverbindungslogik ist jetzt intelligenter bei Wiederholungsversuchen. Anstelle eines festen Wiederholungsintervalls wird eine Backoff-Strategie verwendet, die sich der Situation anpasst. Die Benutzeroberfläche während der erneuten Verbindung ist ebenfalls ausgefeilter und Sie haben bessere Hooks, um das Erlebnis anzupassen:

```razor
<!-- 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>

Das Framework versucht jetzt auch aggressiver, die Verbindung bei vorübergehenden Ausfällen wiederherzustellen, und kann den Schaltkreisstatus zuverlässiger wiederherstellen. Dies bedeutet für Ihre Benutzer weniger „Bitte laden Sie die Seite neu“-Momente.

Persistenter Komponentenstatus über alle Rendermodi hinweg

Das ist eine große Sache. Wenn in .NET 9 eine Komponente auf dem Server vorgerendert wird und dann zu WebAssembly wechselt (oder zwischen den Rendermodi wechselt), geht der Komponentenstatus verloren. Die Komponente wird effektiv neu initialisiert, was zu doppelten Datenabrufen und einer flackernden Benutzeroberfläche führen kann.

.NET 10 verbessert den PersistentComponentState-Dienst, um bei Übergängen im Rendermodus reibungsloser zu funktionieren:

@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();
 }
}

Mit den Verbesserungen in .NET 10 funktioniert dieses Muster zuverlässiger. Der während des Vorrenderns serialisierte Status ist ordnungsgemäß verfügbar, wenn die Komponente im interaktiven Modus initialisiert wird, wodurch doppelte Datenabrufe und das kurze Flackern vermieden werden, das Benutzer möglicherweise sehen.

Blazor-Skript als statisches Web-Asset

In früheren Versionen wurde die Blazor-JavaScript-Datei (blazor.web.js) vom internen Endpunkt des Frameworks bereitgestellt. In .NET 10 wird es als statisches Web-Asset bereitgestellt. Das mag nach einer kleinen Änderung klingen, hat aber praktische Vorteile:- Besseres Caching: Statische Web-Assets erhalten die richtigen Cache-Header und Fingerabdruck-URLs, sodass Browser sie effektiver zwischenspeichern können.

CDN-freundlich: Da es sich um eine reguläre statische Datei handelt, können CDNs sie zwischenspeichern und von Edge-Standorten aus bereitstellen.
Komprimierung: Die statische Web-Asset-Komprimierung wird automatisch angewendet, wodurch die Skriptgröße auf der Leitung reduziert wird.

Sie müssen die Art und Weise, wie Sie darauf verweisen, nicht ändern – das Framework verarbeitet den aktualisierten Pfad automatisch.

Best Practices: Auswahl des richtigen Rendermodus

Nachdem ich in mehreren Projekten mit all diesen Modi gearbeitet habe, ist hier mein Entscheidungsrahmen:

Beginnen Sie mit statischem SSR

Machen Sie statisches SSR zu Ihrem Standard. Auf den meisten Seiten in den meisten Anwendungen geht es hauptsächlich um die Anzeige von Daten. Produktseiten, Blogbeiträge, Benutzerprofile, Einstellungsseiten – diese erfordern keine Echtzeit-Interaktivität. Statisches SSR bietet Ihnen die beste Leistung, den geringsten Ressourcenverbrauch und das einfachste mentale Modell.

Fügen Sie Interaktivität nur bei Bedarf hinzu

Identifizieren Sie die spezifischen Komponenten, die in Echtzeit auf Benutzerinteraktionen reagieren müssen. Ein „Gefällt mir“-Button, ein Chat-Widget, eine Drag-and-Drop-Oberfläche – all das braucht Interaktivität. Aber die Seite um sie herum wahrscheinlich nicht.

Verwenden Sie Interactive Auto als interaktiven Go-To-Modus

Wenn Sie Interaktivität benötigen, ist Interactive Auto oft die beste Standardwahl. Es ermöglicht Ihnen schnelle anfängliche Ladevorgänge (Server-Rendering) mit anschließender clientseitiger Ausführung (WebAssembly). Der Benutzer erhält das Beste aus beiden Welten und Sie schreiben Ihren Code nur einmal.

Reservieren Sie den interaktiven Server für bestimmte Fälle

Verwenden Sie Interactive Server, wenn:

Ihre Komponente benötigt direkten Zugriff auf Serverressourcen (Datenbanken, Dateisystem, interne APIs).
Die Downloadgröße von WebAssembly ist ein Problem und Sie können Auto nicht verwenden.
Aus Sicherheitsgründen (z. B. Verarbeitung sensibler Daten) muss die Komponente immer auf dem Server laufen.

Nutzen Sie Streaming SSR großzügig

Wenn Ihre statischen SSR-Seiten Daten abrufen, fügen Sie [StreamRendering] hinzu. Die Kosten sind minimal und die wahrgenommene Leistungsverbesserung ist erheblich. Benutzer sehen, dass Inhalte nach und nach angezeigt werden, anstatt auf eine leere Seite zu starren.

Behandeln Sie Zustandsübergänge sorgfältig

Wenn Sie Interactive Auto verwenden oder Pre-Rendering mit WebAssembly mischen, verwenden Sie immer PersistentComponentState, um doppelte Datenabrufe zu vermeiden. Ihre Nutzer werden es Ihnen danken, dass es keine flimmernden Inhalte gibt.

Behalten Sie den Komponentenbaum im Hinterkopf

Beachten Sie die Hierarchieregeln für den Rendermodus. Planen Sie Ihren Komponentenbaum so, dass interaktive Grenzen sinnvoll sind. Ein gängiges Muster ist ein statisches Layout mit eingebetteten interaktiven „Inseln“, wo nötig:

@* Layout: Static SSR *@
<header>
 <NavMenu />
 <UserMenu @rendermode="InteractiveServer" /> @* Needs real-time auth state *@
</header>

<main>
 @Body
</main>

<footer>
 <ChatWidget @rendermode="InteractiveAuto" /> @* Rich interactivity *@
</footer>

Fazit

Das Interaktivitätsmodell von Blazor in .NET 9 und .NET 10 stellt einen ausgereiften, durchdachten Ansatz zum Erstellen von Webanwendungen dar. Die Möglichkeit, Rendermodi pro Komponente auszuwählen, die nahtlose erweiterte Navigation, Streaming-SSR und die kontinuierlichen Verbesserungen bei der Wiederverbindung und der Zustandsverwaltung machen es zu einer überzeugenden Wahl für eine Vielzahl von Anwendungen.Die wichtigste Erkenntnis ist, dass Interaktivität ein Spektrum und keine binäre Wahl ist. Der Großteil Ihrer Bewerbung kann statisch sein. Einige Teile erfordern servergesteuerte Interaktivität. Einige könnten von der Ausführung im Browser profitieren. Blazor ermöglicht es Ihnen jetzt, diese Wahl mit der feinsten Granularität – der einzelnen Komponente – zu treffen, ohne das Framework zu bekämpfen.

Wenn Sie ein neues Projekt starten, ist mein Rat einfach: Erstellen Sie eine Blazor-Web-App, beginnen Sie mit statischem SSR, fügen Sie [StreamRendering] zu datenintensiven Seiten hinzu und befördern Sie einzelne Komponenten nur dann in interaktive Modi, wenn Sie sie benötigen. Am Ende erhalten Sie eine Anwendung, die schnell, effizient und gut skalierbar ist.

Viel Spaß beim Codieren. Wenn Sie Fragen haben, können Sie sich wie immer jederzeit an uns wenden!

Minimale APIs in .NET: Erstellen leichter HTTP-APIs

Thu, 10 Apr 2025 00:00:00 +0000

Wenn Sie schon seit einiger Zeit APIs mit ASP.NET Core erstellen, sind Sie wahrscheinlich mit dem Controller-basierten Ansatz bestens vertraut: Erstellen Sie eine Controller-Klasse, dekorieren Sie sie mit Attributen, injizieren Sie Ihre Dienste über den Konstruktor und vernetzen Sie Ihre Routen. Es funktioniert, und es funktioniert gut – aber manchmal fühlt es sich so an, als würden Sie eine Menge Zeremonien schreiben, die darauf hinauslaufen, „diese Anfrage anzunehmen, etwas zu tun und eine Antwort zu geben“.

Genau dieses Problem wollen Minimal APIs lösen. Mit den in .NET 6 eingeführten Minimal-APIs können Sie HTTP-Endpunkte mit sehr wenig Boilerplate definieren. Keine Controller, keine Attribute, kein Jonglieren mit Startklassen – nur direkte Route-zu-Handler-Zuordnungen in einem klaren, funktionalen Stil.

In diesem Beitrag möchte ich Sie durch alles führen, was Sie über Minimal-APIs wissen müssen: von Ihrem ersten Endpunkt bis hin zur Organisation großer Anwendungen, der Handhabung von Authentifizierung, Validierung, OpenAPI-Dokumenten und Leistungsüberlegungen. Kommen wir zur Sache.

Warum minimale APIs?

Bevor wir loslegen, sprechen wir darüber, warum Sie Minimal-APIs dem traditionellen Controller-basierten Ansatz vorziehen würden.

Controller sind großartig, wenn Sie ein strukturiertes, eigenwilliges Framework benötigen. Sie bieten Ihnen sofort Modellbindung, Filter, Inhaltsverhandlung und eine klare Trennung der Anliegen. Bei großen Unternehmensanwendungen mit Dutzenden von Entwicklern kann die von Controllern erzwungene Konsistenz ein echter Vorteil sein.

Minimale APIs hingegen glänzen, wenn Sie wollen:

Weniger Boilerplate – keine Controller-Klassen, keine [ApiController]-Attribute, keine separate Startkonfiguration.
Schnellerer Start – weniger reflexionsbasierte Vorgänge beim Booten.
Einfacheres mentales Modell – eine Route wird direkt einem Handler zugeordnet. Das ist es.
Microservice-freundlich – wenn Ihre API 5–10 Endpunkte hat, kann sich ein vollständiges Controller-Setup wie ein Overkill anfühlen.

Die gute Nachricht ist, dass dies keine Entweder-Oder-Entscheidung ist. Sie können Controller und Minimal-APIs im selben Projekt mischen. Wenn Sie sich jedoch erst einmal mit dem Minimalansatz vertraut gemacht haben, werden Sie vielleicht öfter zu ihm greifen, als Sie erwarten würden.

Erste Schritte

Lassen Sie uns eine Minimal-API von Grund auf erstellen. Wenn Sie das .NET SDK installiert haben, ist es so einfach:

dotnet new web -n MyMinimalApi
cd MyMinimalApi

Dadurch erhalten Sie ein Program.cs, das etwa so aussieht:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/", () => "Hello World!");

app.Run();

Das ist es. Das ist eine funktionierende API. Kein Startup.cs, keine Controller-Klasse, keine Routing-Konfiguration. Sie führen dotnet run aus, drücken http://localhost:5000 und erhalten „Hallo Welt!“ zurück. Die Einfachheit hier ist der springende Punkt.

Machen wir es mit einer klassischen Todo-API etwas nützlicher:

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

Wir haben vollständiges CRUD in weniger als 30 Zeilen. Das ist die Kraft des Minimalansatzes.

Routenhandler

Routenhandler sind die Funktionen, die ausgeführt werden, wenn eine Anfrage mit einer Route übereinstimmt. Sie haben mehrere Möglichkeiten, sie zu definieren.

Lambda-Ausdrücke

Der gebräuchlichste Ansatz und was Sie in den meisten Beispielen sehen werden:

app.MapGet("/hello", () => "Hello!");
app.MapGet("/hello/{name}", (string name) => $"Hello, {name}!");

Methodengruppen

Für komplexere Logik können Sie auf eine benannte Methode verweisen:

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);
}
```Dies ist mein bevorzugter Ansatz für alles, was über einen Einzeiler hinausgeht. Dadurch bleibt Ihr Routenzuordnungsabschnitt sauber und lesbar – Sie können auf einen Blick sehen, welche Endpunkte vorhanden sind, ohne sich durch Implementierungsdetails wühlen zu müssen.

### Lokale Funktionen

Sie können auch lokale Funktionen verwenden, was nützlich ist, wenn Sie Handler in der Nähe ihrer Routendefinitionen halten möchten:

```csharp
app.MapGet("/health", CheckHealth);

IResult CheckHealth()
{
 // Some health check logic
 return Results.Ok(new { Status = "Healthy", Timestamp = DateTime.UtcNow });
}

Parameterbindung

Eines der Dinge, die ich an Minimal APIs wirklich schätze, ist die intuitive Parameterbindung. Das Framework ermittelt basierend auf Kontext und Typ, wo Werte abgerufen werden sollen.

Routenparameter

app.MapGet("/users/{id:int}", (int id) => $"User {id}");
app.MapGet("/files/{*path}", (string path) => $"File: {path}"); // catch-all

Parameter der Abfragezeichenfolge

app.MapGet("/search", (string? query, int page = 1, int pageSize = 20) =>
 Results.Ok(new { query, page, pageSize }));

Nullable-Typen werden zu optionalen Parametern. Standardwerte funktionieren genau so, wie Sie es erwarten.

Anforderungstext

app.MapPost("/orders", (Order order) =>
{
 // 'order' is automatically deserialized from the JSON body
 return Results.Created($"/orders/{order.Id}", order);
});

Header und Servicebindung

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 und HttpRequest

Wenn Sie Zugriff auf eine niedrigere Ebene benötigen:

app.MapGet("/info", (HttpContext context) =>
{
 var userAgent = context.Request.Headers.UserAgent.ToString();
 var ip = context.Connection.RemoteIpAddress?.ToString();
 return Results.Ok(new { userAgent, ip });
});

Benutzerdefinierte Bindung mit BindAsync

Für komplexe Typen können Sie eine statische BindAsync-Methode implementieren:

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

Das ist unglaublich kraftvoll. Sie definieren die Bindungslogik einmal und verwenden sie auf allen Ihren Endpunkten wieder.

Validierung

Ein Bereich, in dem Minimal-APIs im Vergleich zu Controllern nicht so sofort einsatzbereit sind, ist die Modellvalidierung. Es gibt keine automatische [Required]- oder [StringLength]-Durchsetzung. Aber es gibt klare Muster für den Umgang damit.

Manuelle Validierung

Der einfachste Ansatz – einfach im Handler validieren:

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

Verwendung einer Validierungsbibliothek

Für alles, was nicht trivial ist, würde ich empfehlen, nach FluentValidation oder einer ähnlichen Bibliothek zu greifen:

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

Sie können dies über Endpunktfilter mit Ihren Endpunkten verbinden, was uns zum nächsten Abschnitt bringt.

Endpunktfilter

Endpunktfilter sind eine der besten Funktionen von Minimal APIs. Betrachten Sie sie als Middleware, die jedoch auf bestimmte Endpunkte und nicht auf die gesamte Pipeline beschränkt ist. Sie wurden in .NET 7 eingeführt und eignen sich hervorragend für übergreifende Themen.

Basisfilter

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

Validierungsfilter mit FluentValidation

Hier wird es wirklich leistungsstark – ein wiederverwendbarer Validierungsfilter:

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>>();

Protokollierungsfilter

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

Sie können mehrere Filter verketten und sie werden in der Reihenfolge ausgeführt, in der sie hinzugefügt werden – genau wie Middleware.

OpenAPI / Swagger-Integration

Eine gute API-Dokumentation ist nicht mehr optional. Glücklicherweise bieten Minimal APIs über das Paket Microsoft.AspNetCore.OpenApi erstklassige Unterstützung für OpenAPI.

Grundeinrichtung

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();

Umfangreiche Endpunkt-Metadaten

Sie können detaillierte Informationen zu Ihren Endpunkten bereitstellen:

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();

Verwenden von WithOpenApi zur Anpassung

Für eine differenzierte Kontrolle über das generierte OpenAPI-Dokument:

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

Dadurch erhalten Sie das gleiche Maß an Dokumentationskontrolle wie mit Swashbuckle-XML-Kommentaren zu Controllern, jedoch auf explizitere, Code-First-Art.

Authentifizierung und Autorisierung

Das Sichern von Minimal-API-Endpunkten folgt den gleichen Mustern wie der Rest von ASP.NET Core – Sie wenden sie nur anders an.

Grundeinrichtung```csharp

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();


### Anwenden der Autorisierung auf Endpunkte

```csharp
// 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();

Beachten Sie, wie Sie ClaimsPrincipal direkt in Ihre Handler-Parameter einfügen können – den Rest erledigt das Framework. Dies ist eines dieser kleinen Dinge, die Minimal APIs wirklich elegant erscheinen lassen.

Große APIs organisieren

Der Elefant im Raum mit Minimal APIs ist die Organisation. Wenn Ihr Program.cs 50 Endpunkte hat, wird es ein Chaos. Hier sind die Muster, die ich verwende, um die Dinge überschaubar zu halten.

Routengruppen

Mit Routengruppen (eingeführt in .NET 7) können Sie die Konfiguration über verwandte Endpunkte hinweg teilen:

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

Alle Endpunkte in der Gruppe haben das Präfix /todos, das Tag Todos und die Autorisierungsanforderung gemeinsam. Sauber.

Erweiterungsmethoden

Dies ist das Muster, das wirklich skaliert. Verschieben Sie jede Gruppe von Endpunkten in eine eigene statische Klasse:

// 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();

Ihr Program.cs wird zu einem Inhaltsverzeichnis für Ihre API. Jede Endpunktgruppe befindet sich in einer eigenen Datei. Dies ist der Ansatz, den ich für Produktionsanwendungen empfehle.

Die Carter-Bibliothek

Wenn Sie noch mehr Struktur wünschen, bietet die Carter-Bibliothek einen modulbasierten Ansatz:

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 erkennt und registriert automatisch alle Module. Es ist ein schöner Mittelweg zwischen dem reinen Minimal-API-Ansatz und vollständigen Controllern.

TypedResults und Antworttypen

Ab .NET 7 können Sie für typsichere Antworten TypedResults anstelle von Results verwenden. Dies mag wie eine kleine Änderung erscheinen, hat aber echte Vorteile für die OpenAPI-Dokumentation und Testbarkeit.

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

Der Rückgabetyp Results<Ok<Todo>, NotFound> teilt dem Framework (und Ihren OpenAPI-Dokumenten) explizit mit, welche Antworttypen dieser Endpunkt erzeugen kann. Kein Raten mehr, keine manuellen Produces<>() Aufrufe für einfache Fälle.

Für mehrere mögliche Ergebnisse:

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

Ich habe begonnen, TypedResults in allen neuen Projekten zu verwenden. Der Compiler erkennt Abweichungen zwischen Ihren deklarierten Rückgabetypen und dem, was Sie tatsächlich zurückgeben, wodurch eine ganze Reihe von Laufzeitüberraschungen vermieden werden.

Leistungsüberlegungen

Eines der Verkaufsargumente von Minimal APIs ist die Leistung, und es lohnt sich zu verstehen, warum sie schneller sind.

Reduzierter Startaufwand. Controller verlassen sich stark auf Reflektion, um Endpunkte zu erkennen, Modelle zu binden und Filter anzuwenden. Minimale APIs verwenden Quellgeneratoren (ab .NET 7), um Bindungscode zur Kompilierungszeit zu generieren. Dies bedeutet weniger Arbeit beim Start und weniger Speicherzuweisung pro Anfrage.

Keine MVC-Pipeline. Controller-basierte APIs durchlaufen die gesamte MVC-Pipeline: Aktionsauswahl, Modellbindung, Aktionsfilter, Ergebnisausführung. Minimale APIs überspringen all das und gehen direkt vom Routing zu Ihrem Handler.

RequestDelegate-Kompilierung. Das Framework kompiliert Ihre Lambda-Ausdrücke in optimierte RequestDelegate-Instanzen. Der resultierende Code kommt dem sehr nahe, was Sie von Hand schreiben würden, wenn Sie direkt mit HttpContext arbeiten würden.

Hier einige praktische Tipps zur Maximierung der Leistung:

// 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));
```Erwähnenswert ist auch, dass der Leistungsunterschied zwischen Controllern und Minimal-APIs mit jeder .NET-Version immer kleiner wird. Bei den meisten Anwendungen wird der Unterschied nicht Ihr Engpass sein, sondern Ihre Datenbankabfragen und externen Serviceanrufe. Wählen Sie basierend auf Entwicklererfahrung und Projektanforderungen, nicht auf Benchmarks.

## Fazit

Minimale APIs haben seit ihrer Einführung in .NET 6 einen langen Weg zurückgelegt. Was als „Hallo Welt“-Demofunktion begann, hat sich zu einer legitimen Wahl für Produktions-APIs entwickelt. Mit Endpunktfiltern, Routengruppen, typisierten Ergebnissen und solider OpenAPI-Unterstützung verfügen Sie über alles, was Sie zum Aufbau gut strukturierter, wartbarer Dienste benötigen.

Meine Empfehlung? Wenn Sie ein neues API-Projekt starten – insbesondere einen Microservice oder eine fokussierte interne API – probieren Sie Minimal APIs ernsthaft aus. Nutzen Sie das Erweiterungsmethodenmuster für die Organisation, stützen Sie sich bei übergreifenden Anliegen auf Endpunktfilter und nutzen Sie `TypedResults` für die Typensicherheit.

Bei bestehenden Controller-basierten Projekten gibt es keine Eile bei der Migration. Beide Ansätze funktionieren gut und Sie können sie sogar nebeneinander verwenden. Aber wenn Sie das nächste Mal einen kleinen Dienst oder eine schnelle interne API hinzufügen müssen, überspringen Sie die Controller und gehen Sie auf ein Minimum zurück. Möglicherweise kehren Sie nicht zurück.

Viel Spaß beim Codieren!

Verwendung von isoliertem CSS in Blazor-Komponenten

Wed, 12 Mar 2025 00:00:00 +0000

Eine Sache, die mich bei der Arbeit mit Blazor immer gestört hat, war, wie leicht es war, versehentlich Stile über Komponenten hinweg aufzuteilen. Sie fügten eine Klasse in einer Komponente hinzu und plötzlich sah etwas anderes auf einer völlig anderen Seite aus. Es stellte sich heraus, dass Blazor hierfür eine integrierte Lösung hat: CSS-Isolation.

Was ist CSS-Isolation?

Mithilfe der CSS-Isolation können Sie Stile auf eine bestimmte Komponente beschränken. Blazor erreicht dies, indem es zum Zeitpunkt der Erstellung ein eindeutiges Attribut für jede Komponente generiert und es an die CSS-Selektoren anhängt. Ihre Stile gelten also nur für die Komponente, zu der sie gehören.

Keine Notwendigkeit für BEM-Namen, keine Notwendigkeit für verrückte Spezifitäts-Hacks. Nur sauberes CSS mit Gültigkeitsbereich.

Wie man es benutzt

Nehmen wir an, Sie haben eine Komponente namens 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; }
}

Um isolierte Stile hinzuzufügen, erstellen Sie einfach eine Datei mit demselben Namen, aber mit der Erweiterung .razor.css. In diesem Fall: 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;
}

Und das ist es! Blazor übernimmt es automatisch und beschränkt diese Stile nur auf die Komponente Card. Wenn Sie irgendwo anders eine andere .card-Klasse haben, ist diese nicht betroffen.

Wie es unter der Haube funktioniert

Wenn Sie Ihr Projekt erstellen, schreibt Blazor HTML und CSS neu. Ihre Komponente erhält ein eindeutiges Attribut wie b-3x8qz7k2f1 und die CSS-Selektoren erhalten dieses Attribut angehängt:

.card[b-3x8qz7k2f1] {
 border: 1px solid var(--color-border);
 /* ... */
}

Das generierte CSS-Bundle wird als {ProjectName}.styles.css bereitgestellt. Stellen Sie sicher, dass Sie dies in Ihrem index.html oder _Host.cshtml haben:

<link href="YourApp.styles.css" rel="stylesheet" />

Wenn Sie diesen Link verpassen, werden Ihre isolierten Stile nicht angezeigt und Sie werden sich 30 Minuten lang fragen, was los ist. Vertrauen Sie mir, ich war dort.

Targeting untergeordneter Elemente

Beachten Sie, dass isoliertes CSS standardmäßig nur auf die Elemente der aktuellen Komponente angewendet wird. Wenn Sie Elemente innerhalb einer untergeordneten Komponente formatieren möchten, benötigen Sie den Kombinator ::deep:

::deep .child-element {
 color: red;
}

Dadurch wird Blazor angewiesen, den Stil auch auf übereinstimmende Elemente innerhalb untergeordneter Komponenten anzuwenden. Ziemlich praktisch, wenn Sie eine Wrapper-Komponente haben, die ihre untergeordneten Komponenten formatieren muss.

Wann man es verwenden sollte

Ich verwende mittlerweile CSS-Isolation für so ziemlich jede Komponente. Es sorgt dafür, dass die Dinge sauber und vorhersehbar bleiben. Das einzige Mal, dass ich es nicht verwende, sind wirklich globale Stile wie Zurücksetzen, Typografie oder Designvariablen – diese werden in einer gemeinsam genutzten CSS-Datei gespeichert.

Ich hoffe, Ihnen hat der Beitrag gefallen! Sie können mich gerne in den sozialen Medien unter @emimontesdeoca kontaktieren.

Ressourcen

ASP.NET Core Blazor CSS-Isolation

Kontrollieren Sie die Weihnachtsausgaben mit Semantic Kernel

Sat, 28 Dec 2024 00:00:00 +0000

## Einführung

Wenn die Weihnachtszeit näher rückt, kann die Verwaltung der Ausgaben zu einer Herausforderung werden, insbesondere angesichts der Flut an Einkäufen und Geschenkkäufen. In diesem Blogbeitrag untersuchen wir, wie Sie künstliche Intelligenz nutzen können, um mithilfe von .NET-Technologien den Überblick über Ihre Weihnachtsausgaben zu behalten. Durch die Analyse von Belegen mithilfe des semantischen Kernels und der KI können wir wichtige Details wie Geschäftsnamen, Daten, Artikellisten und Gesamtbeträge effizient extrahieren. Mit dieser Lösung können Sie Ihre Weihnachtsausgaben mühelos überwachen und verwalten und so sicherstellen, dass Sie den Überblick über Ihr Budget behalten, ohne die Belege manuell überprüfen zu müssen.

Calendario de Adviento de Inteligencia Artificial 2024 in Español

Dieses Projekt wurde durch meine Teilnahme am Calendario de Adviento de Inteligencia Artificial 2024 en Español inspiriert, einer Online-Veranstaltung zum Thema KI. Weitere Informationen zur Veranstaltung finden Sie unter diesem Dev.to-Link.

Das Projekt

Für dieses Projekt verwenden wir Azure OpenAI, einen Dienst, der es uns ermöglicht, leistungsstarke KI-Modelle wie GPT-4 zur Verarbeitung und Analyse von Bildern zu nutzen. Der Prozess umfasst mehrere Schritte, von der Einrichtung des Backend-API-Dienstes bis zur Integration in ein Blazor-Frontend für Bild-Uploads. Wir werden auch .NET Aspire verwenden, eine Komponente, die dabei hilft, alles nahtlos zu verbinden.

Voraussetzungen

Bevor wir uns mit dem Code befassen, stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen:

.NET 9
Azure OpenAI-Zugriff (API-Schlüssel)
Visual Studio oder Visual Studio Code
Grundkenntnisse über Blazor, HTTP-Clients und API-Entwicklung

Die Visual Studio-Lösung

Am Ende werden wir so etwas haben. Ich halte die Dinge gerne getrennt und mit coolen Namen, also sieht es so aus:

Aber lasst uns Schritt für Schritt vorgehen und Dinge erschaffen!

Schritt 0: Die Modelle

Der Kern der Receipt Scanner-Anwendung basiert auf mehreren Schlüsselmodellen, die die Interaktion zwischen Front-End, API und KI-Diensten erleichtern. Nachfolgend sind die wichtigsten Modelle aufgeführt, die in diesem Projekt verwendet werden:

AnalyzeReceiptRequest
Dieses Modell stellt die Anforderungsstruktur zur Analyse einer Quittung dar. Es enthält die Eigenschaft ImageBytes, die das Byte-Array des zu verarbeitenden Belegbilds enthält.
```
public class AnalyzeReceiptRequest
{
 public byte[] ImageBytes { get; set; }
}
```
ReceiptAnalyzeResult
Dieses Modell erfasst das Ergebnis nach der Bearbeitung eines Belegs. Es enthält die aus der Quittung extrahierten strukturierten Daten, z. B. den Namen des Geschäfts, das Datum, die Artikel und den Gesamtbetrag.
```
public class ReceiptAnalyzeResult
{
 public DateTime CreatedAt { get; set; }
 public ReceiptData Result { get; set; }
}
```
ReceiptData
Dies ist das Modell, das die strukturierten Belegdaten enthält. Es enthält Eigenschaften für den Geschäftsnamen, das Datum, eine Artikelliste (mit Name und Preis jedes Artikels) und den Gesamtbetrag auf der Quittung.
```
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
Jeder Artikel auf der Quittung wird durch dieses Modell dargestellt. Es enthält den Artikelnamen und seinen Preis.

public class ReceiptItem
{
 public string Name { get; set; }
 public decimal? Price { get; set; }
}
```Diese Modelle dienen als Grundlage für die Datenübertragung zwischen Client und Server und sorgen so für einen reibungslosen Informationsfluss. Die API empfängt das Belegbild und verarbeitet im Gegenzug ein strukturiertes JSON-Objekt und gibt es zurück, das vom Front-End problemlos verwendet werden kann.

Schritt 1: Einrichten des Backend-API-Dienstes

Der erste Schritt beim Erstellen dieser Anwendung ist die Einrichtung eines API-Dienstes zur Analyse von Belegbildern. Wir verwenden die Azure OpenAI-API, um Informationen aus den Belegbildern zu extrahieren. Hier ist eine Aufschlüsselung, wie alles zusammenpasst:

KI-Service – Ein tiefer Einblick

Der KI-Service ist das Herzstück unseres Beleganalysesystems. Es ist für die Kommunikation mit der API von Azure OpenAI verantwortlich, um die Bilddaten zu verarbeiten und aussagekräftige Erkenntnisse zurückzugeben. Die Klasse AiApiClient ist der Client, der alle Interaktionen mit der Azure OpenAI-API abwickelt.

AI-Client-Implementierung

AiApiClient ist die Schlüsselkomponente, die für das Senden des Belegbilds (im Byte-Array-Format) an die Azure OpenAI-API verantwortlich ist. Es übernimmt die Kommunikation, Fehlerprotokollierung und Datenanalyse:

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 diesem Teil des Codes definieren wir die Methode AnalyzeAsync, die verantwortlich ist für:

Senden des Bildbyte-Arrays an die Azure OpenAI-API.
Umgang mit etwaigen Fehlern oder erfolglosen Antworten der API.
Parsen der zurückgegebenen JSON-Daten in ein strukturiertes Ergebnis (ReceiptAnalyzeResult).

Zu den Vorteilen der Aufteilung dieser Funktionalität in einen dedizierten Dienst (AiApiClient) gehören:

Fehlerbehandlung: Zentralisierte Behandlung von Fehlern wie Netzwerkproblemen oder ungültigen Antworten.
Protokollierung: Korrekte Protokollierung von Anfragen und Antworten zur Überwachung des Systemverhaltens.

API-Dienst – Bearbeitung von Anfragen und Antworten

Der API-Dienst fungiert als Vermittler zwischen der Frontend-Blazor-Anwendung und dem KI-Dienst. Dieser Dienst ist dafür verantwortlich, die Bilddaten entgegenzunehmen, sie an den KI-Dienst weiterzuleiten und die Analyseergebnisse an den Kunden zurückzusenden.

API-Endpunkt

In diesem Schritt definieren wir einen einfachen API-Endpunkt, um Belegbilder zu akzeptieren, sie zur Verarbeitung an den AI-Dienst weiterzuleiten und die Ergebnisse an den Client zurückzugeben:

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();

Dieser Endpunkt:

Akzeptiert das Belegbild als Teil des Anforderungstexts.
Ruft die Endopint-Methode AiService auf, um das Bild zur Verarbeitung an Azure OpenAI zu senden.
Gibt das Analyseergebnis an den Client zurück.

Schritt 2: Einrichten des Blazor-Frontends

Nachdem wir nun das Backend eingerichtet haben, wenden wir uns dem Blazor-Frontend zu. Hier können Benutzer ihre Belegbilder zur Analyse hochladen und die Ergebnisse sehen.

Blazor-Seitenimplementierung

Die Blazor-Seite bietet eine einfache Schnittstelle, über die Benutzer mehrere Belegbilder hochladen und dann die Analyseergebnisse in einer Tabelle anzeigen können. Hier ist der Code für die Seite:

@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;
 }
 }
}

```Auf dieser Seite können Benutzer Belege hochladen und die Analyseergebnisse in einer Tabelle mit Filialnamen, Daten, Gesamtbeträgen und der Artikelliste anzeigen.

<p align="center">
<img src="https://imgur.com/BLswKhm.png">
</p>

## Schritt 3: .NET Aspire

<p align="center">
<img src="https://imgur.com/ja56RWN.png">
</p>

### Was ist .NET Aspire?

.NET Aspire ist eine Reihe leistungsstarker Tools, Vorlagen und Pakete zum Erstellen beobachtbarer, produktionsbereiter Apps. .NET Aspire wird über eine Sammlung von NuGet-Paketen bereitgestellt, die spezifische Cloud-native Probleme behandeln. Cloud-native Apps bestehen oft aus kleinen, miteinander verbundenen Teilen oder Mikrodiensten und nicht aus einer einzigen, monolithischen Codebasis. Cloud-native Apps verbrauchen im Allgemeinen eine große Anzahl von Diensten wie Datenbanken, Messaging und Caching. Informationen zum Support finden Sie in der .NET Aspire-Supportrichtlinie.

Eine verteilte Anwendung ist eine Anwendung, die Rechenressourcen über mehrere Knoten hinweg nutzt, beispielsweise Container, die auf verschiedenen Hosts ausgeführt werden. Solche Knoten müssen über Netzwerkgrenzen hinweg kommunizieren, um den Benutzern Antworten zu liefern. Eine cloudnative App ist eine spezielle Art verteilter App, die die Skalierbarkeit, Belastbarkeit und Verwaltbarkeit von Cloud-Infrastrukturen voll ausnutzt.

Die Verwendung von **.NET Aspire** für dieses Projekt bietet mehrere Vorteile, die die Gesamtsystemqualität verbessern, wie zum Beispiel:

### 1. **Zentralisierte Protokollierung**

.NET Aspire integriert die Protokollierung automatisch in die gesamte Anwendung, sodass Sie die Protokollierung nicht für jeden Dienst manuell konfigurieren müssen. Dadurch wird sichergestellt, dass die Protokolle konsistent sind und an einem zentralen Ort gespeichert werden, was das Debuggen und Überwachen erheblich vereinfacht.

Beispielsweise verwendet die Klasse `AiApiClient` die Protokollierung, um die an den AI-Dienst gesendeten Bildbytes, die API-Antworten und alle Fehler aufzuzeichnen, die während des Analyseprozesses auftreten.

```csharp
_logger.LogInformation("Sending analyze request with image bytes of length: {Length}",

 imageBytes.Length);

2. Automatische Metrikerfassung

.NET Aspire verfolgt und meldet außerdem automatisch wichtige Anwendungsmetriken wie Antwortzeiten, Anforderungsanzahl und Fehlerraten. Dies hilft Ihnen, die Leistung der Anwendung zu verstehen und etwaige Engpässe oder Probleme schnell zu erkennen.

3. Verbesserte Leistung

.NET Aspire optimiert HTTP-Aufrufe, was dazu beiträgt, die Antwortzeiten niedrig zu halten und unnötigen Ressourcenverbrauch zu reduzieren. Es bietet Funktionen wie Verbindungspooling, Anforderungswiederholungen und intelligentes Routing.

4. Nahtlose Integration

.NET Aspire vereinfacht die Integration verschiedener Dienste (wie die KI- und API-Dienste in diesem Projekt) und rationalisiert den Bereitstellungsprozess. Sie müssen sich keine Gedanken über Low-Level-Konfigurationen machen, da Aspire die infrastrukturbezogenen Aufgaben für Sie übernimmt.

FazitKI ist nicht mehr nur ein Schlagwort oder etwas, das wir in Science-Fiction-Filmen sehen. Es löst heute aktiv reale Probleme, wie das, mit dem wir uns in diesem Projekt befasst haben – das Extrahieren strukturierter Daten aus Belegen. Mit Hilfe von Azure OpenAI, .NET Aspire und Blazor können wir eine ansonsten zeitaufwändige und fehleranfällige manuelle Aufgabe automatisieren. KI chattet nicht nur oder reagiert auf Eingabeaufforderungen wie ChatGPT; Es interpretiert Bilder, extrahiert wertvolle Informationen und liefert uns in Sekundenschnelle umsetzbare Erkenntnisse.

Durch die Verwendung von Azure OpenAI für die Empfangsanalyse und .NET Aspire für die nahtlose Integration mit Protokollierung und Metriken haben wir eine Lösung geschaffen, die sowohl leistungsstark als auch skalierbar ist. Das Potenzial von KI zur Rationalisierung von Geschäftsprozessen, zur Automatisierung mühsamer Aufgaben und zur Verbesserung der Genauigkeit ist enorm, und dies ist nur ein Beispiel dafür, wie sie angewendet werden kann.

Dieser Beitrag ist Teil des Calendario de Adviento de Inteligencia Artificial 2024 en Español, einer Veranstaltung, die reale KI-Anwendungen vorstellt und die spanischsprachige Tech-Community über die neuesten Trends informiert. Wenn Sie tiefer in die KI und ihre Möglichkeiten eintauchen möchten, ist diese Veranstaltung ein guter Ausgangspunkt.

KI verändert unsere Arbeitsweise und dieses Projekt ist nur ein kleiner Vorgeschmack auf das, was möglich ist. Die wahre Stärke der KI liegt in ihrer Fähigkeit, reale Probleme zu lösen – sei es bei der Verarbeitung von Belegen, der Analyse von Bildern oder der Vorhersage von Trends. Wir kratzen nur an der Oberfläche.

Quellcode

Der vollständige Quellcode für dieses Projekt ist auf [GitHub](https://github.com/emimontesdeoca/ReceiptScannerPoc verfügbar. Laden Sie es gerne herunter, erkunden Sie, wie die KI- und API-Dienste zusammenarbeiten, und passen Sie es an Ihre eigenen Anwendungsfälle an. Wenn Sie auf Probleme stoßen oder Verbesserungsvorschläge haben, zögern Sie nicht, ein Problem zu erstellen oder eine Pull-Anfrage einzureichen. Beiträge sind immer willkommen und Ihr Feedback wird dazu beitragen, dieses Projekt noch besser zu machen!

Viel Spaß beim Codieren!

Benutzen Sie Behälter, um... den Überblick über die Preise der Weihnachtsgeschenke zu behalten?

Thu, 12 Dec 2024 00:00:00 +0000

Weihnachten steht vor der Tür und mit ihm die freudige Aufgabe, die perfekten Geschenke für Ihre Lieben zu finden. Wenn Sie so sind wie ich, freuen Sie sich wahrscheinlich über gute Schnäppchen, aber während der Feiertage durch die explodierenden Preise beliebter Artikel zu navigieren, kann sich wie eine echte Schlittenfahrt anfühlen – aufregend, aber auch ein wenig überwältigend! Anstatt mich dieses Jahr mit täglichen Preisüberprüfungen in den Wahnsinn zu treiben, habe ich beschlossen, meine technischen Fähigkeiten sinnvoll einzusetzen und den Prozess zu automatisieren.

Als Softwareentwickler und jemand, der sich leidenschaftlich für die Nutzung von Technologie zur Lösung alltäglicher Probleme einsetzt, habe ich einen Weg gefunden, den Prozess der Preisprüfung zu automatisieren. Anstatt jeden Tag manuell mehrere Online-Shops zu besuchen, um die Preise zu vergleichen, habe ich beschlossen, ein System zu entwickeln, das das für mich erledigt. Das spart nicht nur Zeit, sondern stellt auch sicher, dass ich die besten Angebote ohne den Stress täglicher Kontrollen erhalte.

Warum Preisüberwachung automatisieren?

Die Automatisierung der Preisüberwachung ist so, als ob Ihr eigenes Team von Weihnachtswichteln rund um die Uhr arbeitet, um sicherzustellen, dass Sie die besten Angebote erhalten, ohne einen Finger zu rühren. Deshalb werden Sie es lieben:

Teure Artikel: Wir alle wissen, dass Weihnachtsgeschenke ziemlich teuer sein können, besonders wenn Gadgets und Spielzeug auf Ihrer Liste stehen. Hier Geld zu sparen kann so befriedigend sein, wie die Suche nach der letzten Baumkrone auf Lager.
Tägliche Kontrollen: Wer hat die Zeit (oder die Geduld), jeden Tag die Preise zu überprüfen? Nicht ich!
Automatisierung: Machen Sie sich den Urlaubsgeist des Schenkens zu eigen – schenken Sie sich selbst das Geschenk der Effizienz.
Genauigkeit: Die Automatisierung stellt sicher, dass Ihre Preisprüfungen so genau sind, wie Rudolphs Nase glänzt.

Kerntechnologien

Um den kleinen Helfer meines eigenen Weihnachtsmanns zu bauen, habe ich mich für den Einsatz mehrerer Schlüsseltechnologien entschieden:

Container

Container sind wie die Weihnachtsverpackung für Software. Sie bündeln Ihre Anwendungen mit all ihren Extras (Abhängigkeiten), sodass alles so reibungslos läuft wie eine Schlittenfahrt im Neuschnee. Docker ist unsere Anlaufstelle für die Erstellung dieser Container.

Blazor

Blazor ist ein cooles Framework zum Erstellen interaktiver Webanwendungen mit .NET. Es ist, als würden Sie generische Weihnachtslieder durch Ihre ganz eigene Weihnachts-Playlist ersetzen – maßgeschneidert, effizient und so viel Spaß.

Docker-Compose

Docker-Compose ist der Manager unseres Nordpolbetriebs. Es hilft uns, dafür zu sorgen, dass alle unsere Dienste – wie die API und das Blazor-Frontend – in perfekter Harmonie zusammenlaufen. Betrachten Sie ihn als den Dirigenten unserer Feiertagssymphonie.

Schritt-für-Schritt-Anleitung

Tauchen wir nun in die Werkstatt des Weihnachtsmanns ein und erwecken wir dieses Projekt zum Leben!

Schritt 1: Erstellen der API

1.1 Einrichten des Projekts

Setzen Sie Ihre Programmier-Weihnachtsmütze auf und richten Sie ein neues ASP.NET Core-Web-API-Projekt ein. Öffnen Sie Ihr Terminal (es ist ein bisschen so, als würden Sie Ihren Adventskalender öffnen) und führen Sie Folgendes aus:

dotnet new webapi -o PriceMonitorApi
cd PriceMonitorApi

Dieser Befehl erstellt ein neues Verzeichnis mit dem Namen PriceMonitorApi und richtet ein grundlegendes Web-API-Projekt ein. Stellen Sie sich vor, es wäre so, als würden Sie eine stabile Basis für Ihr Lebkuchenhaus schaffen.

1.2 HttpClient- und Scraping-Bibliotheken hinzufügenAls nächstes fügen Sie `HttpClient` und eine Bibliothek zum Parsen von HTML hinzu. Dies wird unser treuer Schlitten zum Abrufen und Lesen von Preisdaten sein.

dotnet add package HtmlAgilityPack

HtmlAgilityPack ist der Elf, der uns beim Parsen von HTML-Dokumenten hilft.

1.3 Modelle erstellen

Modelle sind wie die Blaupause für unser Spielzeug. Erstellen wir ein Modell zur Darstellung der Produktinformationen:

namespace PriceMonitorApi.Models
{
 public class ProductInfo
 {
 public string Title { get; set; }
 public decimal Price { get; set; }
 public DateTime Date { get; set; }
 }
}

Wir haben gerade die perfekte Vorlage für unsere Daten erstellt.

1.4 Implementierung des Scraper-Dienstes

Unser Scraper-Service ist wie der kleine Helfer des Weihnachtsmanns – er holt und verarbeitet Informationen für uns:

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

Dieser Ausschnitt verwandelt unseren HtmlAgilityPack in einen Weihnachtszauberstab.

1.5 Erstellen des API-Controllers

Erstellen wir einen Controller, der als Gatekeeper für unsere Daten fungiert:

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

Unser Controller stellt sicher, dass Daten schneller geliefert werden als der Weihnachtsmann.

1.6 Dienste im DI-Container registrieren

Registrieren Sie abschließend Ihr ScraperService, um sicherzustellen, dass es bei Bedarf verfügbar ist.

services.AddHttpClient<ScraperService>();

Jetzt ist Ihre API bereit – wie der Schlitten des Weihnachtsmanns an Heiligabend!

Schritt 2: Erstellen der Blazor-Anwendung

Blazor hilft uns, unser Projekt wie einen Weihnachtsbaum zu schmücken – und macht es optisch ansprechend und interaktiv.

2.1 Einrichten des Blazor-Projekts

Als Nächstes erstellen wir ein Blazor-Projekt, das als Schnittstelle für unsere Schlittenfahrt zur Preisüberwachung fungiert.

dotnet new blazor -o PriceMonitorBlazor
cd PriceMonitorBlazor

Dieser Befehl versprüht etwas Weihnachtszauber, um ein einfaches Blazor WebAssembly-Projekt einzurichten.

2.2 Modelle hinzufügen

Fügen Sie, genau wie beim Einrichten von Ornamenten, ein ProductInfo-Modell im Blazor-Projekt hinzu:

namespace PriceMonitorBlazor.Models
{
 public class ProductInfo
 {
 public string Title { get; set; }
 public decimal Price { get; set; }
 public DateTime Date { get; set; }
 }
}

2.3 Erstellen des Dienstes für API-Aufrufe

Erstellen Sie einen Dienst zum Abrufen von Daten von unserer API – stellen Sie sich ihn als unseren Online-Shopping-Kumpel vor:

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 Registrieren von Diensten im DI-Container

Stellen Sie sicher, dass ScraperService registriert ist, damit wir es in unsere Komponenten einfügen können.

builder.Services.AddScoped<ScraperService>();

2.5 Erstellen der Blazor-Komponente

Aktualisieren Sie Pages/Index.razor, um eine unterhaltsame und interaktive Benutzeroberfläche einzuschließen:

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

Es ist, als würde man eine festliche Weihnachtsdekoration einrichten – und so wird unsere App interaktiv und unterhaltsam.

Schritt 3: Alles mit Docker-Compose verbinden

Jetzt verbinden wir alles mit Docker-Compose und verwandeln unser Projekt in eine gut geölte Schlittenfahrt.

3.1 Docker-Dateien erstellen

Erstellen Sie Docker-Dateien sowohl für die API- als auch für die Blazor-Projekte:

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 Docker-compose.yml erstellen

Verbinde alle Punkte (Weihnachtslichter) mit einer einzigen docker-compose.yml-Datei:

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

Diagramme

Nachfolgend finden Sie die Diagramme zur Visualisierung der verschiedenen Komponenten und des Datenflusses. Dies wird uns helfen zu verstehen, was in unserer Weihnachtsmannwelt wirklich vor sich geht:

Systemarchitekturdiagramm

Datenflussdiagramm

Sequenzdiagramm

Komponentendiagramm für Docker-Setup

Schritt 4: URL-Verwaltung, Aktualisierung und automatische regelmäßige AktualisierungIn dieser Demo werden wir es einfach im Speicher speichern, aber in einer realen Anwendung würden Sie eine Datenbank verwenden. Bleiben wir bei diesem unterhaltsamen Projekt beim In-Memory-Speicher.

4.1 Ändern des Dienstes zur Verwaltung von URLs

Zunächst stellen wir sicher, dass unser Dienst das Hinzufügen und Abrufen von URLs sowie das Abrufen von Produktinformationen bewältigen kann:

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 Aktualisieren der Blazor-Komponente für URL-Verwaltung und -Aktualisierung

Aktualisieren Sie als Nächstes Pages/Index.razor, um URL-Verwaltung, Aktualisierung und automatische regelmäßige Aktualisierung hinzuzufügen:

@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 dieser aktualisierten Komponente:

Wir verwenden einen Timer, um die Methode RefreshPrices regelmäßig jede Minute aufzurufen. – Die Methode StartTimer initialisiert den Timer so, dass er sofort startet und dann alle 60 Sekunden ausgelöst wird. – Die Lebenszyklusmethode OnInitialized ruft StartTimer auf, wenn die Komponente initialisiert wird, um die regelmäßige Aktualisierung zu starten.

4.3 Ausführen der Lösung

Um die aktualisierte Blazor-Anwendung mit den neuen Funktionen auszuführen, erstellen Sie Ihre Docker-Container neu und starten Sie sie neu:

docker-compose build
docker-compose up

Nach dem Laden von http://localhost:5001 in Ihren Browser sollte die Blazor-App nun automatisch jede Minute die Produktpreise aktualisieren und außerdem manuelle Aktualisierungen und URL-Verwaltung ermöglichen.

Fazit

Der Aufbau dieses Preisüberwachungssystems war ein festlicher Knaller! Es ersparte mir nicht nur den Stress täglicher Preisüberprüfungen, sondern zeigte auch die Magie moderner Webtechnologien.

Festlicher Tech-Kalender 2024

Ich habe diesen Beitrag im Rahmen der Veranstaltung Festive Tech Calendar 2024 erstellt, die Technikbegeisterte, Innovatoren und digitale Träumer zusammenbringt, um Wissen auszutauschen und die Verschmelzung von festlichem Geist und technologischen Wundern zu feiern. Bei dieser Initiative geht es nicht nur um Lernen und Kontakte, sondern auch darum, etwas zurückzugeben.

Festive Tech Calendar 2024 unterstützt dieses Jahr die Beatson Cancer Charity. Die Beatson Cancer Charity widmet sich der Unterstützung von Krebspatienten, ihren Familien und den sie betreuenden medizinischen Fachkräften. Weitere Informationen zu ihrer unglaublichen Arbeit finden Sie unter https://www.beatsoncancercharity.org/.

Besuchen Sie die Website des Festive Tech Calendar unter [https://festivetechcalendar.com](https://festivetechcalendar.com für häufig gestellte Fragen und weitere Details zur Veranstaltung.

HO HO HO!

Die Erstellung dieses Projekts war eine wunderbare Möglichkeit, einen Beitrag zur festlichen Tech-Community zu leisten und gleichzeitig einen guten Zweck zu unterstützen.

Ich hoffe, dass Sie diesen Leitfaden hilfreich fanden und dass er Sie dazu inspiriert, weitere Möglichkeiten zu erkunden, wie Sie mithilfe von Technologie alltägliche Aufgaben vereinfachen können.

Wenn Sie Fragen haben oder weitere Hilfe benötigen, zögern Sie bitte nicht, uns zu kontaktieren.

Viel Spaß beim Codieren!

Benutzerdefiniertes ValidationAttribute und Blazor-Validierung

Fri, 29 Mar 2024 00:00:00 +0000

# Passen Sie alles individuell an

Wie Sie wahrscheinlich in all meinen Beiträgen gesehen haben, versuche ich wirklich, alles so sauber wie möglich zu halten, da ich bereits Beiträge zu benutzerdefinierten Attributen, benutzerdefinierter Ausnahmebehandlung, Service-Collection-Injection usw. geschrieben habe.

Mit der Zeit habe ich erkannt, dass diese Art der Codierung mir und meinem Team die Möglichkeit bietet, Überstunden zu verbessern, Probleme einfacher zu finden und den Code so weit wie möglich zu trennen.

Ja, nach dieser coolen Geschichte, die ich gerade habe, habe ich in letzter Zeit wie üblich an Blazor gearbeitet und festgestellt, dass man nach vielen Jahren der Entwicklung benutzerdefinierte Validierungsattribute erstellen kann.

Ja, es ist lustig, nach all den Jahren …

Benutzerdefinierte Validierungsattribute

Die Idee kam eigentlich aus der Arbeit, wir führen immer eine Validierung an allen Stellen durch, aber ich hatte einige Felder, die den gleichen Validierungsprozess erforderten, also dachte ich, dass da vielleicht etwas dabei sein könnte … zum Beispiel benutzerdefinierte Validierungsattribute!

Also habe ich die Microsoft-Dokumentation dafür aufgerufen und herausgefunden, dass man benutzerdefinierte Validierungsattribute erstellen und sie den Eigenschaften zuweisen kann, genau so:

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

und verwenden Sie es in einer einfachen Klasse wie dieser:

[Required]
[StringLengthRange(Minimum = 10, ErrorMessage = "Must be >10 characters.")]

[StringLengthRange(Maximum = 20)]

[Required]
[StringLengthRange(Minimum = 10, Maximum = 20)]

Benutzerdefinierter Validator

Ich habe also diesen Validator, den ich für einen bestimmten Geschäftsfall benötige, der 20 erste Zeichen enthält, die 9 Zahlen und einen Bindestrich enthalten, und mit 2 Zeichen endet, die normalerweise der Ländercode sind, also etwa so: 123456789-123456789-ES

Am Ende habe ich mir so etwas ausgedacht, es ist wirklich einfach, aber es funktioniert:

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

Für alle Fälle habe ich auch einen Test für sie geschrieben:

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

Und beim Ausführen hatte ich folgende Ergebnisse:

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

Benutzerdefinierte Validierung und Blazor

Da ich nun weiß, dass er verwendet werden kann, ist es eindeutig eine gute Idee, ihn in Blazor zu implementieren, oder?

Nehmen wir an, ich habe dieses Formular, das das zuvor gezeigte Modell Person verwendet:

@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();
}

Sobald wir dies ausführen, erhalten wir die folgenden Fehler:

Und wenn wir einfach das eingeben, was wir wollen, erhalten wir eindeutig Folgendes:

Um ehrlich zu sein, ist es für mich ganz klar, dass wir zumindest die Logik zur Validierung dieser Formulare in benutzerdefinierte Validierungsattribute verschieben sollten. Dadurch haben wir die Freiheit, den Code für diese Anmeldung an einem einzigen Ort zu speichern, und wir können ihn später für eine API oder eine andere Anwendung verwenden.

Ich hoffe, es hat Ihnen gefallen. Wenn Sie Fragen haben oder Kontakt mit mir aufnehmen möchten, zögern Sie nicht und kontaktieren Sie mich!

Benutzerdefinierte Ausnahmebehandlung für die .NET-API

Sun, 01 Oct 2023 00:00:00 +0000

Ausnahmen sind schlecht, das wissen wir doch, oder? Aber was ist, wenn wir mit ihnen umgehen müssen?

Was passiert, wenn wir beispielsweise eine Ausnahme bei einer API haben, wird eine Stack-Nachricht angezeigt, die viele Informationen enthält, die wir möglicherweise aus der Antwort entfernen möchten, die unsere Benutzer erhalten.

Für die Demo habe ich eine Dotnet-API erstellt und eine Methode hinzugefügt, die eine Ausnahme auslöst:

[HttpGet]
[Route("GetWithoutExceptionHandler")]
public Task GetWithoutExceptionHandler()
{
 throw new Exception("This is a custom exception!");
}

Wenn wir eine Ausnahme auslösen, sieht das so aus:

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)

Das sieht normal aus, das ist es, was man von einer Ausnahme erhält, aber für mich zeigt es viele Informationen an. Wenn Sie Bibliotheken und ähnliches haben, könnte es jemandem, der versuchen könnte, Dinge zu sehen, sinnvolle Informationen über Ihren Kunden, Ihr Projekt oder andere Dinge anzeigen.

So sieht es auf Swagger aus:

Erstellen einer benutzerdefinierten Ausnahme

Dieser Schritt könnte vermieden werden, da wir wissen, welche Ausnahme ausgelöst wird, in diesem Fall eine Exception, aber für mich ist es besser, Ihre benutzerdefinierten Ausnahmen zu haben, da Sie mehr Kontrolle darüber haben, was Sie auslösen.

In diesem Fall habe ich gerade ein Objekt CustomException erstellt, das von Exception erbt:

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) { }
 }
}

Nachdem wir unsere benutzerdefinierte Ausnahme erstellt haben, aktualisieren wir unsere Methode, um CustomException anstelle von Exception auszulösen:

[HttpGet]
[Route("GetWithoutExceptionHandler")]
public Task GetWithoutExceptionHandler()
{
 throw new CustomException("This is a custom exception!");
}

Dies wird vorerst nichts ändern, aber der Stack-Trace wird zeigen, dass das geworfene Objekt ein CustomException statt Exception ist. Schauen Sie sich den Anfang des Stack-Trace an:

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)

Erstellen eines ExceptionFilterAttribute

Microsoft hat uns eine Möglichkeit gegeben, Ausnahmen zu behandeln, nachdem sie ausgelöst wurden. Weitere Informationen finden Sie hier.

Aber bisher lautet die Dokumentation, die sie uns geben:

Ein abstrakter Filter, der asynchron ausgeführt wird, nachdem eine Aktion eine Ausnahme ausgelöst hat. Unterklassen müssen OnException(ExceptionContext) oder OnExceptionAsync(ExceptionContext) überschreiben, aber nicht beide.

Erstellen wir also eines, wir erstellen CustomExceptionFilterAttribute, in dem wir OnException überschreiben:

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

Wie Sie sehen können, werfen wir einen Blick auf ExceptionContext. Wenn die Ausnahme ein Typ von CustomException ist, unternehmen wir etwas.

Dieses Etwas aktualisiert die Antwort und den Statuscode dessen, was wir zurückgeben werden.

Um den Statuscode zu aktualisieren, müssen wir context.HttpContext.Response.StatusCode aktualisieren und um das Ergebnis zurückzugeben, müssen wir den context.Result aktualisieren, indem wir ihm ein Objekt geben, das von ActionResult geerbt wird.

Dies ist ein Filter, das heißt, wir müssen ihm etwas hinzufügen, indem wir [CustomExceptionFilter] hinzufügen.

Verwendung des Filters

Nun replizieren wir die Methode, die wir haben, und fügen diesen Filter hinzu, damit er Maßnahmen ergreift. Unser API-Endpunkt wird am Ende so aussehen:

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

Wie Sie sehen können, haben wir eine neue Methode namens GetWithExceptionHandler, die dieselbe Logik wie GetWithoutExceptionHandler hat, aber in diesem Fall haben wir der Methode den Filter [CustomExceptionFilter] hinzugefügt.

Das Ergebnis ist das Folgende, nachdem wir die Methode ausgeführt haben. Ich zeige ein Bild an, da der Stack-Trace nicht mehr angezeigt wird:

Damit haben wir eine benutzerdefinierte Ausnahme erstellt, einen Filter, der überschreibt, was passiert, wenn wir eine Ausnahme auslösen und sie für eine Methode verwenden.

Dies kann für viele Zwecke verwendet werden, z. B. zur Protokollierung und zum Erkennen, was, wann und wo der Fehler auftritt.

Eine schönere Art, Dinge zu injizieren

Mon, 04 Sep 2023 00:00:00 +0000

Immer wenn ich Dinge wie Dienste, Repositorys, Attribute oder was auch immer erstelle, um sie in meine Anwendungen einzufügen, müssen wir diesen Schritt ausführen, nämlich das eigentliche Hinzufügen der Dienste zur Anwendung.

Dies ist immer das Gleiche: Sie gehen zu Program.cs und fügen dann an einem Teil der Datei builder.Services.AddScoped<MyService>(); hinzu, um den Dienst einzubinden.

Etwas in der Art:

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();

Ich meine, es funktioniert, aber ich bin wählerisch und mag es nicht wirklich.

Nehmen wir an, wir möchten mehrere Abhängigkeitsinjektionen durchführen, und es handelt sich nicht wirklich um dasselbe. In meinem Fall könnte dies etwa eine Bibliothek sein, die alle Repositorys enthält, eine andere Bibliothek, die alle Dienste enthält, und schließlich eine weitere Bibliothek, die Attribute enthält.

Können Sie sich in diesem Fall vorstellen, wie viele Zeilen wir zu Program.cs hinzufügen müssen?

Nehmen wir an, wir haben eine Bibliothek, die einige Dienste enthält. Wenn wir alle unsere Dienste einschließen möchten, müssen wir mit IServiceCollection arbeiten.

Wir erstellen also ein static class mit einer static-Methode namens AddServices, die ein IServiceCollection zurückgibt.

In diesem Fall erhält es den Namen 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;
 }
}

Darüber hinaus verfügen wir über eine weitere Bibliothek, die einige Repositorys enthält, die von diesen Diensten verwendet werden. Machen wir also dasselbe.

/// <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;
 }
}

Jetzt haben wir unsere Repositorys und Dienstmethoden zum Injizieren erstellt, aber wie verwenden wir sie?

Kehren wir zu unserem Program.cs zurück und fügen wir Folgendes hinzu:

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();

Das sieht viel sauberer aus, nicht wahr? Damit haben wir einige Dienste und Repositories erfolgreich eingefügt, aber jetzt sieht es besser aus und wir haben das, was wir einspeisen, tatsächlich in der externen Bibliothek.

Abhängigkeitsinjektion mit Attributen auf der .NET-API

Tue, 22 Aug 2023 00:00:00 +0000

Abhängigkeitsinjektion ist derzeit wahrscheinlich eine der besten Funktionen, die wir in .NET haben. Es gibt keine Möglichkeit, dass Sie es nicht verwenden. Wenn Sie also wie ich sind, möchten Sie es unbedingt zu allen Implementierungen hinzufügen, die Sie vornehmen.

Filter gemäß der offiziellen [Dokumentation] von Microsoft (https://learn.microsoft.com/en-us/aspnet/core/mvc/controllers/filters?view=aspnetcore-3.1):

Filter in ASP.NET Core ermöglichen die Ausführung von Code vor oder nach bestimmten Phasen in der Anforderungsverarbeitungspipeline.

Eingebaute Filter erledigen Aufgaben wie:

Autorisierung, die den Zugriff auf Ressourcen verhindert, für die ein Benutzer keine Autorisierung hat.

Antwort-Caching, Kurzschließen der Anforderungspipeline, um eine zwischengespeicherte Antwort zurückzugeben.

Benutzerdefinierte Filter können erstellt werden, um übergreifende Anliegen zu berücksichtigen. Beispiele für übergreifende Anliegen sind Fehlerbehandlung, Caching, Konfiguration, Autorisierung und Protokollierung. Filter vermeiden die Duplizierung von Code.

Ich arbeite viel mit APIs und es gibt einige Dinge, die jede einzelne Anfrage oder so ziemlich alle ausführen müssen. Idealerweise möchten wir damit arbeiten und außerdem … Abhängigkeitsinjektion!

Aber manchmal ist es ein kleiner Trick, es funktioniert nicht wie gewünscht, wenn wir von ActionAttribute erben wollen, also müssen wir mit TypeFilterAttribute arbeiten, was uns Dinge beim Überschreiben von OnActionExecutionAsync ermöglichen lässt.

Normalerweise erstelle ich diese Filter, um etwas zu protokollieren, also verwenden wir das als Beispiel:

/// <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();
 }
 }
}

Die Logik ist ziemlich einfach. Wir erhalten den Körper, indem wir mit context.ActionArguments.First().Value auf das Objekt context zugreifen, außerdem erhalten wir den Methodenaufruf mit context.HttpContext.Request.Path.Value.

Dann rufen wir einfach unsere Methode aus unserem Dienst auf, in diesem Fall _loggingService.LogCustomEvent(call).

Dann müssen wir await next(); aufrufen, da die Pipeline fortgesetzt werden muss.

Dies gilt für das Attribut. Jetzt müssen wir dieses Attribut tatsächlich in eine Methode einbinden.

[LoggedQueryTypeFilterAttribute]
public ActionResult<string> TestFilter()
{
 return Ok("Hello world!");
}

Ich hoffe, es hat Ihnen gefallen. Wenn Sie Fragen haben oder Kontakt mit mir aufnehmen möchten, zögern Sie nicht und kontaktieren Sie mich!

Swagger-Dokumentation mit externen Bibliotheken

Fri, 17 Feb 2023 00:00:00 +0000

Es ist eine gute Sache, mehrere Bibliotheken zu verwenden, um Ihren Code für zukünftige Fälle aufzuteilen. Persönlich mache ich es gerne, wenn ich meine Logik aufteilen kann, damit sie in anderen Projekten oder Teilen von Projekten wiederverwendet werden kann.

Zumindest für mich ist es ein Muss, die Datenmodelle aufzuteilen, einschließlich des Entity Framework, damit es in einem Console application, einem Blazor application oder einem API referenziert und verwendet werden kann.

Werfen wir einen Blick auf ein Beispiel dafür, wie ich Dinge mache. Dies ist ein Screenshot eines Projekts mit einigen Anwendungen und einer gemeinsam genutzten Bibliothek mit allen Modellen.

Dies ist ein Beispiel für eine Klasse, die ich aus dem Projekt API mit Dokumentation mit summary für jede Eigenschaft und Klasse verschoben habe.

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

Wenn wir es auf Console application verweisen und mit der Verwendung des Modells beginnen, können wir die Dokumentation sehen. Das ist eine Standardfunktion in Visual Studio und funktioniert daher einwandfrei, wie Sie hier sehen können:

Aber wenn wir dann auf den API verweisen und zu Swagger gehen, gibt es keine zusammenfassende Dokumentation.

Wie können wir das beheben?

Zuerst müssen wir XML-Kommentare in der Bibliothek aktivieren. Dazu müssen Sie die Projekteinstellungen aktualisieren und Folgendes aktivieren:

Dadurch werden einige Dateien im Build-Ordner generiert, die mit der Dateierweiterung xml enden, wie Sie hier sehen können:

Nachdem wir dies nun erledigt haben, müssen wir einige Dinge zum Program.cs hinzufügen, um diese Dateien lesen zu können. Dies liegt daran, dass standardmäßig nur die XML-Definition des Projekts geladen wird, auf dem es sich befindet.

Es verwendet eine Methode, die wir in AddSwaggerGen haben und die IncludeXmlComments heißt.

Die Idee ist, dass wir, wenn wir alle xml-Dateien haben, das Laden auf den Swagger erzwingen.

builder.Services.AddSwaggerGen(s =>
{
 // Comments
 var allXmlFiles = Directory.GetFiles(AppContext.BaseDirectory, "*.xml");

 foreach (string xmlFiles in allXmlFiles)
 {
 s.IncludeXmlComments(xmlFiles);
 }
});

Es ist ganz einfach: Wir holen die xml-Dateien aus dem Build-Verzeichnis und fügen sie mit der Methode IncludeXmlComments hinzu.

Jetzt laden wir erneut den API und prüfen, ob wir die Dokumentation sehen können.

Und Sie können sehen, dass wir die Dokumentation sehen können!

Ich hoffe, es hat Ihnen geholfen. Wenn Sie Fragen haben, können Sie mich gerne kontaktieren!

Bereinigen Sie lokale Zweige in Git

Mon, 30 Jan 2023 00:00:00 +0000

Waren Sie schon einmal an einem Punkt, an dem Sie zu viele Filialen vor Ort hatten? Das passiert mir oft, da wir Zweige für jede Funktion, jeden Fehler oder jede Aufgabe verwenden.

Am Ende habe ich so etwas und es wird nach einer Weile super schmutzig

Es nervt mich wirklich, deshalb teile ich Ihnen nur einen kurzen Befehl mit, den Sie auf Ihrer Konsole ausführen können, um diese Bereinigung durchzuführen!

Ich habe diesen Befehl in Stack Overflow in der folgenden Antwort von [Robert Corvus](https://stackoverflow.com/users/529612/robert-corvus gefunden, einer Version, die auf Powerhsell läuft.

Bitte seien Sie vorsichtig, wenn Sie diesen Befehl ausführen, da Ihre Änderungen sonst verloren gehen können

Bevor Sie es ausführen, denken Sie daran, den MY_MASTER_BRANCH_NAME auf Ihren Hauptzweig zu aktualisieren. Dieser kann master sein, wie ich ihn verwende, oder die neuen, die standardmäßig mit dem Namen main geliefert werden.

git branch | %{ $_.Trim() } | ?{ $_ -ne 'MY_MASTER_BRANCH_NAME' } | %{ git branch -D $_ }

Nachdem Sie diesen Befehl ausgeführt haben, erhalten Sie eine Ausgabe wie diese

Ich hoffe, es ist hilfreich für Sie!

Aktualisieren der Routen von Identity in ASP.NET Core 7

Mon, 23 Jan 2023 00:00:00 +0000

Sie fragen sich auch, wie Microsoft so seltene Dinge benennen kann? Ich habe immer gedacht, dass sie es nicht wirklich gut machen, aber nun ja, das ist es!

Das Gute daran ist, dass Sie während der Entwicklung so ziemlich alles ändern können!

Sind Sie schon einmal auf eine Seite gelangt und haben sofort erkannt, dass es sich um ein ASP.NET-Webprojekt handelt, wenn Sie nur den Registrierungs- oder Anmeldevorgang durchführen?

Das ist mir schon oft passiert, weil Sie in dem von Ihnen erstellten Projekt standardmäßig diese URLs haben, um den Anmelde- und Registrierungsprozess durchzuführen (und Sie haben auch viele andere Seiten).

Dieses Tutorial zeigt also eine Möglichkeit, diese URLs zu aktualisieren, damit sie in Ihrem Projekt schöner aussehen!!

Standardverhalten

Wenn wir ein Blazor-Projekt erstellen und beschließen, es mit Identity zu verwenden, wird etwa Folgendes angezeigt:

Und wenn wir versuchen, den Anmelde- oder Registrierungsvorgang durchzuführen, gehen wir entweder zu /Identity/Account/Login oder zu /Identity/Account/Register.

Was aber, wenn ich Ihnen sage, dass Sie diese URLs tatsächlich so aktualisieren können, dass sie anders sind?

Gerüst für die Seiten `Login` und `Register`.

Um diese Seiten zu aktualisieren, blendet Microsoft sie aus, aber Sie können sie schnell einbinden und die gewünschten Änderungen vornehmen!

Dazu müssen Sie im Kontextmenü des Projekts auf und Add Scaffolded Item gehen, genau so:

Dann wird ein Modal angezeigt und Sie müssen Identity zweimal auswählen und auf Add klicken:

Danach erscheint ein weiteres Popup-Fenster, in dem Sie auswählen können, welche Seiten der gesamten Identität Sie aktualisieren möchten. Es gibt viele Seiten, die Sie aktualisieren können, aber wir konzentrieren uns auf Account/Login und Account/Register:

Lassen Sie es nun ein wenig arbeiten und schauen Sie dann im Projektmappen-Explorer nach. Dort werden Sie ein paar neue Dateien finden:

Bei diesen neuen Dateien handelt es sich um die Anmelde- und Registrierungsseite, die ASP.NET Ihrem Projekt hinzufügt, wenn Sie es zum Hinzufügen von Identität auswählen!

URLs werden aktualisiert

Wie Sie wahrscheinlich bemerkt haben, handelt es sich bei diesen Dateien um Razor-Dateien, da ihre Erweiterung cshtml ist. Daher verwenden wir lediglich eine Anweisung, um die URL der Seite zu aktualisieren:

@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" />
}

Wie Sie sehen, ist das meiste gleich, aber wenn Sie sich die allererste Zeile in der Klasse ansehen, habe ich das, was wir zuvor hatten, aktualisiert:

@page

@page "/login"

Nun, das war einfach, nicht wahr? Machen wir nun einen kurzen Test, um zu sehen, ob es funktioniert.

Gehen wir zunächst zur Standardseite, die wir zunächst haben, um zu prüfen, ob diese noch funktioniert:

Was nicht der Fall ist! Also lasst uns jetzt unsere neue URL testen, die /login lautet:

Und es funktioniert!!

Jetzt machen wir dasselbe für das Register, wir aktualisieren seine Seite und fügen den gewünschten Pfad in der @page-Direktive hinzu und machen einen 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" />
}

Ich habe den oberen Teil mit @page "/login" aktualisiert und jetzt testen wir, ob es funktioniert:

Funktioniert auch!!

Das ist esIch hoffe, Sie haben gelernt, wie man diese URLs aktualisiert, vor allem, weil es bei manchen Projekten scheiße ist, wenn man die URLs auf eine bestimmte Art und Weise erstellt und dann die Identität anders aussieht, haha!

Wenn Sie etwas brauchen, twittern Sie mir einfach oder schicken Sie mir eine E-Mail und ich werde versuchen, Ihnen zu helfen!

Benutzerdefinierte Attribute für die .NET 6 Core-API

Fri, 09 Dec 2022 00:00:00 +0000

Benutzerdefinierte Attribute sind wirklich eine gute Sache. Ich habe erst vor kurzem damit begonnen, sie zu verwenden, weil sie es mir ermöglichen, ein einzelnes davon zu erstellen und es entweder auf dem Controller, der Klasse oder der Methode selbst wiederzuverwenden.

Sie helfen wirklich, wenn Sie Sicherheitsaufgaben erledigen möchten, z. B. nach Headern suchen oder den Wert eines Parameters überprüfen, den Sie unbedingt benötigen.

In meinem Fall werden wir es in einem .NET Core API-Projekt verwenden, wo wir prüfen, ob alle Anfragen einen bestimmten Header enthalten.

HeaderCheckAttribute

Nachdem wir also unsere coole .NET Core-API erstellt haben, erstellen wir einen Ordner zum Speichern unserer Inhalte, da wir gerne Ordner verwenden.

Und dann werden wir die Logik zu unserer Klasse HeaderCheckAttribute hinzufügen.

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

Im Grunde besteht die Logik darin, zunächst nach einem Header mit dem Schlüssel x-dotnet-6-custom-attribute zu suchen und dann, wenn er vorhanden ist, zu prüfen, ob er Werte enthält.

Wenn beide Ausdrücke wahr sind, wird ein BadRequestObjectResult mit einer bestimmten Nachricht zurückgegeben.

Dem Controller hinzufügen

Wir können diese Logik an mehreren Stellen hinzufügen, direkt zum gesamten Controller oder zu einigen Methoden. Wir fügen sie zuerst den Methoden und dann dem gesamten Controller hinzu.

Also lasst uns die Klasse WeatherForecastController damit dekorieren.

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

Lassen Sie uns das Projekt durchführen!

Wir haben dort zwei Funktionen: GetWeatherForecastWithCheck und GetWeatherForecastWithoutCheck, eine davon schlägt fehl und die andere nicht, aber schauen wir uns das mal bei Swagger an!

Wie Sie sehen können, gibt einer der beiden einen 400-Fehler mit unserer Nachricht zurück und der andere die Werte. Um dies nun vollständig zu testen, führen wir Postman aus und fügen einen Header hinzu, damit wir die Daten auch mit GetWeatherForecastWithCheck sehen.

Postbote

Wenn wir jetzt Postman ausführen, fügen wir den Header hinzu und sehen, dass sich die Fehlermeldung geändert hat, da wir jetzt zwar den Header bereitstellen, dieser aber keinen Wert hat

Wenn wir einen Wert hinzufügen, erhalten wir endlich die Werte!

Das ist es

Nun, das ist es! Ziemlich einfach, oder? Nun wissen Sie, wie Sie ein Attribut erstellen und es Methoden und Controllern zuweisen!

Viel Spaß mit ihnen!

Code

Das gesamte Projekt ist auf Github und Sie können es hier finden!

Wenn Sie Probleme oder Fragen haben, können Sie mich gerne über die sozialen Medien unter @emimontesdeoca kontaktieren (auf Twitter ist es eigentlich @emimontesdeocaa mit zwei aa am Ende). Die meisten meiner sozialen Netzwerke finden Sie auch in der Kopfzeile des Blogs.

Ich hoffe, Ihnen hat der Beitrag gefallen! Cya!

Behandeln Sie das Laden von Komponenten in Blazor

Tue, 19 Jul 2022 00:00:00 +0000

Blazor ist großartig, wirklich großartig, besonders wenn wir asynchrone Dinge wie das Laden von Boxen erledigen, und es sieht einfach gut aus.

Ich habe versucht, auf verschiedene Weise mit dem Laden von Seiten, Zuständen, Komponenten usw. umzugehen. Und ich glaube, ich habe endlich den perfekten Weg gefunden, es so zu machen, wie ich es möchte.

Idee

Anstatt die Logik zum Laden auf jeder Seite oder Komponente neu zu schreiben, erstellen wir eine übergeordnete Komponente mit einem ChildComponent, wodurch wir die Möglichkeit haben, sie einfach mehrmals wiederzuverwenden.

LoadingComponent-Code

Der Code ist jedoch ziemlich einfach, es gibt nicht viel zu tun, ein einfaches if mit einer Ladeeigenschaft, einer Umschaltfunktion darin und fertig!

@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;
 }
}

Nutzung

Die Verwendung ist ziemlich einfach. Zum Testen verwenden wir eine neue Seite und fügen unseren Inhalt in die erstellte LoadingComponent-Komponente ein, die wir gerade erstellt haben.

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

}

So sieht es aus

Noch mehr lustiges Beispiel

Nehmen wir an, wir haben mehrere Komponenten, von denen jede ihre Ladezeiten hat. Darauf können wir etwas aufbauen, das gut aussieht!

Erstellen wir eine gefälschte Ladekomponente namens FakeLoadingComponent, die wir wiederverwenden können.

@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();
 }
}

Dann aktualisieren wir einfach die Seite Loading mit mehreren FakeLoadingComponent-Komponenten und überprüfen das Ergebnis!!

@page "/loading"
@using LoadingBoxes.Components

<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>

Das sieht jetzt viel besser aus

Und das ist es!

Ich hoffe, Ihnen hat der Beitrag gefallen!

Abrufen des Ablaufdatums aus einem Zertifikat

Fri, 27 May 2022 00:00:00 +0000

Es gibt einige Web-Apps, mit denen Sie den aktuellen Status der Zertifikate der von uns verwendeten Domänen überprüfen können, und wir haben einige davon.

Ich habe eine Azure-Funktion erstellt, die einmal am Tag ausgeführt wird und einige der Domänen überprüft, die ich mir ansehen muss. Es handelt sich um eine supereinfache Konsolenanwendung, die eine E-Mail sendet, wenn das Ablaufdatum des Zertifikats weniger als 30 Tage beträgt.

Die Logik selbst, wie die Funktion funktioniert, wird nicht gezeigt. Ich möchte die Funktion zeigen, die die Basisprüfung des Zertifikats durchführt und welche Daten wir erhalten.

Die Funktion

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

Diese Methode CheckCertificateAsync gibt uns ein X509Certificate2-Zertifikat zurück, mit dem wir eine Menge Dinge tun können, einschließlich eines Blicks auf das Ablaufdatum.

Serialisiertes Ergebnis

Dies ist der serialisierte Wert des certificate-Objekts:

{
 "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"
}

Ablaufdatum

Um die Ablaufzeit zu ermitteln, müssen wir einen Blick auf NotAfter und NotBefore werfen, die sich in diesem Objekt befinden:

 "NotAfter":"2022-08-05T10:50:35+01:00",
 "NotBefore":"2022-05-07T10:50:36+01:00",

Konsolenanwendung

Das folgende Snippet ist eine einfache Konsolenanwendung, die auf .NET 6 basiert und das folgende Ergebnis liefert, in dem Sie alle gewünschten Zertifizierungen überprüfen können:

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();

Demoprojekt

Sie finden die Konsolenanwendung in meinem Github im Repository mit dem Namen expiration-date-certificate.

Fokussieren eines Elements in Blazor

Thu, 05 May 2022 00:00:00 +0000

Nachdem ich kürzlich an dem Wordlzor-Spiel gearbeitet hatte, musste ich eine ziemlich einfache Funktionalität hinzufügen: Beim Betreten das gesamte Spiel fokussieren.

Dies war notwendig, da der Benutzer tatsächlich im Spiel tippen und nicht nur die Bildschirmtastatur verwenden konnte.

Javascript-Datei

Dazu müssen wir eine Javascript-Datei namens app.js erstellen, die eine Funktion enthält

window.FocusElement = (element) => {
 element.focus();
};

Nachdem wir das getan haben, müssen wir das Skript in die Datei index.html einbinden:

<script src="js/app.js"></script>

Blazor-Komponente

Sobald wir das Skript initialisiert haben, müssen wir ein Element finden, auf das wir uns konzentrieren können. Daher müssen wir in jeder unserer Komponenten dieses Element auf ein Objekt verweisen.

Fügen wir also in unserer Blazor-Komponente ein Div mit dem „.“ hinzu @ref`-Eigenschaft:

<div @ref=@elementToFocus tabindex="0" >
 This is my focus component
</div>

Dann können Sie in der Komponentenlogik die Eigenschaft als ElementReference haben:

/// <summary>
/// Reference to element
/// </summary>
private ElementReference elementToFocus;

JSInterop injizieren

Um nun die Funktion aufzurufen, die wir in unserer Javascript-Datei haben, müssen wir JSInterop verwenden.

Zuerst müssen wir es mit der folgenden Syntax in die Komponente einfügen:

[Inject]
public IJSRuntime JSRuntime { get; set; }

Nachdem der Dienst eingefügt wurde, können wir nun jede seiner Methoden aufrufen, z. B. InvokeVoidAsync, die die Funktion aufruft:

public async Task Focus()
{
 // Focus when initializing
 await JSRuntime.InvokeVoidAsync("window.FocusElement", elementToFocus);
}

Und wenn Sie die Funktion Focus() aufrufen, konzentriert sie sich auf das von uns erstellte Element. Natürlich können Sie das Element selbst umgestalten und als Parameter übergeben.

Wenn Sie sehen möchten, wie ich es implementiert habe, werfen Sie einen Blick auf den Quellcode von Wordlzor. Ich habe ihn für Warnungen und Fokussierung beim Schließen des Anweisungsmodals verwendet.

Generieren Sie *.dacpac-Dateien aus dem VS-Datenbankprojekt in GitHub Actions

Mon, 18 Apr 2022 00:00:00 +0000

Wenn Sie mit Datenbanken arbeiten müssen und eine agile Entwicklung durchführen möchten, müssen Sie über einen Ablauf verfügen, bei dem jedes Mal, wenn Sie eine Tabelle, einen SP oder eine Funktion hinzufügen oder ändern, diese kompiliert und die Bereitstellungsdatei für die Datenbank generiert wird.

Ich mache diesen Ansatz schon seit langem. Wir nehmen die Änderungen lokal vor, vergleichen sie mit unserem Datenbankprojekt und wenn wir dann unsere Änderungen festschreiben und pushen, wird eine Bacpac-Datei generiert, die in die Datenbank verschoben wird.

Es entfällt die Mühe, dies per Hand zu tun, was zu einem menschlichen Fehler führen kann, und in einer Datenbank ist das wirklich eine schlechte Nachricht.

Datenbankprojekt

Wenn wir unser Datenbankprojekt in Visual Studio erstellen und eine Datenbank importieren, sieht das Ergebnis so aus

Wenn wir eine Kompilierung für dieses Projekt ausführen, wird eine dacpac-Datei generiert, die unsere gesamte Struktur enthält

Github-Pipeline

Nachdem wir nun unseren Code im Repository veröffentlicht haben, müssen wir nun eine Aktion erstellen, die dieses Projekt kompiliert, diese dacpac-Datei generiert und sie irgendwo ablegt, wo wir sie entweder herunterladen oder für einen weiteren Schritt verwenden können.

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"

Diese Aktion führt eine Reihe von Dingen aus, erstellt die Lösung und legt das Ergebnis im zuvor erstellten Ordner artifacts ab. Anschließend werden die Dateien aus diesem Ordner in die Artefakte hochgeladen.

Ausführen der Pipeline

Fahren Sie nun fort und lösen Sie einen Build aus. Das Ergebnis sollte wie folgt aussehen

Wenn wir das Artefakt tatsächlich herunterladen und einen Blick auf den Inhalt werfen, benötigen wir für die Zukunft, wenn wir einen kontinuierlichen Bereitstellungsschritt implementieren, die Datei dacpac!

Code

Das gesamte Projekt ist auf Github und Sie können es hier finden!

Ich hoffe, Ihnen hat der Beitrag gefallen! Cya!

Schalten Sie Themes mit Javascript Interop in Blazor um

Fri, 01 Apr 2022 00:00:00 +0000

Für Leute wie mich, die jedes Mal, wenn ich eine Webseite öffne, unter Flashbacks leiden, habe ich eine supereinfache Lösung gefunden, wie man mit Javascript zwischen hellem und dunklem Modus umschaltet und es von Blazor aus mit Javascript Interop aufruft.

Festlegen des übergeordneten Attributs

Zunächst müssen wir das übergeordnete Element mit einem Bezeichner identifizieren, da wir die Farben abhängig vom Wert dieses Bezeichners ändern.

Um dies in Javascript zu tun, müssten wir diesen Befehl ausführen

document.documentElement.setAttribute('data-theme', 'YOUR_IDFENTIFIER');

In unserem Fall möchten wir zwei Bezeichner für jeden Stiltyp haben, nämlich light und dark.

Erstellen einer Javascript-Datei zur Handhabung der Logik

Jetzt haben wir die Funktion, die Kennung zu aktualisieren. Jetzt erstellen wir eine Javascript-Datei mit einer Funktion, die diese Logik ausführt. Unsere Datei wird app.js heißen.

In dieser Datei haben wir eine Funktion, die den zuvor erwähnten Code aufruft.

var toggleTheme = function (identifier) {
 document.documentElement.setAttribute('data-theme', identifier);
}

Javascript-Datei zu Blazor hinzufügen

Fügen Sie das Skript zur Blazor-Anwendung hinzu, indem Sie es dort hinzufügen, wo sich die Skripte befinden.

<script src="~/js/app.js"></script>

Den Dienst erstellen

Nachdem wir nun den Javascript-Code haben, müssen wir einen Dienst erstellen, der ThemeToggleService heißt.

Dieser Dienst übernimmt die Logik zum Umschalten zwischen dem Thema light und dark.

JSInterop injizieren

Um ein beliebiges Javascipt aufzurufen, müssen wir JSInterop aufrufen, also müssen wir eine Eigenschaft erstellen, die injiziert.

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace BlazorDarkmodeToggle.Data
{
 private readonly IJSRuntime jSRuntime;

 public ThemeToggleService(IJSRuntime jSRuntime)
 {
 this.jSRuntime = jSRuntime;
 }
}

Funktion zum Festlegen der Kennung

Nachdem wir nun den Dienst erstellt haben, erstellen wir die Funktion zum Festlegen der Kennung. Diese Funktion aktualisiert lediglich den data-theme auf der Seite.

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

Dienst zum Start hinzufügen

Um den Dienst für alle Komponenten und Seiten verfügbar zu machen, müssen wir ihn zur Datei Program.cs hinzufügen.

builder.Services.AddSingleton<ThemeToggleService>();

Die Datei wird also so aussehen

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();

Beachten Sie, dass sich dies ändern kann, je nachdem, ob Sie Blazor Server oder Blazor WebAssembly verwenden.

Das CSS backen

Nachdem wir nun einen Teil des Codes fertig haben, müssen wir mit der Arbeit am CSS beginnen. Was wir tun müssen, ist, alle CSS-Eigenschaften, die die CSS-Farben, den Hintergrund usw. verarbeiten, auf eine Variable zu setzen.

:root {
 --background-color:#ffffff;
 --text-color:#000000;
}

Sobald wir dies getan haben, können wir mithilfe des Bezeichners problemlos zwischen den Bezeichnern wechseln und einen der anderen Werte verwenden.

[data-theme="dark"] {
 --background-color: #000000;
 --text-color: #ffffff;
}

Für das coole Animations-Fading fügen wir einfach allen eine transition-Eigenschaft hinzu, damit es gut aussieht.

* {
 transition: all 250ms;
}

Jetzt werden wir diese Variablen einigen CSS-Klassen zuweisen, damit wir sie auf der Blazor-Seite sehen können.

.app-background {
 background-color: var(--background-color);
 width: 200px;
 height: 200px;
}

.app-text {
 color: var(--text-color);
}

Denken Sie daran, die Datei zur Blazor-Anwendung hinzuzufügen, indem Sie sie im head hinzufügen.

<link href="css/app.css" rel="stylesheet" />

Anruf von Blazor

Wie werden wir das also testen? Um es einfach zu halten, fügen wir einfach ein Div mit der Klasse app-background hinzu und darin befindet sich ein p mit der Klasse app-text.Erstellen wir also eine Seite mit dem Namen Theme.razor im Ordner Pages und fügen Sie dafür Code hinzu

@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();
 }
}

Wir könnten dies testen, indem wir zu /theme gehen, aber fügen wir es auch der Navigationsleiste hinzu

<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>

Testen

Wie Sie sehen, können Sie sehen, wie leistungsstark das ist, sobald wir die Änderungen an Design, Hintergrund und Schriftfarbe umschalten. Wenn Sie tatsächlich die gesamte Seite mit diesen Variablen in CSS entwickeln, könnten Sie verschiedene Designs haben und diese einfach umschalten!

Wie großartig!!

Code

Das gesamte Projekt ist auf Github und Sie können es hier finden!

Ich hoffe, Ihnen hat der Beitrag gefallen!

Ressourcen

JavaScript-Funktionen von .NET-Methoden in ASP.NET Core Blazor aufrufen

Hochladen von Dateien in Azure Blob Storage in Blazor

Wed, 23 Mar 2022 00:00:00 +0000

Der Azure Blob-Speicherdienst ist einer der am häufigsten genutzten Dienste im Azure-Ökosystem. Er ermöglicht das Hochladen vieler Dateien in die Cloud und ist dabei supergünstig. Es verfügt außerdem über ein intuitives Web, auf das Sie zugreifen oder es über einen direkten Link herunterladen können.

Alles in allem ein recht guter Service, ich nutze ihn sowohl für berufliche als auch für private Projekte und ehrlich gesagt ist das Beste die Einfachheit, mit der er funktioniert.

In den meisten Fällen habe ich Azure Blob Storage im Backend verwendet und dort direkt etwas hochgeladen, das das Ergebnis eines Vorgangs oder ähnliches ist. Ich habe also noch nie eine Datei von einer Website oder so hochgeladen. Unglücklich!

Da ich ein Blazor-Fan bin, zeige ich Ihnen eine Möglichkeit, Dateien mithilfe der nativen Dateieingabe von HTML5 in einen Azure Blob Storage hochzuladen.

Voraussetzungen

Azure-Konto (wenn Sie es nicht haben, gehen Sie hier mit einer Menge $$$ zu).
Eine IDE (VS, Code, alles wird funktionieren)
.NET Core 3.0 oder höher

Erstellen eines Azure Blob Storage

Gehen Sie zu Ihrem Azure-Portal und beginnen Sie mit der Erstellung eines Speicherkontos.

Suchen Sie zunächst nach Storage accounts und klicken Sie auf das Ergebnis.

Klicken Sie nach dem Laden auf Create.

Es erscheint ein Formular mit einer Reihe von Schritten. Füllen Sie diese aus.

Nachdem Sie alles mit den gewünschten Einstellungen gefüllt haben, bestehen Sie die Validierung und erstellen Sie die Ressource.

Nachdem es erstellt wurde, klicken Sie auf Go to resource. Wir erhalten eine Verbindungszeichenfolge, mit der wir mit der API spielen können.

Holen Sie sich die Ressourcenschlüssel

Nachdem wir zu unserer neu erstellten Ressource gelangt sind, gehen Sie zu Acccess keys unter Security + networking. Nach dem Laden sehen Sie ein Connection string und ein Key, kopieren Sie sie, da wir sie später brauchen werden!

Erstellen eines coolen Blazor Server-Projekts

Ich werde für dieses Tutorial Visual Studio 2022 verwenden, aber wie ich bereits sagte, können Sie jede andere IDE verwenden und das Projekt einfach mit der dotnet-CLI erstellen.

Dann lassen Sie uns mit Visual Studio in nur wenigen Schritten ganz schnell ein Blazor-Projekt erstellen.

Wenn wir das ausführen, was wir gerade erstellt haben, sieht es so aus: eine ganz normale Blazor-Anwendung.

Nachdem wir das Projekt nun erstellt haben, erledigen wir einige Dinge an der Benutzeroberfläche, damit wir eine neue Seite mit einer Reihe von Eingaben haben, die wir mit Schlüsseln aus der Ressource, einem InputFile für die Datei(en), einer Schaltfläche zum Ausführen einer Aktion und einer Meldung, die sich aus der Aktion ergibt, füllen können.

Erstellen des Modells

Wir werden einige Modelle brauchen, um das richtig zu machen. Zuerst haben wir die Klasse BlobRequest, die die Verbindungszeichenfolge, den Containernamen und die Dateien verarbeitet.

Um alles übersichtlich zu halten, erstellen wir außerdem eine Klasse namens BlobFile, in der wir den Name und den Data speichern.

Ich habe einen Ordner namens Models erstellt, damit wir alles getrennt haben.

Die Kurse sind sehr einfach.```csharp 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? Files { get; set; } } }


```csharp
namespace UploadingFilesAzBlobBlazor.Models
{
 public class BlobFile
 {
 public string? Name { get; set; }
 public byte[]? Data { get; set; }
 }
}

Ändern der Benutzeroberfläche

Nachdem wir nun unser Modell erstellt haben, können wir damit beginnen, die Benutzeroberfläche zu zaubern!

Erstellen Sie zunächst eine Seite im Ordner Pages mit dem Namen Upload.razor.

Auf dieser Seite werden wir ein kleines Formular hinzufügen, das unsere Klasse BlobRequest ausfüllt, also müssen wir Eingaben für ConnectionString, Container und Files hinzufügen.

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

Es ist ein bisschen Code, aber im Grunde wird das Formular gerendert und die Validierung durchgeführt.

Wenn Sie auf die Schaltfläche zum Hochladen klicken und alles in Ordnung ist, wird eine Warnung angezeigt.

Hochladen in Azure Blob Storage

Nachdem wir nun den Großteil der Benutzeroberfläche fertiggestellt haben, installieren wir nun das Paket, das die Azure Blob Storage-API verwaltet und uns das Hochladen von Dateien ermöglicht. Ziemlich einfach.

Fügen Sie das NuGet-Paket hinzu

Lassen Sie uns die NuGet-Pakete aus dem Projekt verwalten und Azure.Storage.Blob hinzufügen.

Auf Azure Blob Stoare hochladen

Lassen Sie uns nun die Logik für das eigentliche Hochladen der Datei erstellen. Normalerweise würden wir die Verbindungszeichenfolge und den Schlüssel aus der app.config verwenden, aber für dieses Tutorial verwenden wir Eingaben und stellen die Daten dort bereit.

Fügen wir zunächst den using für die Azure Blob Storage-Klasse hinzu

@using Azure.Storage.Blobs
@using Azure.Storage.Blobs.Models

Dann werden wir an der Methode HandleValidSubmit arbeiten, die eine Verbindung zum Blob-Speicher herstellt, den Container erstellt, falls dieser nicht vorhanden ist, und dann die Dateien hochlädt.

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

Testen des Codes

Jetzt ist es an der Zeit, den Code zu testen. Füllen Sie dazu einfach das Formular aus und klicken Sie auf „Senden“.

Wir zeigen eine Warnung an und die Datei sollte in den Azure Blob Storage hochgeladen werden. Gehen Sie zum Azure-Portal und werfen Sie einen Blick darauf.

Wie Sie sehen, wurde auch der Container erstellt. Wenn wir nun in den Container gelangen, sehen wir die von uns hochgeladene Datei.

Gute Arbeit!

Refactor

Nachdem nun alles funktioniert hat, verschieben wir den Code von der Seite .razor in eine Klasse .razor.cs, damit er besser aussieht.

Wenn Sie Visual Studio 2022 verwenden, erscheint beim Bewegen des Mauszeigers direkt im @code eine Glühbirne. Es zeigt Ihnen eine Option für Extract block to code behind und tut, was es verspricht!

Jetzt wird alles getrennt und erledigt!

Code

Das gesamte Projekt ist auf Github und Sie können es hier finden!

Wenn Sie Probleme oder Fragen haben, können Sie mich gerne über die sozialen Medien unter @emimontesdeoca kontaktieren (auf Twitter ist das eigentlich @emimontesdeocaa mit zwei aa am Ende). Die meisten meiner sozialen Netzwerke finden Sie auch in der Kopfzeile des Blogs.

Ich hoffe, Ihnen hat der Beitrag gefallen! Cya!

Ressourcen

Überschreiben eines Kerncontrollers von Pimcore

Thu, 10 Dec 2020 00:00:00 +0000

Ich arbeite jetzt schon seit einiger Zeit an einem Pimcore-Projekt, habe PHP und Symfony noch nie in meinem Leben berührt, daher war es eine große Herausforderung.

Die Dokumentation ist großartig, ich meine, im Ernst, sie ist großartig, aber sie scheint nicht für Anfänger in der Sprache/dem Framework gedacht zu sein, also musste ich mir bei allem, was ich gemacht habe, Notizen machen.

Nachdem ich erfahren habe, dass man Pimcore mithilfe von Bundles erweitern kann, habe ich stundenlang versucht, Controller, Javascript-Methoden und mehr zu überschreiben.

In diesem Beitrag erkläre ich, wie ich es geschafft habe, einen Controller zu überschreiben. Wie man Javascript-Dateien überschreibt, erfahren Sie später 😎.

Das Bundle erstellen

Zuerst müssen wir ein Bundle dafür erstellen. Das ist ziemlich einfach, da es in der [Pimcore-Dokumentation](https://pimcore.com/docs/pimcore/current/Development_Documentation/Extending_Pimcore/Bundle_Developers_Guide/index.html dokumentiert ist. Wir müssen nur bin/console pimcore:generate:bundle --namespace=EmiDemo/EmiDemoBundle im Projektordner ausführen.

Es wird einige Fragen aufwerfen, aber kein Grund zur Sorge.

Es wird ein neuer Ordner unter dem Ordner src mit dem Namensraum erstellt, den wir zuvor deklariert haben, und darin befinden sich alle notwendigen Dateien für das Bundle.

Außerdem wird das Plugin von der Pimcore-Administratorseite erkannt, aber deaktiviert. Sie müssen es aktivieren, um es verwenden zu können.

Überschreiben einer Methode von einem Controller

Um eine Methode in einem Controller zu überschreiben, müssen Sie natürlich zuerst die Aktion finden, die Sie aktualisieren möchten. Das scheint einfach zu sein, aber ich erkläre Ihnen, wie ich es normalerweise mache (von meinem Teamkollegen Cesar gelernt).

Rufen Sie zunächst die Seite auf, von der Sie glauben, dass der Controller Maßnahmen ergreift. In meinem Fall möchte ich die Seite überprüfen, die geladen wird, wenn wir ein Asset öffnen

Öffnen Sie dann einfach die Konsole und gehen Sie zur Registerkarte „Netzwerk“, führen Sie die gleichen Schritte noch einmal durch und versuchen Sie, die Aktion zu finden

Anhand dieser Informationen können Sie erkennen, dass die Aktion, die das Asset lädt, http://localhost/admin/asset/get-data-by-id?_dc=1607601778450&id=2&type=image ist. Daraus können wir ersehen, dass die Controller-Aktion get-data-by-id ist.

Suchen Sie die Aktion im Kerncontroller

Für mich ist es am einfachsten, alle Dateien im Visual Studio-Code zu finden

Wahrscheinlich wird es mehr als eines finden, also müssen Sie einen Blick darauf werfen und entscheiden, welches das richtige ist. In unserem Fall arbeiten wir mit Assets, daher ist es klar, dass wir AssetController.php verwenden möchten.

Ändern Sie den Kerncontroller

Das hängt vom Entwickler ab. Normalerweise mache ich das nicht, weil es schneller ist, einfach den Controller zu überschreiben und von dort aus zu entwickeln. Ich würde jedoch empfehlen, zunächst den Controller im Kernpaket zu aktualisieren, um zu sehen, ob Ihre Änderungen funktionieren.

In unserem Fall werde ich am Anfang der Methode einfach eine Nachricht zurückgeben, um zu überprüfen, ob sie funktioniert.

return $this->adminJson(['success' => false, 'message' => "Overriding the getDataByIdAction in the core!!"]);

Dann laden wir unser Asset neu und überprüfen die Registerkarte „Netzwerk“.

Lassen Sie uns behalten, was wir dort haben, damit wir später wissen, dass wir die Bundle-Nachricht anstelle der Kernnachricht verwenden.

Jetzt kopieren wir das einfach in eine temporäre Datei, um nachzuverfolgen, was wir getan haben.

Verschieben Sie diese Änderungen in das Bundle

Um diese Änderungen nun auf unser Bundle zu übertragen, benötigen wir zunächst einige Dinge von unserem Kerncontroller:

Namensraum
Importe
Controllername

Und natürlich die Methode getDataByIdAction, die wir überschreiben möchten.

Legen Sie den Controller frei

Wir müssen den Controller freigeben. Dazu müssen Sie in die Datei /src/EmiDemo/EmiDemoBundle/Resources/config/pimcore/routing.yml gehen und hinzufügen

options:
 expose: true

Außerdem müssen wir den prefix in den Controller ändern, den wir überschreiben möchten, in unserem Fall den admin-Controller.

Am Ende wird es also so aussehen

emi_demo_emi_demo:
 resource: "@EmiDemoEmiDemoBundle/Controller/"
 type: annotation
 prefix: /admin
 options:
 expose: true

DefaultController.php

In unserer Datei werden wir die Importe hinzufügen und den Controller um den Controller erweitern, den wir überschreiben

Dann kopieren wir einfach die Methode vom Kerncontroller und aktualisieren in unserem Fall die Nachricht, die wir zurückgeben.

Wenn Sie sich erinnern, haben wir bereits eine Meldung im Kerncontroller: Overriding the getDataByIdAction in the core!! und jetzt sollten wir Overriding the getDataByIdAction in the bundle!! sehen.

Lassen Sie uns einfach nichts zurückgeben und sehen Sie, dass wir die Seite jetzt so sehen können, wie sie vorher war

Kommentieren Sie die Return-Anweisung aus und laden Sie sie erneut

Das ist es

Und mit dieser kleinen Demo können Sie sehen, wie einfach Sie einen vorhandenen Pimcore-Core-Controller übersteuern können. Es gibt einige Schritte, die Sie befolgen müssen, aber es ist nichts Schwieriges. Stellen Sie einfach sicher, dass Sie den Controller freigeben und den Cache von Zeit zu Zeit leeren, während Sie Änderungen vornehmen. Manchmal wird er zwischengespeichert und Sie stecken fest und denken, dass er nicht funktioniert und nur zwischengespeichert wird.

Wenn Sie sich fragen, wie Sie die Javascript-Dateien überschreiben können, finden Sie dies in einem anderen Tutorial 😁.

Konfigurieren Sie das Apple Magic Keyboard 2 unter Windows 10

Wed, 11 Nov 2020 00:00:00 +0000

Erst gestern habe ich mir ein Apple Magic Keyboard 2 gekauft, obwohl ich etwa 5 mechanische Tastaturen habe, weil ich es ausprobieren wollte und es kabellos war.

Mein Hauptbetriebssystem ist Windows 10, ich liebe es und möchte es nicht ändern. Vor diesem Hintergrund wusste ich, dass einige Dinge getan werden müssen, damit die Tastatur perfekt funktioniert. Ich weiß, wie Apple funktioniert und wie sie ihre Geräte gerne in ihrem Ökosystem behalten.

Probleme

Wenn Sie die Tastatur koppeln, werden Sie einige Dinge erkennen:

Funktionstasten funktionieren nicht
Einige Tasten sind falsch zugeordnet (das ist mir in der spanischen Version passiert)

Dokumentation

Damit es funktioniert, musste ich viel im Internet lesen, aber diese beiden Links haben mir geholfen, dass es funktioniert:

Installieren des Apple Keyboard-Treibers

Einige dieser Schritte stammen aus der zuvor genannten Dokumentation:

Installieren Sie 7zip auf Ihrem Computer, falls Sie es nicht haben.
Installieren Sie Python (Version 2.x) auf Ihrem Computer, falls Sie es nicht haben.
- WICHTIG: Die neueste Version von Python ist 3.x. Sie benötigen jedoch Version 2.x, da das Brigadier-Skript nicht mit Version 3.x kompatibel ist.
- (Option) Das Installationsprogramm fügt python.exe standardmäßig nicht zu Ihrem PATH hinzu. Wenn Sie möchten, müssen Sie diese Option aktivieren. (siehe Screenshot rechts)
- Wenn Sie bereits eine andere Version von Python haben, möchten Sie diese Option wahrscheinlich nicht aktivieren.
Laden Sie brigadier herunter (ein Python-Skript, das Ihnen beim Herunterladen der neuesten Boot Camp-Version hilft).
Klicken Sie bitte mit der rechten Maustaste auf den folgenden Link und speichern Sie die Datei über „Link speichern unter…“. https://raw.githubusercontent.com/timsutton/brigadier/master/brigadier
Öffnen Sie das Eingabeaufforderungsfenster (auch bekannt als DOS-Box) und wechseln Sie in das Verzeichnis, in das Sie das Brigadier-Skript heruntergeladen haben.
Angenommen, das Brigadier-Skript wurde als „brigadier.txt“ gespeichert, führen Sie bitte den folgenden Befehl aus:
- Wenn sich Python Version 2.x in Ihrem PATH befindet: python brigadier.txt –model=MacBook13,2
- Ansonsten: [Pfad zur Python-Version 2.x]\python.exe brigadier.txt –model=MacBook13,2
Es wird ein großes Paket mit allen Treibern vom Bootcamp heruntergeladen
Erstellen Sie einen Ordner mit dem Namen BootCamp und kopieren Sie die Dateien BootCamp-xxx-yyyyyy\BootCamp\Drivers\Apple\BootCamp.msi und BootCamp-xxx-yyyyyy\BootCamp\Drivers\Apple\AppleKeyboardMagic2 hinein.
Führen Sie eine Admin-Powershell aus und führen Sie BootCamp.msi aus. Es werden einige Dinge installiert, aber wir müssen den Treiber mithilfe des Inhalts des Ordners AppleKeyboardMagic2 aktualisieren
Geräte-Manager starten (devmgmt.msc)
Erweitern Sie den Knoten Human Interface Devices.
Suchen Sie nach Bluetooth HID Device
Aktualisieren Sie den Treiber mithilfe des Inhalts des Ordners AppleKeyboardMagic2.
Computer neu starten

Die Bluetooth-Tastatur sollte jetzt als Apple-Tastatur erkannt werden

Verhalten der FN-Tasten aktualisierenWenn Sie alles ordnungsgemäß installiert haben, werden Sie feststellen, dass die FN-Tasten standardmäßig aktiviert sind. Das bedeutet, dass Sie `fn` + `F5` drücken müssen, um tatsächlich die Taste `F5` zu drücken.

Um dies zu beheben, habe ich eine im Dokumentationsabschnitt angegebene Lösung gefunden, die funktioniert, indem ein Eintrag im Regedit geändert wird.

Öffnen Sie regedit
Gehen Sie zu HKEY_CURRENT_USER\SOFTWARE\Apple Inc.\Apple Keyboard Support
Erstellen oder aktualisieren Sie OSXFnBehavior und setzen Sie es auf 0
Starten Sie den Computer neu

Schlüsselzuordnung aktualisieren

Wenn Sie ein Problem mit den Zuordnungen haben, können Sie SharpKeys verwenden und diese aktualisieren.

Es ist wirklich einfach zu verwenden, aber denken Sie daran, sich abzumelden oder den Computer neu zu starten, um die Updates zu aktivieren, da dadurch die Registrierung aktualisiert wird.

In meinem Fall musste ich die Schlüssel Windows, alt, º und <> aktualisieren.

Kompilierte Bibliotheken zu einem NuGet-Paket hinzufügen

Thu, 01 Oct 2020 00:00:00 +0000

Erst neulich habe ich einen Fehler bezüglich eines NullReferenceException in einer fehlenden Bibliothek gefunden, der dort hätte sein sollen, da er aus einem Nuget-Paket stammt, das wir hochgeladen haben.

Im Grunde habe ich eine Bibliotheksklasse kompiliert, die auf einige Projekte verweist. In der Build-Phase wurden die dll-Dateien zum Ordner bin hinzugefügt, aber wenn packaging als Nuget-Paket erstellt und in einer anderen Lösung installiert wird, sind die dll-Dateien, auf die ich verwiesen habe und die in den bin-Ordner kopiert werden sollten, nicht vorhanden.

Wie man es löst

Die Lösung dieses Problems ist ziemlich einfach: Sie müssen die Datei nuspec aktualisieren und für jede der Bibliotheken, die Sie kopieren möchten, die Datei file im Teil files hinzufügen.

<?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>

Führen Sie einen Terminal-Load-Bash im WSL-Home-Verzeichnis durch

Tue, 22 Sep 2020 00:00:00 +0000

Ich liebe WSL seit dem Tag seiner Veröffentlichung für Entwicklung und Tests, dann wurde die Terminal-App eingestellt und ich könnte nicht glücklicher sein, sie sieht gut aus, funktioniert perfekt und bietet eine großartige Leistung.

Es wäre dumm, es nicht mit der WSL-Distribution zu verwenden, anstatt die Konsole zu verwenden, die es Ihnen bietet.

Diese Konsole ist offensichtlich gut, aber nachdem Sie Terminal verwendet haben, gibt es kein Zurück mehr. Es ist einfach viel besser, auch Farben.

Wenn Sie nun das Terminal starten und einen neuen Tab öffnen, um Ihre WSL-Distribution zu laden, wird Ihr gemounteter Benutzerordner geladen.

Das ist eigentlich kein Problem, denn wenn Sie einfach cd ~ ausführen, wird nur der Benutzerordner der Distribution geladen.

Die Sache ist, dass ich es nicht immer wieder tun möchte, also aktualisieren wir eine Datei, um es selbst zu erledigen.

.bashrc

Starten Sie das Terminal oder die Konsole, gehen Sie in Ihren Profilordner und bearbeiten Sie dann die Datei .bashrc mit Ihrem bevorzugten Texteditor.

Fügen Sie cd ~ am Ende der Datei vor der letzten Anweisung hinzu.

Speichern Sie, öffnen Sie die WSL-Konsole erneut mit dem Terminal und Sie sollten sich im Profilordner befinden.

Beachten Sie, dass Sie dies für alle Ihre WSL-Installationen tun müssen, da wir die Datei bashrc für eine einzelne aktualisieren.

Dynamische Objektgenerierung mit ExpandoObject

Fri, 06 Mar 2020 00:00:00 +0000

Ich musste eine Excel-Datei mit eigenen definierten Spalten in eine neue mit dynamischen Spalten konvertieren und war etwas verwirrt, wie ich das ohne ernsthafte Leistungsprobleme richtig machen sollte.

Ich bin auf ein Tutorial gestoßen, das Sie [hier](https://www.oreilly.com/content/building-c-objects-dynamically/ finden können und das .NET ExpandoObject verwendet, mit dem Sie praktisch ein Objekt erstellen und dynamische Mitglieder hinzufügen können.

ExpandoObject

Die Microsoft-Definition lautet:

Stellt ein Objekt dar, dessen Mitglieder zur Laufzeit dynamisch hinzugefügt und entfernt werden können.

Und es gibt ein paar Anmerkungen:

Mit der ExpandoObject-Klasse können Sie Mitglieder ihrer Instanzen zur Laufzeit hinzufügen und löschen sowie Werte dieser Mitglieder festlegen und abrufen. Diese Klasse unterstützt die dynamische Bindung, wodurch Sie Standardsyntax wie „sampleObject.sampleMember“ anstelle einer komplexeren Syntax wie „sampleObject.GetAttribute(“sampleMember”) verwenden können.

Aktuelles Verhalten

Wir haben ein ExcelExportService, das durch Übergabe eines List<T>, in diesem Fall ExcelItem, Reflection verwendet, um eine xlsx-Datei zu erstellen.

Bisher sieht unser Code so aus:

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 ist das Objekt mit allen Eigenschaften, die zum Generieren der Excel-Datei verwendet werden.

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

Dieser Ansatz funktioniert perfekt, die Datei xlsx wird ohne Probleme generiert, wobei jede Spalte jede Eigenschaft ist. Sie würden diese Methode GetExcelBytes beispielsweise wie folgt verwenden, um sie in einer Datei zu speichern:

File.WriteAllBytes("path-to-somewhere/my-file.xlsx", GetExcelBytes());

Das Problem

Da wir genau wissen, dass wir alle Eigenschaften des ExcelItem-Objekts verwenden, möchte ich eigentlich nicht alle davon verwenden, sondern nur vielleicht 2 oder 3 davon.

Eine Voraussetzung ist auch, dass ich den Code nicht ändern möchte. Alles sollte vom administrator erledigt werden, der entscheidet, welche Spalten angezeigt werden sollen, und er kann die Eigenschaften im Code kennen oder auch nicht.

TLDR: Alles sollte dynamisch sein, wir haben ein Objekt mit Eigenschaften und wir müssen sicherstellen, dass die generierte Datei N Eigenschaften dieses Objekts enthält, aber offensichtlich nicht fest codiert ist.

Dynamische Spalten

Die Änderung würde darin bestehen, ein dynamic-Objekt zu verwenden, da wir festlegen möchten, welche Eigenschaften des Objekts zum Generieren der Spaltenliste verwendet werden.

Nehmen wir an, wir haben ein Objekt mit vielen Eigenschaften, zum Beispiel einer Tonne davon, und wir möchten das ExcelItem-Objekt nicht jedes Mal ändern, wenn wir eine Änderung vornehmen. Wir erstellen eine ColumnExcelItem-Tabelle, die zum Generieren dieses ExcelItem verwendet wird.

Datenbankstruktur

Wir speichern diese Definition in unserer Datenbank in etwa so:

Id PropertyName
---------------------
1 Name
2 Surname
3 Age

Beachten Sie, dass wir weniger Werte haben als die vorhandenen Eigenschaften des Objekts ExcelItem, da es 6 Eigenschaften hat und nur 3 in der Datenbank aufgeführt ist.

Beachten Sie außerdem, dass PropertyName mit dem Eigenschaftsnamen des Objekts übereinstimmen muss, das ich für die dynamische Zuweisung verwende.

Das Objekt bauen

Nachdem wir nun die Datenbanktabelle haben, müssen wir das Repository erstellen, um diese zu erhalten und sie im Code verwenden zu können.Ich werde für diesen Teil kein Tutorial erstellen, sondern direkt zum Anfang der neuen Funktion GetExcelBytes() springen.

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

Jetzt erstellen wir ein Objekt mit einigen Eigenschaften von ExcelItem, aber völlig dynamisch. Anstatt alle 6 Eigenschaften zu verwenden, verwenden wir nur 3 davon, diejenige, die wir nur senden möchten.

Nehmen wir nun an, dass dieses ExcelItem-Objekt 200 Eigenschaften hat, verrückt, aber es könnte passieren.

Das Einzige, was ich tun muss, ist, die Eigenschaften, die ich in der Excel-Datei rendern möchte, in die Tabelle ColumnExcelItem einzufügen, und das war’s.

Fälle

In diesem Fall haben wir nur einen einzigen Fall verwendet, aber nehmen wir an, Sie möchten für einige Benutzer unterschiedliche Berichte haben. Nehmen wir an, dass die Rolle admin alle Eigenschaften erhalten soll, dann würden Sie so etwas wie diese Struktur in der Datenbank erstellen

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

Wenn Sie dann die Vorlage abrufen, können Sie verschiedene Spalten haben, alle dynamisch und ohne Codebezug.

Wenn wir einen Benutzer mit der Rolle Admins haben, enthält die Datei die Spalten Id, Name, Surname, Age, CreatedAt, UpdatedAt.

Wenn Sie es mit der Rolle Users generieren, hat es Name, Age. Surname.

Fazit

Dies ist eine coole Art zu lernen, wie dynamic in .NET funktioniert, und es ist eine wirklich gute Lösung, wenn Sie unterschiedliche Rollen oder Vorlagen für verschiedene Benutzer benötigen und nicht wirklich daran interessiert sind, Zeit in die Hardcodierung zu investieren.

Kontinuierliche Bereitstellung des NuGet-Pakets mit TravisCI

Tue, 21 Jan 2020 00:00:00 +0000

Kürzlich habe ich ein Tutorial darüber erstellt, wie Sie Travis CI als Tool zum automatischen Testen Ihres Codes verwenden, den Sie gerade in den Zweig master gepusht haben oder zu pushen versucht haben. Lassen Sie es kompilieren und testen und berichten Sie schließlich über den Status dieser Änderung.

Aber wir können es weiter besser machen, zum Beispiel möchte ich die Kernbibliothek, die im letzten Tutorial erstellt wurde, mit dem Feed NuGet öffentlich machen, damit jeder die Bedienung in seinen Bibliotheken vereinfachen kann!

Aber wie? Wie kompilieren, testen und veröffentlichen wir dieses Paket dann im Feed, damit jeder es in seinen Projekten herunterladen kann?

Nun, das ist dieses Tutorial für 😁!

Was ist neu?

Es gibt fast keine Änderungen am Code. Die Dinge, die wir ändern müssen, sind das Packen, die Veröffentlichung und dann die Art und Weise, wie wir es automatisieren können.

.NET Core-CLI

Wir werden die [.NET Core CLI](https://docs.microsoft.com/en-gb/dotnet/core/tools/?tabs=netcore2x verwenden, die wir im vorherigen Tutorial mit Befehlen wie dotnet restore, dotnet build und dotnet test verwendet haben.

Jetzt werden wir einen neuen Befehlssatz verwenden!

`dotnet nuget`

Sie können die Dokumentation für diesen Satz von Tools gleich [hier](https://docs.microsoft.com/en-gb/nuget/reference/dotnet-commands einsehen, aber eine kurze Erklärung:

dotnet nuget ist eine Reihe wesentlicher Tools, die das Installieren, Wiederherstellen, Entfernen und Veröffentlichen von Paketen umfassen.

NuGet-Feed

NuGet ist der Paketmanager für .NET. Die NuGet-Clienttools bieten die Möglichkeit, Pakete zu produzieren und zu nutzen. Die NuGet-Galerie ist das zentrale Paket-Repository, das von allen Paketautoren und -konsumenten verwendet wird.

NuGet ist kostenlos, Sie können sich also anmelden, Ihren API-Schlüssel abholen und mit dem Hochladen von Paketen beginnen. Sie werden hochgeladen, überprüft und dann für jeder aufgelistet.

Holen Sie sich den API-Schlüssel

Um Ihr Paket hochzuladen, benötigen Sie nach der Anmeldung Ihren API-Schlüssel. Gehen Sie also zur [API-Schlüsselseite](https://www.nuget.org/account/apikeys und erstellen Sie einen neuen.

Beachten Sie, dass der API-Schlüssel eine Ablauffrist von 365 Tagen hat.

Kopieren Sie dann Ihren Schlüssel und speichern Sie ihn wie auf der Seite beschrieben irgendwo. Sie können ihn dann nicht mehr sehen, und wenn Sie ihn nicht gespeichert haben, müssen Sie ihn neu generieren.

NuGet-Paket generieren

Nachdem wir nun den Schlüssel API haben, besteht unser nächster Schritt darin, das NuGet-Paket aus der Lösung zu generieren. Öffnen Sie also die Lösung dort, wo Sie Ihre Klassenbibliothek haben.

Ich werde die Lösung aus meinem [letzten Tutorial](https://emimontesdeoca.github.io/2020/ci-dotnet-core-and-travis-ci/ verwenden, die eine .NET Core-Bibliotheksklasse namens CalculatorCLI.Core enthält.

Gehen Sie nun zu den Projekteigenschaften und dann zu Paket. Dort werden viele Informationen zum Paket angezeigt, z. B. die Paketversion, Autoren, Beschreibungen und mehr.

Als nächstes müssen Sie dies ausfüllen. Sie müssen nicht wirklich alles ausfüllen, aber die wichtigen und obligatorischen sind Package id, Package version, Authors und Description. Auch wenn Sie versuchen, die Datei selbst hochzuladen, werden Sie nach License gefragt. Wir müssen sie ebenfalls hinzufügen.

Anschließend können Sie speichern, mit der rechten Maustaste in das Projekt klicken und Pack auswählen.

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 ==========

Die Ausgabe zeigt, dass, wenn alles in Ordnung ist, Successfully created package gedruckt wird.

Mit `dotnet`

Wie im vorherigen Tutorial haben wir verschiedene Befehle verwendet, um die Lösung zu erstellen und zu testen. Jetzt werden wir weitere Befehle zum Packen und Veröffentlichen der Pakete hinzufügen.

Diese Befehle sind:

dotnet pack -c <configuration>
dotnet nuget push <package> <k <apikey> -s <source>

Bereitstellungsskripte

Da wir die Art und Weise, wie der Build aussehen wird, ändern werden, wäre es meiner Meinung nach die beste Idee, unterschiedliche Dateien zu haben, von denen jede je nach Umgebung eine Build-Definition enthält.

Erstellen wir also einen Ordner namens scripts mit drei bash-Skripten im Stammverzeichnis des Repositorys.

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

Verbesserung der Datei `.travis.yml`.

Nachdem wir nun den Quellcode aktualisiert haben, kennen wir die Befehle, die wir verwenden müssen, und müssen unsere kontinuierliche Bereitstellung mit kontinuierlicher Integration integrieren. Damit müssen wir eigentlich nichts weiter tun als programmieren, testen, überprüfen und pushen.

Was wir jetzt mit der Datei .travis.yml tun werden, ist Folgendes:

Verschiedene stages hinzufügen
Jeder stage hängt vom Zweig ab
Wenn Ihr Build auf Master basiert, bedeutet dies, dass das Paket aktualisiert werden muss. Daher werden wir unser Paket an die NuGet-Feeds übertragen
Wenn es sich bei Ihrem Build um eine Pull-Anfrage handelt, prüfen wir immer noch, ob der Build kompiliert werden kann, und testen ihn, veröffentlichen ihn jedoch nicht.

Stufen

Aus ihrer Dokumentation:

Sie können Builds, Phasen und Jobs herausfiltern und ablehnen, indem Sie Bedingungen in Ihrer Build-Konfiguration (Ihrer .travis.yml-Datei) angeben.

Weitere Informationen zu TravisCI stages finden Sie auf ihrer Dokumentationsseite.

Also werden wir die Datei ändern und die Stufen hinzufügen, was am Ende so aussieht:

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

Wie Sie sehen können, haben wir drei verschiedene Stufen compile, test und push, wobei die letzte nur ausgeführt wird, wenn die branch master ist und es sich nicht um eine pull request handelt, sondern nur um eine push.

Wenn Sie das nicht verstehen, schauen Sie einfach in der Dokumentation nach und es wird ganz einfach erklärt.

Vor diesem Hintergrund werden alle pull request nichts an den NuGet-Feed weiterleiten.

Den API-Schlüssel als Umgebungsvariable festlegen

Gehen Sie zu den Einstellungen Ihres Repository-Builds und fügen Sie eine neue Umgebungsvariable mit dem Namen NUGET_API_KEY hinzu, wobei der Wert der kopierte API-Schlüssel von der NuGet-Seite ist.

Erstellen Sie ein `pull request`

Nachdem wir nun alles eingerichtet haben, ist es an der Zeit, einen pull request zu erstellen und zu prüfen, ob die Kompilierung für diesen Pull-Request den letzten stage ignoriert.

Überprüfen Sie die Builds

Sobald Sie die Pull-Anfrage stellen, wird ein Build im TravisCI-Dashboard in die Warteschlange gestellt, und wie Sie sehen, haben wir dort zwei verschiedene Builds und nicht drei.

Akzeptieren wir nun den pull request und überprüfen wir den Build erneut, um festzustellen, dass wir jetzt drei statt zwei Jobs haben.

Und sobald Sie sehen, dass der Build in die Warteschlange gestellt wird, können Sie die drei Jobs einschließlich des Deploy-prod am Ende sehen.

Sobald der gesamte Build abgeschlossen ist, können Sie in den Protokollen sehen, dass das Paket an die Quellen übertragen wurde.

Und natürlich können Sie es auf der NuGet-Seite sehen

Das ist es

In diesem Tutorial haben wir erfahren, wie wir unsere NuGet-Paketzustellung automatisieren können. Wir haben einige Tools wie TravisCI, stages und dotnet nuget verwendet.

Meiner Meinung nach, auch wenn die ordnungsgemäße Einrichtung einige Zeit in Anspruch nehmen würde und in manchen Fällen viel zu komplex sein könnte. Es lohnt sich, Zeit in diese Art von Techniken zu investieren, um alles perfekt und automatisiert zu machen.

Den Quellcode mit der Datei .travis.yml finden Sie direkt hier. Wenn Sie Fragen haben, können Sie mich gerne auf meinem Twitter kontaktieren!

Kontinuierliche Integration für ein .NET Core 3.0-Projekt mit TravisCI

Tue, 14 Jan 2020 00:00:00 +0000

Letztes Wochenende habe ich beschlossen, dass ich mein Scraper-Checker-Downloader-Projekt, das ich in verschiedenen Repositories durchgeführt habe, richtig starten möchte.

Nachdem ich ein weiteres Projekt gestartet hatte, musste es cool sein, wie wirklich cool, mit CI/CD, Pull-Request, Dokumentation, Abzeichen in der Readme-Datei und allem, was ich gesehen habe, dass es cool ist und tatsächlich die Best Practices sind.

Und nach einem guten Wochenende habe ich schließlich [Dramarr](https://github.com/Dramarr erstellt, eine Reihe von Tools, mit denen Sendungen aus verschiedenen Quellen verschrottet und heruntergeladen werden können.

Es gibt verschiedene Repositorys in der Organisation und die meisten davon sind Bibliotheken, die im Pull-Request und bei der Zusammenführung im Master-Zweig selbst kompiliert, getestet und bereitgestellt werden.

Das nennt man CI/CD oder Continuous Integration/Continuous Delivery.

Aber in diesem Tutorial werden wir nur über CI sprechen.

Kontinuierliche Integration

Was ist das?

Entnommen aus Martin Fowlers Blog, was die beste Erklärung ist, die ich gelesen habe:

Kontinuierliche Integration ist eine Softwareentwicklungspraxis, bei der Mitglieder eines Teams ihre Arbeit häufig integrieren, normalerweise integriert jede Person mindestens täglich – was zu mehreren Integrationen pro Tag führt. Jede Integration wird durch einen automatisierten Build (inkl. Test) verifiziert, um Integrationsfehler schnellstmöglich zu erkennen.

Werkzeuge

Es gibt viele Tools, um Ihren Workflow mit CI/CD zu integrieren, aber für dieses Tutorial verwenden wir Github zum Speichern unseres Codes und die TravisCI Tools zum Einrichten des CI. Was die Sprache und Frameworks betrifft, werden wir C# und das neue.NET Core 3.0 verwenden.

Anforderungen

Damit dies funktioniert, benötigen Sie drei einfache Dinge:

Neueste Version von Visual Studio 2019
Github-Konto
Travis-CI-Konto, verknüpft mit Ihrem Github-Konto

Projekt

Für dieses Tutorial verwenden wir einen einfachen Rechner. Wir werden eine Bibliothek, ein Befehlszeilentool und ein Testprojekt erstellen, um alles zu testen.

Dieses Testprojekt wird auch ausgeführt, wenn wir das CI einrichten. Das heißt, wenn wir in Zukunft eine Änderung am Code vornehmen und die Tests, die wir ursprünglich erstellt haben, nicht bestehen, erhalten wir eine Benachrichtigung oder können die Pull-Anfrage einfach ablehnen.

Erstellen des Github-Repositorys

Zuerst erstellen wir ein Github-Repository. Gehen Sie also zu Github, erstellen Sie das Repository und klonen Sie es in Ihre lokale Umgebung. Ich habe beschlossen, dieses neue Repository CalculatorCLI-demo zu nennen.

Die Lösung schaffen

Erstellen wir nun eine leere Lösung mit dem Namen CalculatorCLI im Stammordner des geklonten Repositorys

Kernbibliothek

Wie in einem realen Projekt werden wir unsere Logik in einem separaten Projekt speichern, das eine Bibliothek generiert, also erstellen wir sie.

Erstellen Sie ein Class Library (.NET Standard) und nennen Sie es CalculatorCLI.Core.

NET Core-VersionSobald Sie das Projekt erstellt haben, gehen Sie zu den Projekteigenschaften und ändern Sie `Target framework` in `.NET Standard 2.1`, um es mit Projekten kompatibel zu machen, die in `.NET Core 3.0` erstellt wurden.

Code

Für das Tutorial erstellen wir eine einfache Klasse, die Operationen abwickelt.

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

Nachdem wir nun das Kernprojekt haben, erstellen wir die Anwendung. In diesem Fall handelt es sich um eine einfache Konsolenanwendung, die Argumente akzeptiert und ein Ergebnis anzeigt.

Machen wir also weiter und erstellen ein neues Console App (.NET Core), ich habe es CalculatorCLI.CLI genannt.

NET Core-Version

Gehen Sie wie zuvor, sobald Sie das Projekt erstellt haben, zu den Projekteigenschaften und ändern Sie den Target framework in .NET Core 3.0, falls dies nicht bereits der Fall ist.

Fügen Sie dann den Verweis auf ConsoleCLI.Core zu unserem neu erstellten Projekt hinzu.

Code

Was nun den Code betrifft, ist dies einfacher als zuvor.

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

Wir werden diese Anwendung mit einem Befehl verwenden. Damit sie funktioniert, müssen wir sie mit einigen Parametern aufrufen. Zum Beispiel:

ConsoleCalculator.CLI.exe -op + -l 10 -r 20

Was übersetzt bedeutet:

ConsoleCalculator.CLI.exe -operator + -leftValue 10 -rightValue 20

Der Code dafür ist ziemlich einfach. Wenn er nicht mit einem bestimmten Regex-Muster übereinstimmt, handelt es sich um einen falschen Aufruf und es wird PrintUsage() aufgerufen. Das heißt, wenn wir etwas anderes als eine Zahl eingeben, weil es in der Regex festgelegt ist, wird nicht einmal versucht, die Berechnung durchzuführen.

Das heißt, wenn wir es so nennen:

ConsoleCalculator.CLI.exe -operator + -leftValue asdfg -rightValue ghjk

Es wird niemals in die Betriebslogik eingehen und wir ersparen uns zukünftige Prüfungen wie das TryParseEingeben der Werte.

Test

Wir haben die Kernbibliothek und die Befehlszeile, aber wir müssen sie jetzt testen, denn das ist es, was wir im CI tun wollen.

Machen wir also weiter und erstellen ein neues MSTest Test Project (.NET Core) und nennen es CalculatorCLI.Tests.

NET Core-Version

Gehen Sie wie zuvor, sobald Sie das Projekt erstellt haben, zu den Projekteigenschaften und ändern Sie den Target framework in .NET Core 3.0, falls dies nicht bereits der Fall ist.

Fügen Sie dann den Verweis auf ConsoleCLI.Core und ConsoleCLI.Core zu unserem neu erstellten Testprojekt hinzu.

Code

Wir werden den Test in zwei verschiedene Dateien aufteilen: CoreTests.cs und 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);
 }
 }
}

Wenn alles erstellt ist, erhalten wir am Ende eine Lösung wie diese:

Und damit können wir jetzt die Tests ausführen, also gehen Sie zu Test Explorer im Visual Studio und führen Sie sie aus!

Travis CI

Falls Sie es noch nicht wissen: TravisCI ist ein gehostetes kontinuierliches Integrations- und Bereitstellungssystem.

Hier müssen wir einige Schritte ausführen, aber zuerst verknüpfen wir unser Github-Repository, damit es von den TravisCI-Agenten abgehört werden kann, um unser Projekt zu erstellen und zu testen.

Repository aktivieren

Melden Sie sich dazu auf der Travis CI-Seite an und gehen Sie zu Ihren Repositorys. Filtern Sie dann nach dem von Ihnen erstellten Projekt und aktivieren Sie es, indem Sie auf den Schieberegler neben dem Repository-Namen klicken.

Erstellen Sie .travis.ymlWir müssen eine Datei mit dem Namen `.travis.yml` im Stammverzeichnis Ihres Projekts erstellen. Dies liegt daran, dass wie in der Dokumentation angegeben:

Travis führt Builds nur auf den Commits aus, die Sie pushen, nachdem Sie eine .travis.yml-Datei hinzugefügt haben.

Erstellen Sie also eine .travis.yml-Datei im Stammverzeichnis des Repositorys mit den folgenden Zeilen:

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

Ich werde nicht auf die Syntax eingehen, wie die Datei .travis.yml funktioniert, aber sehen wir uns an, was das bewirkt:

Wir richten die Sprache als csharp ein.
Wir werden mono nicht verwenden, da .NET Core 3.0 nativ unter Linux ausgeführt wird.
Wir setzen die dotnet-Version auf 3.0.
Wir legen den os fest, standardmäßig ist er linux, aber ich habe ihn trotzdem hinzugefügt.
Jetzt haben wir before_script, das vor der Hauptlogik angezeigt wird. Ich habe also dotnet restore zur Lösung ausgeführt, damit später alles perfekt geladen wird.
Jetzt führen wir im script einen dotnet builld und einen dotnet test für unsere Lösung durch. Dadurch wird überprüft, ob sie kompiliert wird, und dann werden die Tests ausgeführt.

Uuuund wir sind fertig!

Zum Master hochladen

Jetzt müssen wir nur noch alles vorantreiben, um es zu meistern.

git add --all
git commit -m "Initial files"
git push

Überprüfen Sie die kontinuierliche Integration

Wir können den CI-Status des Pushs an master überprüfen, den wir sowohl auf der Repository-Seite als auch im TravisCI-Dashboard durchgeführt haben.

Über den Fortschritt

Fertig

Lass es uns brechen

Um nun zu sehen, wie leistungsfähig das ist, brechen wir den Code und ändern die Kernbibliothek, um ihn zum Scheitern zu bringen.

Codeänderungen

Gehen Sie also zum Operation.cs und ändern Sie etwas, das einige Tests zum Scheitern bringt.

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

Und wenn wir den Test erneut ausführen, weil wir den Fall auf „addition“ geändert haben, schlägt er fehl:

case "+":
 OperatorEnum = OperatorsEnum.SUBSTRACT;
 break;

Wie erwartet schlug es im Fall ShouldAdd fehl:

Führen Sie nun ein Commit dieser Änderung durch, übertragen Sie sie an den Master und warten Sie auf die Ergebnisse des TravisCI-Agenten.

git add --all
git commit -m "Breaking changes"
git push

Bauen

Gehen wir nun zu den TravisCI-Protokollen und sehen, dass wir das Projekt erfolgreich abgebrochen haben, da der Integrationstest fehlgeschlagen ist und der Build-Status Fehler ist.

Ganz am Ende des Protokolls können wir den Fehler selbst sehen:

Lass es uns noch einmal reparieren!

Machen Sie nun das, was wir getan haben, rückgängig, übertragen Sie den Code an den Master und überprüfen Sie den Status des neuen Builds.

Tests werden erfolgreich bestanden:

Und auch der Aufbau ist gelungen:

Fazit

Es ist wirklich ziemlich leistungsfähig, CI und CD gibt es schon vor langer Zeit, aber jetzt ist es ziemlich einfach, es in jedem einzelnen Projekt zum Laufen zu bringen, egal wie klein oder einfach es ist.Aus meiner Sicht sollte jeder zumindest CI für jedes seiner Projekte einrichten, da dies eine gute Vorgehensweise ist und Ihnen letztendlich Zeit beim Debuggen und Finden von Fehlern erspart, die nicht auftreten sollten, wenn Sie tests und CI richtig eingestellt hätten.

Das ist es

Hier geht es darum, wie Sie mit TravisCI und dem Speichern des Codes in Github eine .NET Core 3.0-Lösung erstellen, die bei jedem Build eine kontinuierliche Integration bietet.

Den Quellcode für dieses Projekt finden Sie hier.

Meine Meinung zum In-Memory-Cache

Tue, 03 Sep 2019 00:00:00 +0000

Ich habe an einigen Dingen gearbeitet, die große Datenmengen verarbeiten. Dabei wurde mir klar, dass sich ein großer Teil davon nie ändert, zumindest nicht für einen bestimmten Zeitraum.

Deshalb dachte ich, dass es nützlich wäre, ein persönliches Cache-Repository zu erstellen. Das ist natürlich nicht neu. Vor ein paar Wochen habe ich darüber in StackOverflows [Beitrag](https://nickcraver.com/blog/2019/08/06/stack-overflow-how-we-do-app-caching/#in-memory--redis-cache von Nick Craver darüber gelesen, wie sie den Anwendungs-Cache verwalten.

Außerdem wollte ich schon immer mit Cache arbeiten, wie funktioniert es, die Logik und wie könnte ich es zum Laufen bringen, also… warum nicht!

Fließen

Hier ist ein kurzer Überblick darüber, wie sich die Klasse, die die Kontrolle über den Cache hat, verhält, wenn der Benutzer nach einem Wert fragt.

Implementierung

Bevor wir beginnen

Ich weiß, ich weiß. Es gibt System.Runtime.Caching, das den Speichercache verwaltet. Aber ich habe beschlossen, es selbst zu erstellen. Wenn Sie diese Klasse verwenden möchten, finden Sie eine Anleitung hier.

CacheItem

Der erste Schritt besteht darin, eine Klasse zu haben, die den Wert eines Objekts und das Ablaufdatum speichert. Wahrscheinlich gibt es einen besseren Weg, aber das habe ich mir gedacht, also los geht’s:

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

Dann brauchen wir eine Klasse, die die Objekte verarbeitet und irgendwo speichert (als CacheItem). Ich verarbeite gerne alle Daten/Modelle in Klassen mit dem Suffix Repository, aber das ist nicht nötig, also erstellen wir eines für das 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;
 }
}

Bisher haben wir ein statisches Wörterbuch namens Cache, in dem alle Elemente gespeichert werden. Denken Sie daran, dass dies nur so lange dauert, wie die Anwendung ausgeführt wird. Aus diesem Grund enthält dieser Tutorial-Titel In-Memory-Caching.

Beachten Sie, dass das Element Cache initialisiert wird, sobald die Klasse CacheRepository geladen wird.

Die einzige verfügbare Methode beim Aufrufen der CacheRepository-Klasse ist GetOrSet(string key, Func<T> lookup, TimeSpan durationMinutes), die drei Parameter benötigt:

key: die Kennung des zu speichernden Objekts.
lookup: die Rückruffunktion für den Fall, dass der Cache abgelaufen ist oder null ist.
durationMinutes: die Dauer in Minuten, die zur aktuellen Zeit (in UTC) addiert wird.

Zeit zum Cachen

Nutzen Sie nun unser Caching-Repository, um Daten von irgendwoher abzurufen.

Damit all dies einen Sinn ergibt, erstellen wir ein Beispielobjekt mit einigen Eigenschaften und dann ein Repository, um eine Liste dieses Objekts abzurufen und zu füllen.

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
 }
}

Da wir über die Methode zum Füllen einer Liste von User verfügen, verwenden wir die Klasse CacheRepository.

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

Und so wird jedes Mal, wenn Sie auf die Variable User zugreifen, CacheRepository nach dem Wert eines Objekts gefragt, das den Schlüssel users hat.

Wenn dieser Schlüssel vorhanden ist, wird das Ablaufdatum überprüft. Wenn eine dieser Bedingungen falsch ist, wird der Rückruf verwendet, um den Wert (mit usersRepo.Get) des Objekts festzulegen, es im Cache mit dem auf DateTime.UtcNow + TimeSpan.FromMinutes(10) festgelegten Ablaufdatum zu speichern und es zurückzugeben.

Machen Sie Seiten-Screenshots mit Devtools

Thu, 09 May 2019 00:00:00 +0000

Es gab Zeiten, in denen ich einem Kunden oder einem Teamkollegen einen vollständigen Screenshot des aktuellen Zustands der Website oder sogar eines Teils davon zeigen musste. Daher habe ich Full Page Screen Capture und für jede andere Art von Screenshots das Windows-Snippet-Tool oder Snaggit verwendet. Wenn ich es online hosten möchte, wie in diesem Beitrag [Gyazo](https://gyazo.com, das auch einen GIF-Maker hat.

Kürzlich habe ich herausgefunden, dass Devtools ein Tool hat, das einen ganzseitigen Screenshot erstellt, ohne dass eine Erweiterung erforderlich ist!

Das ist kein neuer Gedanke, er war im [Devtools-Update im April 2017](https://developers.google.com/web/updates/2017/04/devtools-release-notes enthalten, aber es sieht so aus, als ob ich unter einem Felsen lebe und es bis jetzt nicht herausgefunden habe…

Devtools

Wie auf der [offiziellen Devtools-Seite](https://developers.google.com/web/tools/chrome-devtools/?hl=en angegeben:

Chrome DevTools ist eine Reihe von Webentwicklertools, die direkt in den Google Chrome-Browser integriert sind. DevTools kann Ihnen dabei helfen, Seiten im Handumdrehen zu bearbeiten und Probleme schnell zu diagnostizieren, was Ihnen letztendlich dabei hilft, bessere Websites schneller zu erstellen.

Befehle in Devtools ausführen

Sie wissen bereits, wie man Devtools öffnet, aber falls Sie es gerade vergessen haben und für diesen Beitrag, öffnen Sie es mit der Taste F12 oder der Tastenkombination Ctrl + Shift + I. Dann müssen Sie Run command im Menü in Devtools öffnen oder Ctrl + Shift + P verwenden.

Screenshot-Tool

Wenn Sie screenshot eingeben, werden die Befehle gefiltert. Es gibt 4 Arten von Screenshot-Methoden, die Sie verwenden können:

Bereichs-Screenshot
Screenshot in voller Größe
Knoten-Screenshot
Screenshot aufnehmen

Bevor alle Screenshot-Methoden überprüft werden, lädt devtools das Bild automatisch mit dem Namen der Webseite herunter, nachdem es die Verarbeitung abgeschlossen hat.

Bereichs-Screenshot

Mit area screenshot können Sie einen Teil der Website auswählen und einen Screenshot erstellen.

Ergebnis:

Screenshot in voller Größe

Der full size screenshot erstellt einen Screenshot der gesamten Webseite, von Anfang bis Ende.

Ergebnis:

Knoten-Screenshot

Mit dem Befehl node screenshot können Sie einen Screenshot eines ausgewählten Knotens im Inspect-Element erstellen.

Ergebnis:

Screenshot aufnehmen

Der capture screenshot erstellt einen Screenshot der aktuellen Seite ohne Scrollen und in der Größe des Browsers.

Ergebnis:

Benutzerdefinierte Sprachen mit eingebetteten und externen Ressourcen in .NET Framework

Mon, 06 May 2019 00:00:00 +0000

Einführung

Bei der Arbeit sind wir auf ein normales Problem gestoßen, mit dem sich sicher viele Entwickler auseinandersetzen müssen, nämlich Sprachen und benutzerdefinierte Sprachen der Kunden, die ihren Kunden unsere Dienste anbieten.

Nehmen wir zum Beispiel an, dass die Basissprache eine informelle Sprache ist und ein Kunde eine formelle Sprache möchte, weil es sich bei seinen Kunden um ältere Menschen handelt.

Beachten Sie auch, dass diese Lösung für mehrere Sprachen gilt, wir werden Englisch und Spanisch verwenden.

Meine Muttersprache ist nicht Englisch, daher entschuldige ich mich für etwaige Fehler im Tutorial. Wenn Sie Fehler finden und diese beheben möchten, können Sie unter diesem Repo einen Pull-Request öffnen und ich werde ihn gerne genehmigen!

Ressourcen

Ressourcen sind XML-Dateien mit der Erweiterung .resx, die eine Schlüssel/Wert-Struktur haben und wie folgt aussehen:

<?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>

Wir werden Ressourcen für zwei verschiedene Sprachen erstellen: Englisch und Spanisch, daher lautet die Nomenklatur für die Dateien: resources.ISOLANGUAGECODE.resx, zum Beispiel: resource.es.resx für Spanisch und resource.resx für Englisch. Falls wir später Deutsch hinzufügen möchten, wird die Datei resource.de.resx heißen.

Eingebettete Ressource

Eingebettete Ressourcen werden beim Kompilieren des Projekts innerhalb von dll hinzugefügt.

Hier ist ein Bild mit einer eingebetteten Ressource. Wie Sie sehen können, ist die Datei Resource.resx in der Zusammenstellung nicht zu sehen.

Externe Ressource

Auf der anderen Seite handelt es sich bei den externen oder nicht eingebetteten Ressourcen um Ressourcen, die nach der Kompilierung dem Ordner hinzugefügt werden.

Die Ressourcendateien (.resx) befinden sich im Ordner Properties.

Das Projekt aufbauen

Beginnen wir mit einem Konsolenprojekt in .NET Framework.

Erstellen der eingebetteten Ressourcendatei

Fügen Sie eine Ressourcendatei mit einigen Schlüsseln hinzu und stellen Sie sicher, dass es sich um eine eingebettete Ressource handelt, die wir später zum Aktualisieren mit externen Ressourcen verwenden.

Erstellen der externen Ressourcendatei

Um die externen Ressourcen von den eingebetteten zu trennen, fügen wir die externen Ressourcen in einem Ordner mit einem Namen hinzu, damit wir später problemlos darauf zugreifen können.

Tipp: Wenn Sie einen Ordner im Ordner „Eigenschaften“ hinzufügen, ihn außerhalb erstellen und nach innen verschieben möchten, lässt Visual Studio die Erstellung nicht zu

Machen Sie dasselbe wie für die eingebettete Ressource, gehen Sie dann zu properties der Datei und innerhalb von Advanced, Build action und ändern Sie es in: Content und ändern Sie Copy to Output Dictionary in Copy if newer.

So sollte es aussehen:

Hinzufügen eines Schlüssels zu app.config

Da wir coole Entwickler sind und gerne alles gut gemacht haben und NICHT den Code für jeden Client ändern möchten, fügen wir einen Schlüssel zu „appconfig“ hinzu, der den Namen des Ordners enthält, in dem wir nach den Ressourcendateien suchen

<?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>
```Wenn wir also später nach den Ressourcen suchen, wird in `Properties.John` statt in `Properties.Doe` gesucht.

Dies erleichtert auch Änderungen, wenn die Anwendung bereits bereitgestellt ist, da Sie die app.config einfach ändern können.

## Zugriff auf eingebettete Ressourcendateien

Die Verwendung von .NET Framework ist ziemlich einfach. Um auf die eingebetteten Eigenschaften zuzugreifen, müssen wir lediglich das Objekt `Properties` verwenden, das die Ressourcendateien als Eigenschaft enthält, und in diesem Objekt befinden sich alle Schlüssel/Werte, die wir in der Datei `resx` haben.

```csharp
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();
}

Wenn wir das ausführen, sollte es uns etwa Folgendes zeigen:

Action_greeting value: Hello, Action_cancel value: Cancel

Zugriff auf externe Ressourcendateien

In diesem Teil ist es ziemlich dasselbe, Sie können über das Objekt Properties auf die Ressourcendateien zugreifen.

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

Das Hauptproblem bei dieser Methode besteht darin, dass jeder Schlüssel eine Eigenschaft innerhalb des Objekts ist und wir ihn daher so aufrufen müssen, wie wir es zuvor gesehen haben. Wenn Sie den Schlüssel Action_greeting der Ressourcendatei von John aufrufen möchten, müssen wir Folgendes verwenden: Properties.John und dann Resource.Action_greeting.

Genau da liegt das Problem.

Denn wenn wir eine Anwendung für viele Kunden entwickeln, ist es keine gute Idee, die Art und Weise zu ändern, wie wir die Ressourcendateien für jeden von ihnen aufrufen.

Könnten Sie sich das vorstellen? Kompilieren Sie die Anwendung für jeden Kunden und ändern Sie John in Doe und dann in etwas anderes. Das ist verrückt!

Lösung

Unser Teamleiter hat sich eine ziemlich gute Methode ausgedacht, so etwas wie ein Fallback-System. Wir müssen ein Basismodell von Ressourcen haben und dann für jeden der Kunden eine Ressourcendatei haben, die die Datei mit ihren Ressourcen aktualisiert, und am Ende haben wir eine einzige Liste von Ressourcen.

Wenn der Kunde keine benutzerdefinierten Ressourcen möchte, verwenden wir die Basisressourcen, und wenn er sie möchte, verwenden wir seine.

Um dies in eine Checkliste aufzunehmen, müssen wir Folgendes tun:

[] Finden Sie eine Möglichkeit, alle Schlüssel/Werte einem Wörterbuch für die eingebetteten Ressourcen zuzuordnen.
[] Finden Sie eine Möglichkeit, alle Schlüssel/Werte einem Wörterbuch für die externen Ressourcen zuzuordnen
Mischen Sie beide Dateien und erstellen Sie ein einziges Wörterbuch für jede Sprache
[] Erstellen Sie eine Methode, die auf das Wörterbuch zugreift und den Wert zurückgibt

Diagramm

Lasst uns programmieren

Erstellen wir zunächst eine separate Klasse, in der wir unsere gesamte Logik haben, vom Abrufen der Ressourcendateien über deren Mischung bis hin zur Rückgabe des Werts. Diese Klasse wird CustomResources heißen.

So sieht es aus:

 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)
 {
 ...
 }
 }

Beachten Sie, dass wir Lazy Loading für Eigenschaften implementieren, was zur Steigerung der Leistung beiträgt und dafür sorgt, dass das Wörterbuch einmal geladen wird.

GetDictionaryFromEmbedded: gibt ein Wörterbuch aus eingebetteten Ressourcen zurück.
GetDictionaryFromFile: gibt ein Wörterbuch von externen Ressourcen zurück.
OverwriteDictionary: Mischen Sie zwei Wörterbücher und geben Sie ein einziges zurück.
GetText: gibt einen Wert bei gegebenem Schlüssel zurück

Von der eingebetteten Ressource zum Wörterbuch

Wir müssen alle Eigenschaften aus der XML-Datei abrufen und ein Wörterbuch zurückgeben:

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

Zwei Dinge:- Beachten Sie, dass ein Parameter namens embedded erforderlich ist. Parementers ist der Name der Datei, die Sie im Designer sehen können. In unserem Fall lautet er: resources-demo.Properties.Resource.

Außerdem haben wir einen Parameter namens cultreInfoCode, der der Code für die auszuwählende Sprache ist. Zum Glück erledigt .NET Framework die Arbeit für uns und wir müssen nichts tun. Stellen Sie einfach ein, dass wir entweder Englisch oder Spanisch möchten, und es wählt zwischen resource.es.resx oder resource.resx

Von der externen Ressource zum Wörterbuch

Das Herausfinden aus einer Datei ist etwas kompliziert, aber nicht schwierig. Wir müssen den aktuellen Speicherort der ausführbaren Datei ermitteln, den Speicherort der Ressourcendatei verknüpfen und sie dann in ein Wörterbuch analysieren.

Aber zuerst müssen Sie den Verweis auf System.Windows.Forms hinzufügen, um auf ResXResourceReader zugreifen zu können.

Nun zu unserer GetDictionaryFromFile-Methode:

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

Die Dateiparameter müssen mit dem Speicherort von der ausführbaren Datei zur Ressourcendatei gefüllt werden, in unserem Fall: "\\Properties\\John\\Resource.resx".

Wörterbücher mischen

Wir sind so gut wie fertig. Denken Sie zunächst daran, System.Configuration zu den Referenzen hinzuzufügen, damit Sie auf app.settings zugreifen können.

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

Text aus dem Wörterbuch abrufen

Erstellen Sie eine öffentliche Methode, die eine private Methode aufruft, die eine Sprache auswählt:

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

Beachten Sie, dass Sie den Schalter ändern müssen, wenn Sie weitere Sprachen hinzufügen.

Code zum Eigenschaften-Getter hinzufügen

Da wir jetzt über alle Methoden verfügen, können wir den Getter der öffentlichen Eigenschaft ändern, um die Werte abzurufen.

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

Zuerst erhalten wir den Indentifier aus den app.settings.
Dann erhalten wir die Basisressourcen, die eingebetteten.
Danach erhalten wir die benutzerdefinierten Ressourcen und dafür benötigen wir den Ordnernamen (der die Kennung darstellt).
Dann mischen wir sie und geben den Wert zurück.

All dies wird einmal durchgeführt, daher das Lazy Loading.

Testen

Alles, was mit dem Code zu tun hat, ist fertig, also testen wir es jetzt. Um einen Wert aus dem Wörterbuch zu erhalten, müssen wir die Methode CustomResources.GetText(string key) aufrufen, die den Wert zurückgibt.

Komplette Ressourcendateien werden aktualisiert

Bei diesem Test möchten wir den gesamten Schlüssel/Wert der Ressourcendateien aktualisieren. Wie Sie auf den Bildern sehen können, haben wir dieselben Schlüssel, aber unterschiedliche Werte.

Wir werden John testen und um dies festzulegen, müssen wir die app.config auf <add key="CustomResources.Folder" value="John" /> setzen.

Schauen wir uns nun unsere Basisressourcendatei an (Properties/Resource.es.resx):

Und dann unsere externe Ressourcendatei (Properties/John/Resource.es.resx):

Okay, wenn alles eingestellt ist, führen wir die Konsolenanwendung aus, gehen zum get-Teil der Eigenschaften und überprüfen alles

folderIdentifier hat den Wert des Appsets:

baseResources hat den Wert der Basisressourcen, der eingebetteten:

customResources enthält die Werte der externen Ressourcen im Ordner John:

Und schließlich ist bei _ResourcesSpanish der Wert von den Basisressourcen zu den externen Ressourcen gemischt.

Es wird nur eines aktualisiert

Lassen Sie uns nun dasselbe testen, aber mit einem anderen Szenario. Aktualisieren Sie einfach einen Schlüssel und lassen Sie den anderen gleich.

Wie Sie sehen können, haben die Dateien die gleiche Wertbedeutung für Action_greeting, aber einen anderen Wert für Action_cancel, sodass nur Action_cancel aktualisiert werden sollte.

Die Ressourcendatei fehlt

Wenn Sie die externe Ressourcendatei nicht bereitstellen, spielt das überhaupt keine Rolle, denn da wir eine Datei erwarten, wird bei einem Fehlschlag ein leeres Wörterbuch zurückgegeben, und beim Mischen beider Wörterbücher wird am Ende das Basiswörterbuch angezeigt.

Fehlendes Paar in eingebetteter Ressource

Wenn Sie ein Paar in der externen Ressourcendatei haben, wird es standardmäßig nicht zum endgültigen Wörterbuch hinzugefügt. Sie können dies ändern, indem Sie beim Mischen beider Wörterbücher die Methode OverwriteDictionary() aufrufen und den Parameter addIfDoesntExist auf true setzen.

Verschiedene Sprachen

Wie Sie sehen, haben wir keine Sprache angegeben, da dies alles von der Funktion GetText(string key) erledigt wird, die GetText(string key, string language) aufruft, und der Parameter language von TwoLetterISOLanguageName gefüllt wird, was die aktuelle Sprache unseres Threads zurückgibt.

In meinem Fall habe ich Spanisch als Standardsprache und deshalb wird es immer auf Spanisch angezeigt, wir können aber auch versuchen, Englisch zu verwenden.

Lassen Sie uns ein wenig programmieren und etwas erstellen, um sowohl Spanisch als auch Englisch zu überprüfen.

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

Wenn Sie dies ausführen, sollte die Ausgabe etwa so aussehen:

[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

Die ersten beiden Werte stammen aus resources.resx, die auf Englisch sind, und die letzten beiden sind auf Spanisch und die Werte werden aus resources.es.resx abgerufen.

Das ist es

In diesem Tutorial haben wir eine Möglichkeit gefunden, sowohl eingebettete als auch externe Ressourcen für Sprachen zu mischen. Dies war eine Lösung für ein Problem, das wir im Team hatten, und es läuft seitdem ohne Probleme.

Sie können den Quellcode hier überprüfen.

Wenn Sie Fragen haben, twittern Sie mich gerne unter @emimontesdeocaa und ich melde mich bei Ihnen, wenn ich Zeit habe.

Integrationstest mit Bot Framework und DirectLine für Flow-Fälle

Wed, 25 Apr 2018 00:00:00 +0000

Einführung

In den vorherigen Blogbeiträgen haben wir einige Integrationstests für einzelne Fälle durchgeführt. „Einzelfälle“ sind die Fälle, in denen der Bot, nachdem er etwas gefragt hat, nur einmal antwortet und wir dann die Ergebnisse vergleichen.

Diese Anleitung erklärt nicht, wie die Authentifizierung und API-Aufrufe durchgeführt werden. Wenn Sie sie sich ansehen möchten, schauen Sie sich bitte die Einzelfallanleitung an.

Was ist mit Flow-Gesprächen?

Mit der derzeitigen Methode haben wir keinen fließenden Gesprächsfluss, wenn Sie beispielsweise um Hilfe bitten möchten und dann ein Menü mit verschiedenen Optionen angezeigt wird und nach Auswahl einer davon ein weiteres Menü angezeigt wird. Dies würde etwa 2 oder mehr responses ergeben. Das bedeutet also, dass die Verwendung der Integrationstestlösung, die wir zuvor verwendet haben, nicht funktionieren wird.

Hier ist ein Diagramm, wie der Integrationstest für Einzelfälle funktioniert.

Und hier ist ein Diagramm, wie wir die aktuelle Integrationstestlösung an Flow-Fälle anpassen werden.

Die folgende Erklärung deckt nicht alle grundlegenden Informationen zur Funktionsweise des Bot Frameworks ab. Wenn Sie es nicht verstehen, schauen Sie sich bitte die offizielle Dokumentation an.

Beispielfall

Für die folgende Anleitung verwende ich einen Bot mit einer von mir erstellten Flow-Konversation, die um Hilfe bittet und dann verschiedene Optionen auswählt.

Neue JSON-Struktur

Da wir nun mehr als einen request haben, wenn wir mit dem Bot sprechen, müssen wir unsere JSON-Struktur ändern, um alle request hinzuzufügen, die wir tun werden.

{
 "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"
 }
 ]
}

Wie Sie sehen, gibt es eine wichtige Änderung: request ist jetzt requests. Das bedeutet, dass wir jetzt ein List<Activity> anstelle eines einzelnen activity haben.

Neue Objekte

Zuvor hatten wir unsere Objekte für einzelne Fälle festgelegt: TestEntry und TestEntryCollection. Für Flow-Fälle erstellen wir neue Objekte: TestEntryFlow und TestEntryFlowCollection.

`TestEntryFlow`

Dieses Objekt gilt für jeden Eintrag, den wir in der Sammlung haben. Achten Sie darauf, dass das Requests-Objekt jetzt ein List<Activity> ist und nicht wie zuvor erwähnt ein einzelnes Activity.

Da wir den Bot mehrmals fragen, benötigen wir mehrere activities, die an die Konversation gesendet werden.

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`

Dieses Objekt enthält die relevanten Informationen für DirectLine wie den secret und die Endpunkte sowie die Liste der Entries, die wir testen werden.

Beachten Sie, dass es sich bei Entries nun um eine Liste von TestEntryFlow und nicht um TestEntry handelt.

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

Erstellen des `TestMethod` für Flow-Fälle

Neuer Ablauf

Schauen Sie sich zunächst noch einmal das Diagramm an (es ist dasselbe, das ich oben gepostet habe).

Wie Sie sehen können, ist die Ablaufstruktur zur Durchführung des Tests im Großen und Ganzen dieselbe:

Informieren Sie sich
Authentifizieren
Erstellen Sie ein GesprächUnd hier ändert sich, was sich ändert, jetzt müssen wir alle Anfragen mehrmals an die Konversation senden. Dazu müssen wir für jede Anfrage eine Schleife durchlaufen, sie an den Bot senden und dann die letzte Antwort mit unserer erwarteten Antwort vergleichen.
Senden Sie alle Anfragen
Erhalten Sie alle Nachrichten
Erhalten Sie die neueste Antwort
Vergleichen Sie mit der erwarteten Antwort
Ergebnis bestätigen

Code

Zunächst müssen wir die Informationen aus der Akte entnehmen, das ist das Gleiche, was wir zuvor bei den Einzelfällen gemacht haben.

// Load entries from file
var path = System.IO.File.ReadAllText(@"C:\dataFlow.json");

// Deserialize to object
var data = JsonConvert.DeserializeObject<TestEntryFlowCollection>(path);

Jetzt müssen wir für jedes TestEntryFlow des data.entries eine Schleife ausführen, damit wir dem gleichen Ablauf folgen können, den wir in den einzelnen Fällen bis zum neuen Teil gemacht haben, wo wir den requests einschleifen.

/// 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";

Der folgende Schritt ist ziemlich einfach: Wir müssen die entry.requests einschleifen und alle activity an die Konversation senden.

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

Wir verwenden den watermark, um die neueste Nachricht abzurufen. Der watermark ist ein Wert, den die DirectLine-API zurückgibt, wenn sie nach den Konversationsinformationen fragt.

Danach müssen wir nur noch den globals mit unserem latestReponse und expectedResponse füllen.

/// Arrange with new values
var globals = new Objects.Globals { Request = entry.Response, Response = latestResponse };

Und um den Fall abzuschließen, werten wir die assert-Zeichenfolge im entry aus.

/// Assert
Assert.IsTrue(await CSharpScript.EvaluateAsync<bool>(entry.Assert, globals: globals));

Endgültiger 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;
}

Verbesserungen

Ich glaube zwar, dass ein besserer Ablauf möglich sein könnte, aber diese Verbesserung bedeutet, dass auch die JSON-Struktur geändert werden sollte. Um dies zu ermöglichen, muss der JSON außerdem besser gefüllt werden.

Um diese Tests zu verbessern, sollten wir für jedes request ein response haben und jedes Mal, wenn wir eine Nachricht senden, eine Bestätigung vornehmen. Im Moment machen wir das so, dass wir alle requests und die endgültigen response speichern.

Ich habe ein Diagramm erstellt, um zu zeigen, wie das aussehen würde.

Ich bin der festen Überzeugung, dass dieser Weg insgesamt viel besser für die Integrität des Tests ist, da Sie so ziemlich jedes Verhalten im Fluss testen, anstatt nur die endgültige Antwort zu testen.

Nun, das ist alles für diesen Leitfaden. Bitte denken Sie daran, dass dieser Leitfaden eine Fortsetzung des Einzelfall-Leitfadens sein soll. Wenn Sie sich verloren fühlen, schauen Sie sich den Leitfaden an, der länger ist und mehr Erklärungen für alles enthält.

Denken Sie daran, dass der gesamte Code in meinem Github in diesem-Repository gespeichert ist.

Haben Sie einen guten Tag!

Integrationstest mit Bot Framework und DirectLine (1)

Tue, 24 Apr 2018 00:00:00 +0000

Da ich für kurze Zeit in einem Unternehmen gearbeitet habe, wurde ich mit der Arbeit am Integrationstest für das Bot Framework beauftragt.

Meine Arbeit in der Gruppe besteht darin, den Bot so stabil wie möglich zu machen, aber zuerst: Was ist Bot Framework?

Erstellen, verbinden, bereitstellen und verwalten Sie intelligente Bots, um auf natürliche Weise mit Ihren Benutzern auf einer Website, einer App, Cortana, Microsoft Teams, Skype, Slack, Facebook Messenger und mehr zu interagieren. Beginnen Sie schnell mit einer vollständigen Bot-Building-Umgebung und zahlen Sie nur für das, was Sie nutzen.

Weitere Informationen zum Bot Framework finden Sie hier (https://dev.botframework.com/).

Die folgende Erklärung deckt nicht alle grundlegenden Informationen zur Funktionsweise des Bot Frameworks ab. Wenn Sie es nicht verstehen, schauen Sie sich bitte die offizielle Dokumentation an.

Warum brauche ich einen Integrationstest?

Integrationstests sind erforderlich, da jedes Mal, wenn einer meiner Kollegen einen Fix, eine neue Funktion oder sogar einen neuen Fehler veröffentlicht, diese Tests ausgeführt werden, bevor der Code in die Produktion übertragen wird. Wenn einer der Tests fehlschlägt, geht der Code nicht in die Produktion, was bedeutet, dass der Endbenutzer den Fehler nicht hat.

Integrationstest in Bots?

Ich glaube, dass bei Bots der Integrationstest ziemlich wichtig ist. Sie können keinen Bot haben, bei dem einige Menüs nicht funktionieren oder einige Funktionen nichts zurückgeben.

Unternehmen setzen Bots für ihre Kunden ein, weil sie nicht wollen, dass die Leute mit ihren Problemen beschäftigt sind. Wenn ein Bot einem Benutzer helfen kann, können die anderen Mitarbeiter ihre Zeit für etwas Wichtigeres nutzen.

Übersicht über die Lösung.

Damit dies funktioniert, habe ich ein Testprojekt in Visual Studio verwendet, das WebClient für den API-Rest und eine JSON-Datei verwendet, in der wir unsere Fälle speichern.

JSON-Datei

{
 "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"
 }
 ]
}

Wie Sie sehen können, haben wir:

Directline-Geheimnis -> Geheimnis des veröffentlichten Bots – Directline-Token-Generierungsendpunkt -> Endpunkt, um das Token mithilfe des Geheimnisses abzurufen
Directline-Konversationsendpunkt -> Endpunkt, um mit der Konversation zu spielen
Eintrag -> der Testfall
- Anfrage -> was wir an das Gespräch senden
- Antwort -> was wir erwarten
- Behaupten -> was vergleichen wir

Deserialisierung

Wir haben die JSON-Datei perfekt formatiert, jetzt müssen wir sie in die Lösung laden, also werden wir JSON.NET und einige Klassen verwenden. Zuerst haben wir die Eintragssammlung, die alles enthält, und dann haben wir für jede Sammlung eine Liste von Einträgen.

 /// <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; }
 }

Und das ist das Objekt, das den Namen, die Anfrage, die Antwort und die Behauptung für den Testfall hat.


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

Parsen von JSON zum Objekt im Testfall

Da wir die Klassen für das Parsing-Objekt haben, ist es recht einfach, da wir es als Objekt lesen müssen.

// Load entries from file
var path = System.IO.File.ReadAllText(@"C:\data.json");

// Deserialize to object
var data = JsonConvert.DeserializeObject<TestEntriesCollection>(path);

Mit dieser Sammlung können wir nun eine Schleife durchlaufen und die Informationen beispielsweise mithilfe eines foreach abrufen.

 foreach (TestEntry entry in data.Entries)
 {
 ....
 }

Und das ist alles für diesen Teil, der nächste Teil wird die Autorisierung für DirectLine beinhalten. Denken Sie daran, dass der gesamte Code in meinem Github in diesem-Repository gespeichert ist.

Integrationstest mit Bot Framework und DirectLine (2)

Tue, 24 Apr 2018 00:00:00 +0000

In diesem Teil nehmen wir die DirectLine-Autorisierung vor und rufen die Werte aus der Antwort des Bots ab.

Nachdem wir nun die Deserialisierung durchgeführt haben, ist es an der Zeit, die Informationen aus der Sammlung und den Gesamtheiten abzurufen, die wir verwenden werden, um die Autorisierung zu erhalten, die API-Aufrufe durchzuführen und das Ergebnis zu bestätigen.

Die folgende Erklärung deckt nicht alle grundlegenden Informationen zur Funktionsweise des Bot Frameworks ab. Wenn Sie es nicht verstehen, schauen Sie sich bitte die offizielle Dokumentation an.

API-Aufrufe mit WebClient durchführen

Um uns das Aufrufen der API zu erleichtern, habe ich eine Klasse utils erstellt, in der wir die Funktionen speichern, die wir einige Male verwenden werden. Diese Klasse enthält uploadString für POST und downloadString für 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-Autorisierung

Wenn Sie die offizielle Dokumentation lesen, erfahren Sie, wie es geht, und es ist ganz einfach, mit unseren Funktionen ist es sogar noch einfacher. Denken Sie zunächst daran, dass wir uns innerhalb der foreach-Anweisung befinden, da wir die Authentifizierung für jeden Fall durchführen, für den Fall, dass uns die Zeit ausgeht, was bedeutet, dass der Test fehlschlägt.

/// 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;

Jetzt haben wir das Token, das für alle folgenden Aufrufe an den Konversationsendpunkt verwendet wird.

Ein Gespräch erstellen.

Um mit dem Bot zu kommunizieren, müssen wir zunächst eine Konversation erstellen. Diese Konversation gibt ein neues Token zurück, das die Konversations-ID enthält.

/// 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;

Außerdem speichern wir newToken und conversationId. Beide werden benötigt, damit der Benutzer Nachrichten an den Bot senden kann.

Aktivität an Konversation senden

Jetzt können wir mit dem conversationId und dem conversationEndpoint den endgültigen Endpunkt erstellen, um einen Activity zu senden, der der request aus der JSON-Datei ist.

/// 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));

Aktuelle Nachricht abrufen

Nachdem wir die Aktivität gesendet haben, sollte der Bot im Nachrichtenverlauf bereits geantwortet haben. Daher müssen wir alle Nachrichten mit dem Wasserzeichen abrufen und dann mithilfe dieses Wasserzeichens die neueste Nachricht/Aktivität filtern.

/// 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)];

Und das ist alles für diesen Teil. Der nächste Teil wird den Teil enthalten, in dem wir den Text aus dem assert im JSON abrufen, ihn in Code konvertieren, wie mit eval() in Javascript, aber in C#, und dann den Assert.isTrue() verwenden, um das endgültige Testergebnis zu erhalten.

Denken Sie daran, dass der gesamte Code in meinem Github in diesem-Repository gespeichert ist.

Integrationstest mit Bot Framework und DirectLine (3)

Tue, 24 Apr 2018 00:00:00 +0000

Dies ist der neueste Teil des Leitfadens. In diesem Teil werden wir den Text aus der Behauptung im JSON auswerten.

Nachdem wir nun den request verwendet und als activity an den Bot gesendet haben, haben wir den response erhalten und müssen den assert im JSON (die Antwort, die wir im JSON gespeichert haben, dies ist die erwartete Antwort) mit der Antwort vergleichen, die wir vom Bot erhalten haben.

Die folgende Erklärung deckt nicht alle grundlegenden Informationen zur Funktionsweise des Bot Frameworks ab. Wenn Sie es nicht verstehen, schauen Sie sich bitte die offizielle Dokumentation an.

Hinzufügen von Microsoft.CodeAnalysis zur Lösung

Zunächst müssen wir CodeAnalysis als NuGet-Paket einbinden.

Denken Sie nach der Installation daran, das Paket zur Datei .cs hinzuzufügen.

using Microsoft.CodeAnalysis.CSharp.Scripting;

Erstellen eines `Globals`-Objekts

Zur Auswertung müssen wir die Parameter an den Auswerter übergeben. Dieser Evaluator benötigt eine Konfigurationsdatei.

 /// <summary>
/// Object to pass parameters to Roslyn compiler
/// </summary>
public class Globals
{
 /// <summary>
 /// ExpectedResponse
 /// </summary>
 public Activity Request;
 /// <summary>
 /// ReceivedResponse
 /// </summary>
 public Activity Response;
}

Dieser Teil ist sehr wichtig. In dieser Konfigurationsdatei werden wir angeben, welche Objekte wir vergleichen werden. Daher müssen wir ihm die erwartete Antwort und die erhaltene Antwort übergeben.

Mit diesen Informationen wird das assert in der JSON-Datei verwendet und ausgewertet, was gesagt wird.

/// 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));

Das EvaluateAsync<T> wertet T aus und gibt es zurück. In unserem Fall übergeben wir das auszuwertende string und das globals, das die Daten enthält, in denen es ausgewertet wird.

Ich werde versuchen, dies anhand eines Beispiels zu erklären, indem ich einen Eintrag verwende (der einen Namen, eine Anfrage, eine Antwort und eine Behauptung enthält).

{
 "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"
 }

Lassen Sie uns die wichtigen Dinge aus diesem Eintrag herausholen, zuerst die Behauptung "assert": "Request.Text == Response.Text", das bedeutet, dass sie den Request.Text mit dem Response.Text vergleicht und den Wert als booleschen Wert zurückgibt.

Aber wenn wir die Funktion await CSharpScript.EvaluateAsync<bool>(entry.Assert, globals: globals) aufrufen, übergeben wir zwei Parameter:

string auszuwertende Zeichenfolge -> "Request.Text == Response.Text"
globals Daten für den Bewerter -> in diesem Fall müssen wir einen Request und einen Response angeben, die Anfrage ist unsere erwartete Antwort und die Antwort ist die erhaltene Antwort.

Während wir die Daten in den Evaluator füllen, können wir jetzt die Zeichenfolge verwenden und auswerten, sodass true oder false zurückgegeben wird.

Fertig

Wir sind fertig, hier sehen Sie das fertige 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;
}

Diagramm

Hier ist ein Diagramm des gesamten Ablaufs, dem wir gefolgt sind, um an diesen Punkt zu gelangen. Wenn Sie etwas nicht verstanden haben, wird es hoffentlich geklärt.

Und das ist alles, dies wird für einzelne Fälle durchgeführt, bei denen der Fall 1-zu-1 ist, der Benutzer einen activity sendet und der Bot einen weiteren einzelnen activity zurückgibt.

Ich hoffe, es hat Ihnen gefallen. Als nächstes werden die Testablauffälle mit mehr als einer Antwort behandelt.

Denken Sie daran, dass der gesamte Code in meinem Github in diesem-Repository gespeichert ist.

Über mich

Mon, 01 Jan 0001 00:00:00 +0000

Über mich

Ich bin Emiliano Montesdeoca, ein uruguayisch-spanischer Softwareentwickler, Microsoft MVP in Developer Technologies, und stolzer Vater mit Wohnsitz in Teneriffa, Kanarische Inseln.

Ich liebe es, komplexe technische Herausforderungen zu meistern und skalierbare Cloud-Lösungen mit Microsoft-Technologien zu entwickeln. Mein tägliches Werkzeugset dreht sich um .NET, Azure, KI mit Semantic Kernel und moderne Architekturen wie .NET Aspire.

Was ich tue

Als Cloud Solutions Team Lead bei Intelequia Technologies leite ich den Entwurf und die Bereitstellung von Cloud-nativen Anwendungen — und verbinde strategische Vision mit praktischer Umsetzung. Ich gedeihe an der Schnittstelle von Architektur und Code und stelle sicher, dass unser Team Lösungen liefert, die sowohl elegant als auch produktionsbereit sind.

Community

Ich bin ein häufiger internationaler Redner und wurde als Sessionize Most Active Speaker in 2023, 2024 und 2025 ausgezeichnet. Ich teile praxisnahe Einblicke durch Vorträge auf Konferenzen weltweit und über meine Blogs.

Ich bin auch der Ersteller von The .NET Blog — einer Ressource für die .NET-Community — und schreibe regelmäßig in diesem Blog über das, was ich lerne und entwickle.

Mentoring und der Aufbau von Communities sind ein wesentlicher Teil meiner Person. Der Ökosystem, das meine Karriere geprägt hat, etwas zurückzugeben, nehme ich sehr ernst.

Lass uns in Kontakt treten

Ich bin immer offen für Vorträge bei Veranstaltungen, die Zusammenarbeit bei Projekten oder Gespräche über Cloud-Architektur und KI. Melde dich gerne!

Email: emimontesdeoca@outlook.es
GitHub: @emimontesdeoca
X / Twitter: @emimontesdeocaa
LinkedIn: emimontesdeoca
Instagram: @emimontesdeoca
Sessionize: emimontesdeoca

Vorträge

Mon, 01 Jan 0001 00:00:00 +0000

Ich bin ein häufiger Redner auf internationalen Technologiekonferenzen, mit Schwerpunkt auf .NET, Azure, KI und Cloud-native Entwicklung. Ich wurde als Sessionize Most Active Speaker in 2023, 2024 und 2025 geehrt und besitze die Microsoft MVP-Zertifizierung in Developer Technologies.

Wenn Sie möchten, dass ich auf Ihrer Veranstaltung spreche, sprechen wir darüber!

2026

Blazor in 2026

Ein Blick auf den aktuellen Stand von Blazor in 2026 und wie es sich gemeinsam mit .NET 10 entwickelt hat. Wir überprüfen die neuesten Änderungen und Verbesserungen, ihre Auswirkungen auf die reale Anwendungsentwicklung und welches Blazor-Hosting-Modell am besten zu jedem Szenario passt.

Level-3-Support mit KI auf Hochtouren bringen: Azure Functions + OpenAI in Aktion

Wie Azure Functions, Azure Monitor-Warnungen und Azure OpenAI zusammenarbeiten, um den Level-3-Support zu beschleunigen. Von automatischem Alert-Triage bis zur intelligenten Log-Analyse — ein praktischer Blick auf das Hinzufügen von KI zu realen Support-Workflows.

Vom Dashboard zum Agenten: der nächste Schritt der Observability

Eine praktische Session, die die Welt der KI-Agenten und der Produktions-Observability verbindet. Von Semantic Kernel zu autonomen Agenten, die OpenTelemetry-Daten abfragen, mit Grafana über MCP interagieren und dabei helfen, echte Systeme zu betreiben und zu optimieren.

Bevorstehend: Global Azure 2026 — April 2026, Madrid, Spanien

2025

Microsofts Agent Framework zur Rettung von Weihnachten

Aufbau und Koordination mehrerer KI-Agenten mit dem Microsoft Agent Framework, um die perfekten Weihnachtsgeschenke zu finden. Jeder Agent spezialisiert sich — von der Geschenkideengenerierung bis zum Preisvergleich — und arbeitet zusammen für intelligenteres Weihnachtseinkaufen.

Level-3-Support mit KI optimieren: Azure Functions + Semantic Kernel in Aktion

Azure Functions, Azure Monitor und Semantic Kernel arbeiten zusammen, um den Level-3-Support schneller und effizienter zu machen — von der automatischen Alarmerkennung bis zur intelligenten Log-Analyse.

Was ist neu in Blazor mit .NET 10?

Erkundung der wichtigsten neuen Funktionen in Blazor für .NET 10, einschließlich Leistungsverbesserungen, Formulare, persistenter Zustand und leistungsfähigere JavaScript-Interoperabilität.

Hybride KI mit C#, Semantic Kernel und Gemini: Intelligentere Enterprise-Apps erstellen

Orchestrierung hybrider KI-Workflows in C# — lokale Modelle (Phi-3) mit Gemini Pro/Ultra via Vertex AI kombinieren, kognitive Agenten mit Semantic Kernel-Plugins erstellen und adaptive Architekturen entwerfen.

.NET Aspire: Cloud-Native Apps ohne Kopfschmerzen entwickeln

Eine praktische Session zum Erstellen cloud-first Microservices, die von Grund auf skalierbar, resilient und beobachtbar sind. Erkundung, wie .NET Aspire 70% des Cloud-Boilerplates eliminiert.

.NET Aspire: Cloud-Native ohne das Chaos

Reale Beispiele für das Design von Anwendungen, die von Natur aus skalierbar sind — mit Observability und automatischer Resilience schon beim ersten Commit.

2024

KI trifft SQL: Eine intelligente Pizzeria mit .NET und Semantic Kernel bauen

Natürlichsprachliche KI-Interaktionen, die Ihren Code und Ihre Daten verstehen — eine intelligente Pizzeria mit .NET und Semantic Kernel erstellen.

.NET Aspire: Cloud-Native Anwendungen ohne Komplikationen

Cloud-first Microservices ohne Kopfschmerzen entwickeln — eine praktische, demo-getriebene Session, die zeigt, wie .NET Aspire die Cloud-native Entwicklung vereinfacht.

Power Platform: Die Reise von Low-code zu Pro-code Technologien

Übergang von Low-code Power Apps zu erweiterten Pro-code Komponenten mit TypeScript, alles innerhalb derselben Plattform.

Intelligente Automatisierung: Ihre Enterprise-Anwendungen mit integrierter KI transformieren

.NET-Anwendungen auf das nächste Level heben — traditionelle Logik mit KI-basiertem Denken über Semantic Kernel und .NET Aspire kombinieren.

Von Low-Code zu Pro-Code: Ansätze für KI-Entwicklung in Enterprise-Lösungen

Verschiedene Ansätze für Enterprise-Lösungen erkunden — von Power Platform mit KI bis zur traditionellen Entwicklung mit Semantic Kernel.

Reisekostenmanagement mit Azure steuern

Verwendung von Azure AI Vision, Document Intelligence und OpenAI mit Semantic Kernel zur Automatisierung des Reisekostenmanagements.

Auszeichnungen & Anerkennungen

🏆 Sessionize Most Active Speaker 2025
🏆 Sessionize Most Active Speaker 2024
🏆 Sessionize Most Active Speaker 2023
🏅 Microsoft MVP in Developer Technologies

Alle Sessions auf Sessionize ansehen →

Emiliano Montesdeoca

Blazor von Grund auf: Kapitel 3 — Komponenten, die skalieren

Was eine Blazor-Komponente wirklich ist

Schritt 1: Mit einer fokussierten Komponente starten

Schritt 2: Verhalten über Parameter explizit machen

Schritt 3: RenderFragment für Komposition nutzen

Schritt 4: Komposition statt riesiger Seiten

Schritt 5: Markup und Logik im Gleichgewicht halten

Schritt 6: Eine pragmatische Ordnerstruktur

Häufige Fehler am Anfang

Ausblick

Blazor von Grund auf: Kapitel 2 — Deine erste Blazor-App

Schritt 1: Projekt erstellen

Schritt 2: Lokal starten

Schritt 3: Projektstruktur verstehen

Schritt 4: Erste Änderung

Schritt 5: Program.cs einmal lesen

Häufige Probleme

Als Nächstes

Blazor von Grund auf: Kapitel 1 — Was ist Blazor?

Ein kurzer historischer Überblick

Was Blazor wirklich ist

Die Rendering-Modelle

Statisches SSR

Interaktiver Server

Interaktives WebAssembly

Auto-Modus

Modi in derselben App mischen

Wie Blazor sich mit JavaScript-Frameworks vergleicht

Was du brauchst, um mitzumachen

Was als nächstes kommt

Blazor von Grund auf: Eine neue Serie

Für wen ist diese Serie

Was wir abdecken werden

Warum eine Serie, warum jetzt

Wie du der Serie folgen kannst

C#-Union-Typen: Endlich gibt es diskriminierte Unions

Was sind diskriminierte Gewerkschaften?

Wie wir heute Gewerkschaften simulieren

Abstrakte Datensätze mit Vererbung

Manuelle Enum + Datenmuster

Der C#-Vorschlag: Das Schlüsselwort union.

Nur-Wert-Mitglieder

Generische Gewerkschaften

Gewerkschaften mit Methoden

Verschachtelter Mustervergleich

Schutzklauseln

Praxisbeispiele

Das Ergebnismuster: Ausnahmen für erwartete Fehler ersetzen

Domain-Modellierung: Zahlungsarten

Zustandsmaschinen

Überlegungen zur Serialisierung und InteropEine der praktischen Fragen, die sich bei Union-Typen sofort stellt, ist: Wie serialisiert man sie? Wenn Sie APIs erstellen oder Daten speichern, benötigen Sie die JSON-Serialisierung, um ordnungsgemäß zu funktionieren.

So probieren Sie es aus

Vergleich mit bestehenden Ansätzen

Was dies für das .NET-Ökosystem bedeutet

Fazit

Aufbau eines RAG-Systems in C# mit Semantic Kernel

Einführung

So funktioniert RAG

Voraussetzungen

Einrichten des Kernels

Definieren des Datenmodells

Dokumente aufteilen

Dokumente werden aufgenommen

Suche nach relevanten Chunks

Antworten mit Kontext generieren

Benutze es

Übergang zur Produktion

Erstellen Sie Agent-Workflows mit Microsoft Agent Framework

Einführung

Was sind Agenten-Workflows?

Voraussetzungen

Aufbau eines sequentiellen Workflows

Definieren der Agenten

Nacheinander ausführen

Parallele Ausführung

Bedingte Verzweigung

Plugins zu Workflow-Agenten hinzufügen

Fehlerbehandlung in Workflows

Best Practices

Schritt 3: `RenderFragment` für Komposition nutzen

Der C#-Vorschlag: Das Schlüsselwort `union`.