ASP.NET Core Blazor

  • Artikel

Willkommen bei !

Blazor ist ein Framework zum Erstellen einer interaktiven clientseitigen Webbenutzeroberfläche mit Blazor:

  • Erstellen Sie umfassende interaktive Benutzeroberflächen mit C# anstatt mit JavaScript.
  • 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).
  • Integrieren mit modernen Hostingplattformen, z. B. Docker
  • Erstellen von Hybriddesktop- und mobilen Apps mit .NET und Blazor.
  • Erstellen Sie umfassende interaktive Benutzeroberflächen mit C# anstatt mit JavaScript.
  • 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).
  • Integrieren mit modernen Hostingplattformen, z. B. Docker

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

  • Schreiben Sie Code in C# anstatt in JavaScript.
  • Nutzen Sie das vorhandene .NET-Ökosystem von .NET-Bibliotheken.
  • Geben Sie die App-Logik server- und clientübergreifend frei.
  • 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.
  • 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 Blazor.

Komponenten

Blazor-Apps basieren auf Blazor. 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 -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 Blazor, informell als Razor 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 Razor-Programmierunterstützung in Visual Studio in ein und derselben Datei zwischen HTML-Markup und C# zu wechseln. Razor Pages und MVC verwenden ebenfalls Razor. Im Gegensatz zu Razor Pages und MVC, die auf einem Anforderung/Antwort-Modell aufbauen, werden Komponenten speziell für die clientseitige Benutzeroberflächenlogik und -gestaltung verwendet.

Blazor verwendet natürliche HTML-Tags für die Benutzeroberflächengestaltung. Das folgende Razor-Markup veranschaulicht eine Komponente (Dialog.razor), die ein Dialogfeld anzeigt und ein Ereignis verarbeitet, wenn der Benutzer eine Schaltfläche auswählt:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

Im obigen Beispiel ist OnYes eine C#-Methode, die durch das Schaltflächenereignis onclick ausgelöst wird. Der Text (ChildContent) und der Titel (Title) des Dialogfelds werden von der folgenden Komponente bereitgestellt, die diese Komponente in ihrer Benutzeroberfläche verwendet.

Die Komponente Dialog ist mithilfe eines HTML-Tags in einer anderen Komponente geschachtelt. Im folgenden Beispiel verwendet die Index-Komponente (Pages/Index.razor) die vorherige Dialog-Komponente. Das Title-Attribut des Tags übergibt einen Wert für den Titel an die Dialog-Eigenschaft der Title-Komponente. Der Text der Dialog-Komponente (ChildContent) wird durch den Inhalt des <Dialog>-Elements festgelegt. Wenn die Dialog-Komponente der Index-Komponente hinzugefügt wird, beschleunigt Dialog die Entwicklung mithilfe von Syntax- und Parametervervollständigung.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

Das Dialogfeld wird gerendert, wenn die Index-Komponente in einem Browser aufgerufen wird. Wenn ein Benutzer die Schaltfläche auswählt, zeigt die Browserkonsole mit den Entwicklertools die von der OnYes-Methode geschriebene Meldung:

Dialogkomponente, die im Browser gerendert wird und in der Indexkomponente geschachtelt ist. Die Konsole der Browserentwicklertools zeigt die vom C#-Code geschriebene Nachricht an, wenn der Benutzer die Schaltfläche „Yes!“ in der Benutzeroberfläche auswählt.

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.

Blazor Server

Blazor Server bietet Unterstützung zum Hosten von Razor-Komponenten in einer ASP.NET Core-App auf dem Server. Aktualisierungen der Benutzeroberfläche werden über eine SignalR-Verbindung verarbeitet.

Die Runtime verbleibt auf dem Server und führt folgende Aufgaben aus:

  • Ausführen des C#-Codes der App
  • Senden von Benutzeroberflächenereignissen vom Browser an den Server.
  • Anwenden von Updates der Benutzeroberfläche auf die gerenderte Komponente, die vom Server zurückgesendet wurden

