Einführung in ASP.NET Core BlazorIntroduction to ASP.NET Core Blazor

Von Daniel Roth und Luke LathamBy Daniel Roth and Luke Latham

Willkommen bei Blazor!Welcome to Blazor!

Blazor ist ein Framework zum Erstellen einer interaktiven clientseitigen Webbenutzeroberfläche mit .NET:Blazor is a framework for building interactive client-side web UI with .NET:

  • Erstellen Sie umfassende interaktive Benutzeroberflächen mit C# anstatt mit JavaScript.Create rich interactive UIs using C# instead of JavaScript.
  • Gemeinsames Verwenden von server- und clientseitiger App-Logik, die in .NET geschrieben wurde.Share server-side and client-side app logic written in .NET.
  • Rendern der Benutzeroberfläche als HTML und CSS für umfassende Browserunterstützung (einschließlich mobiler Browser).Render the UI as HTML and CSS for wide browser support, including mobile browsers.
  • Integrieren mit modernen Hostingplattformen, z. B. DockerIntegrate with modern hosting platforms, such as Docker.

Die Verwendung von .NET im für die clientseitige Webentwicklung bietet die folgenden Vorteile:Using .NET for client-side web development offers the following advantages:

  • Schreiben Sie Code in C# anstatt in JavaScript.Write code in C# instead of JavaScript.
  • Nutzen Sie das vorhandene .NET-Ökosystem von .NET-Bibliotheken.Leverage the existing .NET ecosystem of .NET libraries.
  • Geben Sie die App-Logik server- und clientübergreifend frei.Share app logic across server and client.
  • Profitieren Sie von Leistung, Zuverlässigkeit und Sicherheit von .NET.Benefit from .NET's performance, reliability, and security.
  • Bleiben Sie mit Visual Studio unter Windows, Linux und macOS produktiv.Stay productive with Visual Studio on Windows, Linux, and macOS.
  • Setzen Sie auf gebräuchliche Sprachen, Frameworks und Tools, die stabil, funktionsreich und einfach zu verwenden sind.Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

KomponentenComponents

Blazor-Apps basieren auf Komponenten.Blazor apps are based on components. Eine Komponente in Blazor ist ein Element der Benutzeroberfläche, beispielsweise eine Seite, ein Dialogfeld oder ein Formular für die Dateneingabe.A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

Komponenten sind in .NET-Assemblys integrierte .NET-C#-Klassen, auf die Folgendes zutrifft:Components are .NET C# classes built into .NET assemblies that:

  • Sie definieren die Logik für ein flexibles Rendering der Benutzeroberfläche.Define flexible UI rendering logic.
  • Sie behandeln Benutzerereignisse.Handle user events.
  • Sie können geschachtelt und wiederverwendet werden.Can be nested and reused.
  • Sie können als Razor-Klassenbibliotheken oder NuGet-Pakete freigegeben und verteilt werden.Can be shared and distributed as Razor class libraries or NuGet packages.

Die Komponentenklasse wird in der Regel in Form einer Razor-Markupseite mit der Dateierweiterung .razor geschrieben.The component class is usually written in the form of a Razor markup page with a .razor file extension. Komponenten in Blazor werden formal als Razor-Komponenten bezeichnet.Components in Blazor are formally referred to as Razor components. Razor ist eine Syntax, mit der HTML-Markup mit C#-Code kombiniert werden kann, ausgerichtet auf die Produktivität der Entwickler.Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor ermöglicht es Ihnen, mit IntelliSense-Programmierunterstützung in Visual Studio in ein und derselben Datei zwischen HTML-Markup und C# zu wechseln.Razor allows you to switch between HTML markup and C# in the same file with IntelliSense programming support in Visual Studio. Razor Pages und MVC verwenden ebenfalls Razor.Razor Pages and MVC also use 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.Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Blazor verwendet natürliche HTML-Tags für die Benutzeroberflächengestaltung.Blazor uses natural HTML tags for UI composition. 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:The following Razor markup demonstrates a component (Dialog.razor) that displays a dialog and processes an event when the user selects a button:

<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.In the preceding example, OnYes is a C# method triggered by the button's onclick event. Der Text (ChildContent) und der Titel (Title) des Dialogfelds werden von der folgenden Komponente bereitgestellt, die diese Komponente in ihrer Benutzeroberfläche verwendet.The dialog's text (ChildContent) and title (Title) are provided by the following component that uses this component in its UI.

Die Komponente Dialog ist mithilfe eines HTML-Tags in einer anderen Komponente geschachtelt.The Dialog component is nested within another component using an HTML tag. Im folgenden Beispiel verwendet die Index-Komponente (Pages/Index.razor) die vorherige Dialog-Komponente.In the following example, the Index component (Pages/Index.razor) uses the preceding Dialog component. Das Title-Attribut des Tags übergibt einen Wert für den Titel an die Dialog-Eigenschaft der Title-Komponente.The tag's Title attribute passes a value for the title to the Dialog component's Title property. Der Text der Dialog-Komponente (ChildContent) wird durch den Inhalt des <Dialog>-Elements festgelegt.The Dialog component's text (ChildContent) are set by the content of the <Dialog> element. Wenn die Dialog-Komponente der Index-Komponente hinzugefügt wird, beschleunigt IntelliSense in Visual Studio die Entwicklung mithilfe von Syntax- und Parametervervollständigung.When the Dialog component is added to the Index component, IntelliSense in Visual Studio speeds development with syntax and parameter completion.

