Blazor WASM: Web Frontend mit C#

Schauen wir uns zum Anfang des Kapitels doch einmal genauer an, was wir untersuchen werden.

Schaue dir in diesem Video an, wie die fertige Applikation aussehen wird, die wir gemeinsam erstellen.

Lerne in diesem Video wie du die Asp Net Core Logger aus Microsoft.Extensions.Logging in Blazor einsetzen kannst und wo diese Nachrichten im Browser zu finden sind.

Schauen wir uns in diesem Video die Struktur unsere Frontend Applikation mit Blazor und die erste eigene Komponente an.

In diesem Video lernen wir etwas über den Aufruf von Komponenten durch das Framework, sowie die Gründe warum wir Komponenten anlegen wollen/sollten.

Lerne alles über Lifecycle Hooks und wann sie im Lifecycle einer Komponente von dem Framework aufgerufen und ausgeführt werden.

Lerne wie C# Code in Blazor Komponenten mit den HTML Teil über Bindings un Events interagiert.

In diesem Video schauen wir uns kurz an, wie man sich die verschiedene Syntax zum binden von Parametern, Verwenden von Direktiven usw. merken kann.

Lerne in diesem Video, wie Child Komponenten mit Hilfe von Events an die Parent Komponenten kommunizieren können.

In diesem Video wollen wir anhand eines Beispiels (loading Spinner) das javascript interop in die Applikation einbinden.

In diesem Video nehmen wir die Rendering loop mal genauer in Augenschein.

Lerne in diesem Video wie wir das Routing für unsere Applikation aufsetzen. Wir schauen dazu die Navigationskomponente von Blazor an und werden verstehen, warum das clientseitige Routing erforderlich ist.

Lerne in diesem Video wie wir eine Menu Bar mit bootstrap styling in der Applikation unterbringen.

Lerne in diesem Video, wie wir unsere Komponenten auch über Code behinds anstatt von @code Direktiven organisieren können.

Lerne wie wir mit der eingebauten Blazor Komponente für Html Forms umgehen können.

Schauen wir uns in diesem Video an, welche Optionen wir für eine Validierung unser HTML Form mit der eingebauten Editform Komponente haben.

Eine kurze Einführung zum Thema Dependency Injection im Allgemeinen. Ideen, Konzepte sowie Vor- und Nachteile werden wir uns hier ansehen.

Um das Konzept etwas näher zu betrachten, implementieren wir einmal eine ganz simple Version eines IOC Containers den man zu einer simplen Dependency Injection nutzen kann. Daran können wir dann verstehen was im Hintergrund in etwa passiert wenn DI verwendet wird.

Nachdem wir uns die Konzepte von Dependency Injection im Allgemeinen angesehen haben, schauen wir uns nun an, wie DI in AspNetCore Blazor WASM funktioniert.

Lerne in diesem Video, wie die Lifetime Scopes in Asp.Net Core Backend und Frontend Applikationen grundsätzlich funktionieren und wo diese sich unterscheiden.

Schauen wir uns in diesem Video einmal die REST API des Backends an, die unsere Daten der Todoliste persistiert.

Mit der vorhandenen REST API wollen wir diese nun in unser bestehendes Frontend mit Blazor einbinden, so dass die Daten auch nach einem Neustart der Applikation noch verfügbar sind.

In diesem Video werden wir das FE und das BE miteinander verbinden und die letzten dafür notwendigen Schritte unternehmen.

Das inkludiert den StateManager und den BackendService aus den DI Videos sowie eine Update Mechanik angepasst an den backend Call für unsere EntryRow.

Eine kurze Zusammenfassung aller gelernten Inhalte erhältst du in diesem Video.

Lerne in diesem Video die fortgeschrittenen Themen die wir in diesem Video behandeln werden kennen.

Im ersten Video des 3 Kapitels schauen wir auf Möglichkeiten das Routing aus dem Code heraus zu verwenden.

Lerne Routing Events zu verwenden und wie NavLinkMatches deine Pages auf Routen verweist.

In diesem Video erweitern wir unsere Todolistkomponente um Möglichkeiten des Hinzufügens und Entfernens.

Dieses Video zeigt wie wir mit Http Calls zum Backend in unser Applikation umgehen können, so dass diese sicher gehandhabt werden.

Blazor bietet eine ErrorKomponente an, die wir uns in diesem Video genauer ansehen werden.

Lass uns in diesem Video auf die Theorie des Statemanagements schauen. Zudem lernen wir welche Version wir davon in unsere Applikation übernehmen.

Dieses Video bindet den Statemanager in die Categories und die CurrentTodolist komponenten ein. Dazu erweitern wir die Categories Komponente um Add und Delete Methoden.

Dieses Video zeigt alle Themen die in diesem Kapitel behandelt werden.

Schauen wir in diesem Video einmal kurz auf die elementarsten Grundlagen von HTML und welche Aufgaben die drei Elemente in einer Webapplikation jeweils einnehmen.

Lerne in diesem Video die grundsätzliche Syntax von HTML Elementen kennen und welche wir im Allgemeinen zur Verfügung haben und welchen Zweck diese jeweils erfüllen.

Wie können wir eigentlich CSS und javascript in unserem HTML Dokument unterbringen? Finde es heraus mit diesem Video

Lerne in diesem Video die Basiselemente von CSS kennen: Selektoren und Attribute.

in diesem Video lernen wir das Box Model zum orientieren von HTML Elementen im Rendering kennen. Wir schauen kur darauf wie es funktioniert und außerdem lernen wir wie wir mit der display property auf einem container relativ schnell ein schönes Layout hinbekommen.

Lerne in diesem kurzen Video noch einmal kennen, worum es bei javascript geht und wie wir es in einer webanwendung einbinden können.

In diesem Video erlernen wir anhand der Node.js Runtime und der REPL Loop wie wir mit javascript schnell die verschiedenen Datentypen, Kontrollstrukturen und Funktionen erlernen können.

Lerne in diesem Video ein paar nicht so bekannte member des console Objektes in javascript kennen, die dir das Arbeiten im Alltag mit javascript erheblich erleichtern können.

Lerne in diesem Video wie VS Code verwendet werden kann und welche Vorteile es gegenüber anderen IDEs bietet.

Postman ist ein Web Tool um APIs abzufragen, in diesem Kurs ist es nur da es ein super Tool ist und du so eine Übersicht darüber erhalten kannst (sozusagen als Bonus)

Ein kurzer Überblick zu Json.Net (in den neueren Versionen von .Net wird System.Text.Json als Standard verwendet. Aber ich persönlich bevorzuge Json.Net / Newtonsoft) Für alle die das ebenfalls besser zum Arbeiten finden, hier ein kleiner Überblick und zu JSON im Allgemeinen.