.NET 10, Blazor, EF Core, Azure SQL und Azure App Service. Jede Demo hier ist echt, läuft live auf dem Server oder in Ihrem Browser – und verlinkt ihren Quelltext.
Blazor kann Komponenten statisch auf dem Server rendern, interaktiv über SignalR betreiben oder komplett im Browser per WebAssembly ausführen. Hier laufen alle drei Varianten nebeneinander auf derselben Seite.
HTML wird pro Anfrage auf dem Server erzeugt – schnell, suchmaschinenfreundlich und ganz ohne dauerhafte Verbindung.
Static
Jeder Klick schickt ein Formular. Blazor lädt die Antwort per fetch und tauscht nur
die geänderten DOM-Teile aus – die Seite springt nicht und die anderen Demos laufen weiter.
Die Komponente läuft auf dem Server. Der Browser bekommt nur die DOM-Änderungen über eine WebSocket-Verbindung.
StaticKlick und Uhrzeit laufen über den Server: Event hin, neu rendern, nur der Unterschied zurück. Ideal für Business-Anwendungen mit direktem Zugriff auf Datenbank und Dienste.
Die Komponente wird vorgerendert und dann von der .NET-Runtime in Ihrem Browser übernommen.
Static
Jeder Klick wird lokal im Browser verarbeitet – kein Netzwerk, keine Server-Last.
[PersistentState] überträgt den Zeitpunkt des Prerenderings vom Server in den Browser.
Mein Hintergrund in der Automatisierung, umgesetzt mit .NET: Jeder Besucher bekommt eine eigene Soft-SPS, die eine Tankanlage steuert. Der Funktionsbaustein ist Zeile für Zeile aus SCL übertragen, das Bedienbild orientiert sich an WinCC.
Der Trend startet, sobald die CPU läuft.
| Zeit | Füllstand | Pumpe P1 | Ventil V1 |
|---|
| Adresse | Symbol | Kommentar | Wert |
|---|---|---|---|
%I0.0 |
"Start" |
Taster Start (Schließer) | 0 |
%I0.1 |
"Stop" |
Taster Stop (Öffner) | 1 |
%I0.2 |
"NotHalt_OK" |
NOT-HALT-Kreis geschlossen | 1 |
%I0.3 |
"Quittieren" |
Taster Quittieren | 0 |
%I0.4 |
"Auto" |
Wahlschalter AUTO/HAND | 1 |
%I0.5 |
"Hand_P1" |
Handbefehl Pumpe P1 | 0 |
%I0.6 |
"Hand_V1" |
Handbefehl Ventil V1 | 0 |
%I1.0 |
"LSHH_T1" |
Überfüllsicherung T1 | 0 |
%I1.1 |
"MS_P1_OK" |
Motorschutz P1 (Öffner) | 1 |
%IW64 |
"LT101_Roh" |
Füllstand analog (0 … 27648) | 11.609 |
| Adresse | Symbol | Kommentar | Wert |
|---|---|---|---|
%Q0.0 |
"P1_Schuetz" |
Schütz Pumpe P1 | 0 |
%Q0.1 |
"V1_Ventil" |
Magnetventil V1 | 0 |
%Q0.2 |
"Hupe" |
Hupe | 0 |
%Q0.3 |
"LM_Stoerung" |
Leuchtmelder Störung | 0 |
%Q0.4 |
"LM_Anlage_Ein" |
Leuchtmelder Anlage EIN | 0 |
%MD10 |
"Fuellstand" |
Füllstand skaliert [%] (Real) | 41,99 |
Der Füllstand kommt wie bei einer echten Analogbaugruppe als Rohwert 0 … 27648 an und wird im FB mit NORM_X/SCALE_X auf Prozent skaliert.
Jede geöffnete Seite hält eine Blazor-Verbindung zum Server. Ein CircuitHandler zählt sie, Module melden Ereignisse über den Event-Bus – und alle Besucher sehen Änderungen sofort, ganz ohne Polling.
Schicken Sie allen Besuchern ein Emoji
Das Emoji fliegt bei allen geöffneten Seiten aus dem Live-Zähler oben rechts.
Das Gästebuch speichert Einträge mit EF Core im eigenen Schema [guestbook]. Der SQL-Inspector zeigt das tatsächlich erzeugte SQL samt Parametern und Laufzeit. Darunter: die Besucherstatistik, aggregiert im Schema [analytics].
Validiert mit DataAnnotations, gespeichert mit EF Core.
Live aus der Datenbank
-- Die Abfrage wird ausgeführt, sobald die Komponente interaktiv ist.
Letzte 14 Tage · live aus Azure SQL (Schema analytics)
Was Sie hier sehen, ist nicht von Hand gepflegt: Module, Datenbankschemas, Migrationen, Events und Endpunkte werden zur Laufzeit aus der Anwendung ausgelesen.
KenoKoch.Modules.Profile · v1.0.0Lebenslauf, Skills und Kontaktdaten – als Datenquelle für die Seite und als JSON-API.
/api/profileGET/api/profile/skillsBuildingBlocksUIKenoKoch.Modules.Guestbook · v1.0.0Einträge von Besuchern: Validierung, Spam-Schutz und Persistenz mit EF Core im eigenen Schema.
/api/guestbookBuildingBlocksModules.Guestbook.ContractsUIKenoKoch.Modules.Analytics · v1.0.0Live-Besucherzähler über Blazor-Circuits, datensparsame Tagesstatistik ohne Cookies und ein Echtzeit-Aktivitätsfeed.
/api/statsBuildingBlocksModules.Guestbook.ContractsModules.Plc.ContractsUIKenoKoch.Modules.Plc · v1.0.0Soft-SPS mit zyklischem Scan (100 ms), Funktionsbaustein nach SCL-Vorbild in C# und HMI mit Meldesystem.
/api/plc/programGET/api/plc/statusBuildingBlocksModules.Plc.ContractsUI*.Contracts.BuildingBlocks ab.BuildingBlocks und UI kennen kein einziges Modul.Die Mandelbrot-Menge wird von .NET in WebAssembly berechnet – Pixel für Pixel in C#, gezeichnet über JavaScript-Interop auf ein Canvas. Der Server ist daran nicht beteiligt: Schauen Sie gern in den Netzwerk-Tab.
Jedes Modul bringt eigene Minimal-API-Endpunkte mit. Die OpenAPI-Beschreibung entsteht automatisch, die Abfragen unten schickt eine WebAssembly-Komponente per HttpClient direkt aus Ihrem Browser.
Diese Werte liest der Server gerade über sich selbst aus: Azure-Region und Instanz, .NET-Version, Speicher, Garbage Collector und die Latenz zur Azure-SQL-Datenbank, mit der er sich passwortlos per Managed Identity verbindet.
547967cbWird geladen …
a7e0f7b/health/ready