KH: Blazor beschreibung

Diplomarbeitsbuch-individueller-teil-Konstantin-Hintermayer.md

@@ -49,7 +49,6 @@ Es war von Anfang an klar, dass es ein SQL basiertes System wird, da wir im Team
 
 
 # Technologie
-## Entwicklung mit ASP.NET (Was ist Blazor? / Was ist Razor? / Kestrel)
 ## Was ist Oqtane? Architektur von Oqtane?
 Oqtane ist ein Framework und CMS zur Entwicklung von Webseiten mithilfe von ASP.NET und Blazor. [^5] Ein Oqtane-System besteht aus mehreren Komponenten.
 
@@ -94,8 +93,51 @@ architecture-beta
 
 Zusätzlich gab es einen Administrationszugang zu den Servern, welcher über SSH möglich war. Dieser wurde für die Installation und Konfiguration der einzelnen Komponenten verwendet. Bei Hetzner war dieser Zugang nur über eine Wireguard VPN erreichbar. Bei der Schule war dieser Zugang direkt (über einen Hight-Port) möglich. Und bei LiveDesign war dieser Zugang wieder über eine VPN geregelt. Anfänglich mit SSL VPN, später mit einem IPSEC / Strongswan.
 
-## Websockets und HTTP 1.1 
+## Entwicklung mit ASP.NET (Was ist Blazor? / Was ist Razor? / Kestrel)
+### Blazor [^7]
+Blazor ist ein kostenloses und quelloffenes Web-Framework, welches es Möglich macht, Benutzeroberflächen für Web-Browser basierend auf C# and HTML zu erstellen. Es wird von Microsoft als teil des ASP.NET Core Frameworks entwickelt. 
 
+Blazor hat mehrere Hosting-Modelle:
+- Blazor Web App: Hier wird die Web App als Teil einer ASP.NET Core Anwendung bereitgestellt. Hier gibt es mehrere Render Modi:
+  - Static Server: Die Komponente wird serverseitig "gerenderet" und besitzt keine Interaktivität. Das istder Default `RenderMode`
+  - Interative Server: Die Komponente wird serverseitig "gerendert", diesmal ist sie jedoch interaktiv. Das bedeutet: Man kann mithilfe von C# den Zustand der Seite dynamisch bearbeiten. Diese Zustandsänderungen werden serverseitig bearbeitet. Hierbei kommunizieren Server und Client mithilfe von SignalR über WebSockets miteinander.
+  - Interactive WebAssembly: Die Komponente wird clientseitig, also im Browser, "gerendert". Damit der Blazor C# Code auch im Browser ausgeführt werden kann wird dieser in WebAssembly kompiliert.
+  - Interactive Auto: Im `Interactive Auto` Modul wird bei dem initialen Besuch der Website der `Interactive  Server` Modus gewählt und im Hintergrund wird der WebAssembly-Build heruntergeladen, damit bei weiteren Besuchen der Seite der `Interactive WebAssembly` Modus gewählt werden kann.
+- Hybrid: Dieser Modus ist der einzige, welcher nicht innerhalb einer Blazor Web App läuft, sondern in einem WebView einer Nativen App. Dabei wird innerhalb des Mutterprozesses, ganz ohne WebServer. Das ganze Funktioniert in WPF und WinForms Apps und in nativen mobilen Apps für Android und iOS mithilfe von .NET MAUI.
+
+Razor-Komponenten (in dieser Arbeit, sowie Umgangssprachlich, auch oft nur Komponenten genannt) sind der Grundbaustein für Blazor Web Apps. Sie bestehen aus HTML, welches mit der Verwendung von inline C# beeinflusst werden kann. Das Blazor stellt sicher, dass das gerenderte Markup aktualisiert wird, wenn sicher der Status der Komponente ändert. Dieser Code kann entweder vollständig in einer .razor Dateil liegen, oder in einer seperaten Code-Behind-Datei und der benutzer einer partiellen Klasse. Inline C# Code wird mithilfe von dem `@`- Zeichen markiert. Hier ist ein Beispiel für einen einfachen Counter:
+
+```razor
+<h1>Counter</h1>
+
+<p>Count: @count</p>
+
+<button @onclick="Increment">Increment</button>
+
+@code 
+{
+    private int count = 0;
+
+    private void Increment()
+    {
+        count++;
+    }
+}
+```
+
+Mit`@count` in Zeile 3 wird der Wert der Variablen count in den `<p>` Tag mit eingebaut. Mit `@onclick="Increment"` in Zeile 5 wird die onclick Property vom `<button>`Tag auf die Increment Methode im C# Code. Der `@code` Block in Zeile 7 ist der C# Code, welcher diese Komponente dynamisch macht. Hier ist die Variable count definiert und die Methode Increment, welche dieser Komponente interaktiv macht. 
+
+Razor hat auch eine Reihe an Keywords wie zum Beipsiel (nur Auszugsweise, bzw. die die wir verwendet haben):
+- namespace: Gibt den aktuellen Namespace in der Razor Datei ein
+- inherits: Gibt die Superklasse der generierten C# Klasse an.
+- using: Gibt die im C# Code benutzen/verfügbaren Namespaces an
+- foreach: Für Wiederholungen im Markup
+- if: Für verzweigungen im Markup
+
+[^7]: https://en.wikipedia.org/wiki/Blazor
+
+### SignalR
+### Kestrel
 
 ## Dependency injection