Die Verbindung, die von Blazor Server für die Kommunikation mit dem Browser verwendet wird, wird auch für die Verarbeitung von JavaScript-Interopaufrufen verwendet.

Blazor Server führt .NET-Code auf dem Server aus und interagiert mit dem Dokumentobjektmodell auf dem Client über eine SignalR-Verbindung

Blazor Server-Apps rendern Inhalte anders als herkömmliche Modelle zum Rendern der Benutzeroberfläche in ASP.NET Core-Apps, die Razor-Ansichten oder Razor Pages verwenden. Bei beiden Modellen wird zum Beschreiben von HTML-Inhalt die -Syntax verwendet. Deutliche Unterschiede bestehen hingegen im Rendern von Markup.

Beim Rendern einer Razor-Seite oder -Ansicht gibt jede Razor-Codezeile HTML in Textform aus. Nach dem Rendern verwirft der Server die Instanz der Seite oder Ansicht, einschließlich aller produzierten Zustände. Bei einer weiteren Anforderung für die Seite wird die gesamte Seite erneut in HTML gerendert und an den Client gesendet.

Blazor Server erzeugt ein Diagramm der Komponenten, die ähnlich wie ein HTML- oder XML-Dokumentobjektmodell (DOM) dargestellt werden. Der Komponentendiagramm enthält den in Eigenschaften und Feldern gespeicherten Zustand. Blazor wertet das Komponentendiagramm aus, um eine binäre Darstellung des Markups zu erzeugen, die zum Rendern an den Client gesendet wird. Nach dem Herstellen einer Verbindung zwischen Client und Server werden die vorab gerenderten statischen Elemente durch interaktive Elemente ersetzt. Durch das Prerendering des Inhalts auf dem Server wird die App auf dem Client dynamischer.

Sobald die Komponenten auf dem Client interaktiv sind, werden Updates der Benutzeroberfläche durch Benutzerinteraktionen und App-Ereignisse ausgelöst. Wenn ein Update durchgeführt wird, wird das Komponentendiagramm neu gerendert, und eine diff (Differenz) der Benutzeroberfläche wird berechnet. Dieser Unterschied stellt die kleinste Menge DOM-Änderungen dar, die zur Aktualisierung der Benutzeroberfläche auf dem Client erforderlich ist. Der Unterschied wird im Binärformat an den Client gesendet und vom Browser angewendet.

Eine Komponente wird verworfen, sobald der*die Benutzer*in sie auf dem Client wieder verlässt.

Blazor WebAssembly

Blazor WebAssembly ist ein Blazor WebAssembly zum Erstellen von interaktiven clientseitigen Web-Apps mit .NET. Blazor WebAssembly verwendet offene Webstandards ohne Plug-Ins und ohne dass Code in anderen Sprachen neu kompiliert werden muss. Blazor WebAssembly funktioniert in allen modernen Webbrowsern, einschließlich mobiler Browser.

Das Ausführen von .NET-Code in einem Webbrowser wird durch WebAssembly (Kurzform: ) ermöglicht. Es handelt sich um ein Bytecodeformat, das für schnelles Downloaden und die maximale Ausführungsgeschwindigkeit optimiert ist. WebAssembly ist ein offener Webstandard, der in Webbrowsern ohne Plug-Ins unterstützt wird.

WebAssembly-Code kann über JavaScript auf alle Funktionen des Browsers zugreifen. Dies wird als JavaScript-Interoperabilität bezeichnet (häufig als JavaScript Interop oder JS Interop abgekürzt). Über WebAssembly im Browser ausgeführter .NET-Code wird in der JavaScript-Sandbox des Browsers ausgeführt. Hierbei greifen die Schutzmaßnahmen der Sandbox gegen schädliche Aktionen auf dem Clientcomputer.

Blazor WebAssembly führt .NET-Code im Browser mit WebAssembly aus.

