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: 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. 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-Klassen, auf die Folgendes zutrifft:Components are .NET 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. is a syntax for combining HTML markup with C# code designed for developer productivity. Razor ermöglicht es Ihnen, mit IntelliSense-Unterstützung zwischen HTML-Markup und C# in derselben Datei zu wechseln. allows you to switch between HTML markup and C# in the same file with IntelliSense support. Razor Pages und MVC verwenden ebenfalls 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.

Das folgende Razor-Markup veranschaulicht eine Komponente (Dialog.razor), die in eine andere Komponente geschachtelt werden kann:The following Razor markup demonstrates a component (Dialog.razor), which can be nested within another component:

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

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

Der Textinhalt (ChildContent) und der Titel (Title) des Dialogfelds werden von der Komponente bereitgestellt, die diese Komponente in ihrer Benutzeroberfläche verwendet.The dialog's body content (ChildContent) and title (Title) are provided by the component that uses this component in its UI. OnYes ist eine C#-Methode, die vom Schaltflächenereignis onclick ausgelöst wird.OnYes is a C# method triggered by the button's onclick event.

Blazor verwendet natürliche HTML-Tags für die Benutzeroberflächengestaltung. uses natural HTML tags for UI composition. HTML-Elemente legen Komponenten fest, und die Attribute eines Tags übergeben Werte an die Eigenschaften einer Komponente.HTML elements specify components, and a tag's attributes pass values to a component's properties.

Im folgenden Beispiel verwendet die Index-Komponente die Dialog-Komponente.In the following example, the Index component uses the Dialog component. ChildContent und Title werden durch die Attribute und den Inhalt des <Dialog>-Elements festgelegt.ChildContent and Title are set by the attributes and content of the <Dialog> element.

Pages/Index.razor:Pages/Index.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

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

Das Dialogfeld wird gerendert, wenn die übergeordnete Komponente (Pages/Index.razor) in einem Browser aufgerufen wird:The dialog is rendered when the parent (Pages/Index.razor) is accessed in a browser:

Im Browser gerenderte Dialogfeldkomponente

Wenn diese Komponente in der App verwendet wird, beschleunigt IntelliSense in Visual Studio und Visual Studio Code die Entwicklung mithilfe von Syntax- und Parametervervollständigung.When this component is used in the app, IntelliSense in Visual Studio and Visual Studio Code speeds development with syntax and parameter completion.

Die Komponenten werden in einer In-Memory-Darstellung des Browser-DOM (Document Object Model) gerendert, die als Renderbaum bezeichnet und verwendet wird, um die Benutzeroberfläche auf flexible und effiziente Weise zu 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. is a single-page app framework for building interactive client-side web apps with .NET. Blazor WebAssembly verwendet offene Webstandards ohne Plug-Ins oder Codetranspilation und funktioniert in allen modernen Webbrowsern, einschließlich mobiler Browser. uses open web standards without plugins or code transpilation and 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 auf alle Funktionen des Browsers über JavaScript, auch als JavaScript-Interoperabilität (oder JavaScript-Interop) bezeichnet, zugreifen.WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability (or JavaScript 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.Blazor WebAssembly runs .NET code in the browser with WebAssembly.

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 im 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. 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: optimizes payload size to reduce download times:

  • 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. decouples component rendering logic from how UI updates are applied. Blazor Server bietet Unterstützung zum Hosten von Razor-Komponenten in einer ASP.NET Core-App auf dem 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 handhabt das Senden von Benutzeroberflächenereignissen vom Browser an den Server und wendet Benutzeroberflächenupdates an, die nach dem Ausführen der Komponenten vom Server zurück an den Browser gesendet werden.The runtime handles sending UI events from the browser to the server and applies UI updates sent by the server back to the browser after running the components.

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.Blazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection

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 umgekehrt.C# code can call into JavaScript code, and JavaScript code can call into C# code. Weitere Informationen finden Sie in den folgenden Artikeln:For more information, see the following articles:

Codefreigabe und .NET StandardCode sharing and .NET Standard

Blazor implementiert .NET Standard 2.1, das Blazor-Projekten ermöglicht, auf Bibliotheken zuzugreifen, die .NET Standard 2.1 oder früheren Spezifikationen entsprechen. implements .NET Standard 2.1, which enables Blazor projects to reference libraries that conform to .NET Standard 2.1 or earlier 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