Blazor
Es gibt viele Ansätze zum Erstellen von Web-Apps. Zum Erstellen hochgradig interaktiver und schneller Web-Apps wird häufig JavaScript verwendet.
Ein weiterer Ansatz ist die Verwendung des Blazor-Frameworks von Microsoft, mit dem Sie C# und .NET verwenden können, um Ihre Bedenken bezüglich der Webentwicklung aus dem Weg zu räumen.
Was ist Blazor?
Blazor ist ein Framework zum Erstellen von Webseiten mit HTML, CSS und C#. Wir können das Layout und Design der Website mithilfe von Standard-HTML und CSS definieren. Die interaktiven Komponenten der Webseiten können dann mit C#-Code verwaltet werden, der auf einem Server oder im Browser unter Verwendung einer Webstandardtechnologie namens WebAssembly ausgeführt wird. Blazor ermöglicht das Definieren von Webseiten und Komponenten mithilfe der Razor-Syntax, die eine praktische Mischung aus HTML und C# darstellt. Sie können Blazor-Komponenten einfach innerhalb anderer Seiten und Komponenten erneut verwenden. Das bedeutet, dass Teile der App mit dieser Funktionalität ganz einfach erstellt und erneut verwendet werden können.
Was ist WebAssembly?
WebAssembly ist eine Standardtechnologie, die in jedem modernen Browser verfügbar ist und die es ermöglicht, Code ähnlich wie JavaScript in einem Browser auszuführen. Sie können Tools verwenden, um den C#-Code für die Verwendung als WebAssembly-App im Browser vorzubereiten. Diese Tools sind im .NET-SDK enthalten.
Sofortiges Aktualisieren Ihrer App mit Hot Reload
Beim Entwickeln einer App sollten Sie einen schnellen Entwicklungsflow sicherstellen, um nachvollziehen zu können, wie sich die Änderungen auf Ihre App auswirken. Es kann zeitaufwändig sein, eine Änderung vorzunehmen, sie zu speichern, alle Ressourcen neu zu erstellen und die App erneut im Browser bereitzustellen.
Sie können diesen Workflow mithilfe von Hot Reload verbessern. Mit Hot Reload können Sie eine Änderung auf die ausgeführte App anwenden, ohne diese neu starten zu müssen.
Blazor-Komponenten
Wenn Sie Apps mit Blazor erstellen, besteht Ihre App aus vielen Komponenten, die jeweils einen eigenen Verantwortungsbereich haben. Verwenden Sie bei der Erstellung von Komponenten Razor-Dateien mit einer .razor-Dateierweiterung. Was ist Razor?
Razor ist eine Programmiersyntax, die HTML-Syntax mit C#-Code kombiniert. Ein Beispiel:
<div>@product.Name</div>
@code {
Product product = new Product{ Name = "Blazor" }
}
In diesem Beispiel wird @product.Name in die Zeichenfolge "Blazor" aufgelöst, die dann innerhalb des div-Tags gerendert wird. Die gerenderte Ausgabe sieht folgendermaßen aus:
<div>Blazor</div>
Der obere Teil des Razor-Beispiels besteht aus HTML-Markup, das von der Komponente bei der Ausführung rendert wird. Sie können den Wert von C#-Ausdrücken mithilfe des @-Zeichens rendern. Razor interpretiert weiterhin C#-Code nach dem @-Zeichen, bis die Syntax ein Tag identifiziert und daraufhin das Rendern von HTML fortsetzt. Sie können mithilfe von Klammern wie in @(...) explizit angeben, wann der C#-Ausdruck beginnt und wann er endet.
Alles innerhalb der geschweiften Klammern wie in @code {} enthält C#-Code zum Definieren von Membern der von Ihnen generierten Komponentenklasse. Sie können sich eine Razor-Datei als praktische Möglichkeit vorstellen, um eine C#-Klasse zu definieren, die die HTML-Renderlogik definiert. Sie verwenden den @code-Block, um C#-Member für Ihren Komponententyp wie Felder, Eigenschaften und Methoden zu definieren.
Gestalten einer Blazor-Komponente
Blazor-Komponenten rendern HTML. Dadurch können Sie Blazor-Komponenten mithilfe normaler CSS-Stylesheets formatieren. Alternativ verfügen Blazor-Komponenten über ein Feature namens CSS-Isolation, mit dem Sie Stilregeln erstellen können, die ausschließlich für den Inhalt dieser Komponente gelten. Durch das Erstellen einer Datei mit demselben Namen wie die Komponente und das Hinzufügen der .css-Dateinamenerweiterung erkennt Blazor diese Benennung als Stile, die AUSSCHLIESSLICH auf HTML-Inhalte in der entsprechenden Komponente angewendet werden sollten.
Blazor-Komponenten können ebenfalls Inhalte definieren, die dem HTML-Kopfteil der Seite hinzugefügt werden sollen, indem sie ein spezielles HeadContent-Tag verwenden:
<HeadContent>
<style>
...my styles here
</style>
</HeadContent>
Dieses style-Tag und diese Inhalte werden innerhalb des head-Tags der Seite gerendert.
Routingfähige Komponenten
Die Datei Home.razor ist eine Komponente, zu der über einen Webbrowser navigiert werden kann. Sie enthält HTML, C# und Verweise auf andere Blazor-Komponenten. Wir können diese Datei als Seite identifizieren, da die @page "/"-Anweisung in der ersten Zeile vorhanden ist. Diese Anweisung weist der Komponente die Route "/" zu. Außerdem weist sie Blazor an, mit dem Inhalt dieser Datei zu antworten, wenn die Standardseite an der Adresse "/" angefordert wird.