ASP.NET Core Blazor

Willkommen bei Blazor!

Blazor ist ein .NET-Front-End-Webframework, das sowohl das serverseitige Rendering als auch die Clientinteraktivität in einem einzigen Programmiermodell unterstützt:

• Erstellen Sie umfangreiche interaktive Benutzeroberflächen (UIs) mit C#.
• Gemeinsames Verwenden von server- und clientseitiger App-Logik, die in .NET geschrieben wurde.
• Rendern der Benutzeroberfläche als HTML und CSS für umfassende Browserunterstützung (einschließlich mobiler Browser).
• Erstellen von Hybriddesktop- und mobilen Apps mit .NET und Blazor.

Die Verwendung von .NET im für die clientseitige Webentwicklung bietet die folgenden Vorteile:

• Schreiben Sie Code in C#, der die Produktivität bei der App-Entwicklung und -Wartung verbessern kann.
• Nutzen Sie das vorhandene .NET-Ökosystem von .NET-Bibliotheken.
• Profitieren Sie von Leistung, Zuverlässigkeit und Sicherheit von .NET.
• Bleiben Sie mit Windows, Linux oder macOS mit einer Entwicklungsumgebung wie Visual Studio oder Visual Studio Code produktiv. Integrieren mit modernen Hostingplattformen, z. B. Docker
• Setzen Sie auf gebräuchliche Sprachen, Frameworks und Tools, die stabil, funktionsreich und einfach zu verwenden sind.

Hinweis

Ein Schnellstarttutorial für Blazor finden Sie unter Erstellen Ihrer ersten Blazor-App.

Komponenten

Blazor-Apps basieren auf Komponenten. Eine Komponente in Blazor ist ein Element der Benutzeroberfläche, beispielsweise eine Seite, ein Dialogfeld oder ein Formular für die Dateneingabe.

Komponenten sind in .NET-Assemblys integrierte .NET-C#-Klassen, auf die Folgendes zutrifft:

• Sie definieren die Logik für ein flexibles Rendering der Benutzeroberfläche.
• Sie behandeln Benutzerereignisse.
• Sie können geschachtelt und wiederverwendet werden.
• Sie können als Razor-Klassenbibliotheken oder NuGet-Pakete freigegeben und verteilt werden.

Die Komponentenklasse wird in der Regel in Form einer Razor-Markupseite mit der Dateierweiterung .razor geschrieben. Komponenten in Blazor werden formell als Razor-Komponenten, informell als Blazor-Komponenten bezeichnet. Razor ist eine Syntax, mit der HTML-Markup mit C#-Code kombiniert werden kann, ausgerichtet auf die Produktivität der Entwickler. Razor ermöglicht es Ihnen, mit IntelliSense-Programmierunterstützung in Visual Studio in ein und derselben Datei zwischen HTML-Markup und C# zu wechseln.

Blazor verwendet natürliche HTML-Tags für die Benutzeroberflächengestaltung. Das folgende Razor-Markup veranschaulicht eine Komponente, die einen Zähler erhöht, wenn der Benutzer eine Schaltfläche auswählt.

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

Die Komponenten werden in einer In-Memory-Darstellung des Dokumentobjektmodells (DOM) des Browsers gerendert, die als Renderstruktur bezeichnet wird. Mit dieser Struktur lässt sich die Benutzeroberfläche flexibel und effizient aktualisieren.

Erstellen einer Vollstapel-Web-App mit Blazor

Blazor-Web-Apps bieten eine komponentenbasierte Architektur mit serverseitigem Rendering und vollständiger clientseitiger Interaktivität in einer einzelnen Lösung, in der Sie zwischen serverseitigen und clientseitigen Renderingmodi wechseln und diese sogar auf derselben Seite kombinieren können.

Blazor-Web-Apps können eine Benutzeroberfläche rasch an den Browser liefern, indem HTML-Inhalte vom Server als Reaktion auf Anforderungen statisch gerendert werden. Die Seite wird schnell geladen, da das Rendern der Benutzeroberfläche rasch auf dem Server ausgeführt wird, ohne ein großes JavaScript-Paket herunterladen zu müssen. Blazor kann auch die Benutzererfahrung mit verschiedenen progressiven Verbesserungen des Serverrenderings weiter verbessern, z. B. verbesserte Navigation mit Formularbeiträgen und Streamingrendering asynchron generierter Inhalten.

Blazor unterstützt das interaktive serverseitige Rendering (interaktives SSR), bei dem Interaktionen mit der Benutzeroberfläche vom Server über eine Echtzeitverbindung mit dem Browser verarbeitet werden. Interaktives SSR ermöglicht eine umfassende Benutzererfahrung wie bei einer Client-App, allerdings ohne die Notwendigkeit, API-Endpunkte für den Zugriff auf Serverressourcen erstellen zu müssen. Seiteninhalte für interaktive Seiten werden vorab gerendert, wobei Inhalte auf dem Server anfänglich generiert und an den Client gesendet werden, ohne Ereignishandler für gerenderte Steuerelemente zu aktivieren. Der Server gibt die HTML-Benutzeroberfläche der Seite so schnell wie möglich als Reaktion auf die anfängliche Anforderung aus, wodurch die Anwendung für Benutzer besser reagiert.

Blazor-Web-Apps unterstützen Interaktivität mit clientseitigem Rendering (CSR), das auf einer .NET-Runtime basiert, die mit WebAssembly erstellt wurde, das sie mit Ihrer App herunterladen können. Wenn Blazor auf WebAssembly ausgeführt wird, kann Ihr .NET-Code auf die vollständige Funktionalität des Browsers und die Interoperabilität mit JavaScript zugreifen. Ihr .NET-Code wird in der Sicherheitssandbox des Browsers ausgeführt. Hierbei greifen die Schutzmaßnahmen der Sandbox gegen schädliche Aktionen auf dem Clientcomputer.

Blazor-Apps können vollständig auf WebAssembly im Browser ausgeführt werden, ohne dass ein Server beteiligt ist. Bei einer eigenständigen Blazor WebAssembly-App werden Ressourcen als statische Dateien auf einem Webserver oder für einen Dienst bereitgestellt, die geeignet sind, statische Inhalte für Clients bereitzustellen. Nach dem Herunterladen können eigenständige Blazor WebAssemblyApps als progressive Web-App (Progressive Web App, PWA) zwischengespeichert und offline ausgeführt werden.

Erstellen einer nativen Client-App mit Blazor Hybrid

Blazor Hybrid ermöglicht die Verwendung von Razor-Komponenten in einer nativen Client-App mit einer Mischung aus nativen und Webtechnologien für Web-, mobile und Desktopplattformen. Code wird nativ im .NET-Prozess ausgeführt und rendert die Webbenutzeroberfläche über einen lokalen Interoperabilitätskanal in einem eingebetteten Web View-Steuerelement. WebAssembly wird nicht in Hybrid-Apps verwendet. Hybrid Apps werden mit .NET Multi-platform App UI (.NET MAUI) erstellt, einem plattformübergreifenden Framework zum Erstellen nativer mobiler Apps und Desktop-Apps mithilfe von C# und XAML.

Blazor Hybrid unterstützt Windows Presentation Foundation (WPF) und Windows Forms für den Übergang von Apps von früheren Technologien auf .NET MAUI.

Nächste Schritte

Blazor-Tutorial: Erstellen Ihrer ersten Blazor AppASP.NET Core-unterstützten Blazor Plattformen