Folgendes geschieht, wenn eine Blazor WebAssembly-App in einem Browser erstellt und ausgeführt wird:

  • C#-Codedateien und Razor-Dateien werden in .NET-Assemblys kompiliert.
  • Die Assemblys und die .NET-Runtime werden in den Browser heruntergeladen.
  • Blazor WebAssembly startet die .NET-Runtime und konfiguriert die Runtime zum Laden der Assemblys für die App. DOM-Änderungen und API-Aufrufe im Browser werden von der Blazor WebAssembly-Runtime über die JavaScript-Interop verarbeitet.

Die Größe der veröffentlichten App, ihre Nutzlastgröße, ist ein wichtiger Leistungsfaktor für die Verwendbarkeit einer App. Das Herunterladen einer großen App in einen Browser dauert relativ lange, was die Benutzerfreundlichkeit beeinträchtigt. Blazor WebAssembly optimiert die Nutzlastgröße, um die Downloadzeiten zu verringern:

  • Nicht verwendeter Code wird aus der App entfernt, wenn sie vom IL-Trimmer (Intermediate Language) veröffentlicht wird.
  • HTTP-Antworten werden komprimiert.
  • Die .NET-Runtime und die Assemblys werden im Browser zwischengespeichert.

Blazor Hybrid

Hybrid-Apps verwenden eine Kombination aus nativen und Webtechnologien. Eine Blazor Hybrid-App verwendet Blazor in einer nativen Client-App. Razor-Komponenten werden nativ im .NET-Prozess ausgeführt und rendern die Webbenutzeroberfläche über einen lokalen Interoperabilitätskanal in einem eingebetteten Web View-Steuerelement. WebAssembly wird nicht in Hybrid-Apps verwendet. Hybrid-Apps umfassen die folgenden Technologien:

  • .NET Multi-platform App UI (.NET MAUI): Ein plattformübergreifendes Framework zum Erstellen nativer mobiler und Desktop-Apps mit C# und XAML.
  • Windows Presentation Foundation (WPF): ein Framework für Benutzeroberflächen, das auflösungsunabhängig ist und eine vektorbasierte Rendering-Engine verwendet, die für die Nutzung moderner Grafikhardware entwickelt wurde.
  • Windows Forms: ein Framework für Benutzeroberflächen, mit dem umfangreiche Desktopclient-Apps für Windows erstellt werden können. Die Entwicklungsplattform Windows Forms unterstützt eine breite Palette an Anwendungsentwicklungsfeatures wie Steuerelemente, Grafiken, Datenbindungen und Benutzereingaben.

Weitere Informationen zur Erstellung von Blazor Hybrid-Apps mit den zuvor genannten Frameworks finden Sie in den folgenden Artikeln:

JavaScript-Interoperabilität

Für Apps, die JavaScript-Bibliotheken und Zugriff auf Browser-APIs von Drittanbietern benötigen, sind die Komponenten für die Interoperabilität mit JavaScript konzipiert. Komponenten können jede Bibliothek oder API verwenden, die auch von JavaScript verwendet werden kann. C#-Code kann JavaScript-Code abfragen, und JavaScript-Code kann C#-Code abfragen.

Codefreigabe und .NET Standard

Blazor implementiert den Blazor, über den Blazor-Projekte auf Bibliotheken verweisen können, die den .NET Standard-Spezifikationen entsprechen. .NET Standard ist eine formale Spezifikation von .NET-APIs, die häufig für .NET-Implementierungen verwendet werden. .NET-Standardklassenbibliotheken können auf verschiedenen .NET-Plattformen wie Blazor, .NET Framework, .NET Core, Xamarin, Mono und Unity freigegeben werden.

APIs, die nicht in einem Webbrowser angewendet werden können (z.B. zum Zugreifen auf ein Dateisystem, zum Öffnen eines Sockets und für das Threading), lösen die Ausnahme PlatformNotSupportedException aus.

Zusätzliche Ressourcen