@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.The dialog is rendered when the Index component is accessed in a browser. Wenn ein Benutzer die Schaltfläche auswählt, zeigt die Browserkonsole mit den Entwicklertools die von der OnYes-Methode geschriebene Meldung:When the button is selected by the user, the browser's developer tools console shows the message written by the OnYes method:

Dialogfeldkomponente, die im Browser geschachtelt in der Indexkomponente gerendert wird.

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.Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree, which is used to update the UI in a flexible and efficient way.

Blazor WebAssembly

Blazor WebAssembly ist ein Single-Page-App-Framework zum Erstellen von interaktiven clientseitigen Web-Apps mit .NET.Blazor WebAssembly is a single-page app (SPA) framework for building interactive client-side web apps with .NET. Blazor WebAssembly verwendet offene Webstandards ohne Plug-Ins und ohne dass Code in anderen Sprachen neu kompiliert werden muss.Blazor WebAssembly uses open web standards without plugins or recompiling code into other languages. Blazor WebAssembly funktioniert in allen modernen Webbrowsern, einschließlich mobiler Browser.Blazor WebAssembly works in all modern web browsers, including mobile browsers.

Das Ausführen von .NET-Code in einem Webbrowser wird durch WebAssembly (Kurzform: wasm) ermöglicht.Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). Es handelt sich um ein Bytecodeformat, das für schnelles Downloaden und die maximale Ausführungsgeschwindigkeit optimiert ist.WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly ist ein offener Webstandard, der in Webbrowsern ohne Plug-Ins unterstützt wird.WebAssembly is an open web standard and supported in web browsers without plugins.

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).WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability, often shortened to JavaScript interop or JS interop. Ü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..NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

Blazor WebAssembly führt .NET-Code unter Verwendung von WebAssembly im Browser aus.

Folgendes geschieht, wenn eine Blazor WebAssembly-App in einem Browser erstellt und ausgeführt wird:When a Blazor WebAssembly app is built and run in a browser:

  • C#-Codedateien und Razor-Dateien werden in .NET-Assemblys kompiliert.C# code files and Razor files are compiled into .NET assemblies.
  • Die Assemblys und die .NET-Runtime werden in den Browser heruntergeladen.The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor WebAssembly startet die .NET-Runtime und konfiguriert die Runtime zum Laden der Assemblys für die App.Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. DOM-Änderungen und API-Aufrufe im Browser werden von der Blazor WebAssembly-Runtime über die JavaScript-Interop verarbeitet.The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

Die Größe der veröffentlichten App, ihre Nutzlast, ist ein wichtiger Leistungsfaktor für die Nutzbarkeit einer App.The size of the published app, its payload size, is a critical performance factor for an app's useability. Das Herunterladen einer großen App in einen Browser dauert relativ lange, was die Benutzerfreundlichkeit beeinträchtigt.A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly optimiert die Nutzlastgröße, um die Downloadzeiten zu verringern:Blazor WebAssembly optimizes payload size to reduce download times:

  • Nicht verwendeter Code wird aus der App entfernt, wenn sie vom IL-Trimmer (Intermediate Language) veröffentlicht wird.Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Trimmer.
  • HTTP-Antworten werden komprimiert.HTTP responses are compressed.
  • Die .NET-Runtime und die Assemblys werden im Browser zwischengespeichert.The .NET runtime and assemblies are cached in the browser.
  • Nicht verwendeter Code wird aus der App entfernt, wenn sie vom IL-Linker (Intermediate Language) veröffentlicht wird.Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • HTTP-Antworten werden komprimiert.HTTP responses are compressed.
  • Die .NET-Runtime und die Assemblys werden im Browser zwischengespeichert.The .NET runtime and assemblies are cached in the browser.

Blazor Server

Blazor entkoppelt die Komponentenrenderinglogik von Aktualisierungen der Benutzeroberfläche.Blazor decouples component rendering logic from how UI updates are applied. Blazor Server bietet Unterstützung für das Hosten von Razor-Komponenten in einer ASP.NET Core-App auf dem Server.Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. Aktualisierungen der Benutzeroberfläche werden über eine SignalR-Verbindung verarbeitet.UI updates are handled over a SignalR connection.

Die Runtime verarbeitet Folgendes:The runtime handles:

  • Senden von Benutzeroberflächenereignissen vom Browser an den Server.Sending UI events from the browser to the server.
  • Anwenden von Benutzeroberflächenupdates, die vom Server zurückgesendet werden, auf die gerenderte Komponente.Applying UI updates to the rendered component that are sent back by the server.

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.The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

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

JavaScript-InteroperabilitätJavaScript interop

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.For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Komponenten können jede Bibliothek oder API verwenden, die auch von JavaScript verwendet werden kann.Components are capable of using any library or API that JavaScript is able to use. C#-Code kann JavaScript-Code abfragen, und JavaScript-Code kann C#-Code abfragen.C# code can call into JavaScript code, and JavaScript code can call into C# code.

Codefreigabe und .NET StandardCode sharing and .NET Standard

Blazor implementiert den .NET Standard, über den Blazor-Projekte auf Bibliotheken verweisen können, die den .NET Standard-Spezifikationen entsprechen.Blazor implements the .NET Standard, which enables Blazor projects to reference libraries that conform to .NET Standard specifications. .NET Standard ist eine formale Spezifikation von .NET-APIs, die häufig für .NET-Implementierungen verwendet werden..NET Standard is a formal specification of .NET APIs that are common across .NET implementations. .NET-Standardklassenbibliotheken können auf verschiedenen .NET-Plattformen wie Blazor, .NET Framework, .NET Core, Xamarin, Mono und Unity freigegeben werden..NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.

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.APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException.

Zusätzliche RessourcenAdditional resources