Auswählen einer ASP.NET Core-Webbenutzeroberfläche

ASP.NET Core ist ein vollständiges Benutzeroberflächenframework. Wählen Sie aus, welche Funktionen kombiniert werden sollen, die den Anforderungen der Webbenutzeroberfläche der App entsprechen.

Vorteile und Kosten der vom Server und Client gerenderten Benutzeroberfläche

Es gibt drei allgemeine Ansätze zum Erstellen einer modernen Webbenutzeroberfläche mit ASP.NET Core:

  • Apps, die die Benutzeroberfläche vom Server rendern.
  • Apps, die die Benutzeroberfläche auf dem Client im Browser rendern.
  • Hybrid-Apps, die sowohl Server- als auch Clientrenderingansätze für die Benutzeroberfläche nutzen. Beispielsweise wird der Großteil der Webbenutzeroberfläche auf dem Server gerendert, und vom Client gerenderte Komponenten werden bei Bedarf hinzugefügt.

Beim Rendern der Benutzeroberfläche auf dem Server oder auf dem Client müssen Vor- und Nachteile berücksichtigt werden.

Vom Server gerenderte Benutzeroberfläche

Eine Webbenutzeroberflächen-App, die auf dem Server gerendert wird, generiert dynamisch die HTML- und CSS-Elemente der Seite auf dem Server als Antwort auf eine Browseranforderung. Wenn die Seite den Client erreicht, ist sie bereit für die Anzeige.

Vorteile:

  • Die Clientanforderungen sind minimal, da der Server die Logik und Seitengenerierung übernimmt:
    • Ideal für Low-End-Geräte und Verbindungen mit geringer Bandbreite.
    • Ermöglicht eine Vielzahl von Browserversionen auf dem Client.
    • Schnelle anfängliche Seitenladezeiten.
    • Minimaler bzw. kein JavaScript-Code, der auf den Client gepullt werden muss.
  • Flexibilität des Zugriffs auf geschützte Serverressourcen:
    • Datenbankzugriff.
    • Zugriff auf Geheimnisse, z. B. Werte für API-Aufrufe an Azure Storage.
  • Vorteile bei der Analyse statischer Websites, z. B. Suchmaschinenoptimierung.

Beispiele für gängige, vom Server gerenderte Webbenutzeroberflächen-App-Szenarien:

  • Dynamische Websites, z. B. Websites, die personalisierte Seiten, Daten und Formulare bereitstellen.
  • Anzeigen schreibgeschützter Daten, z. B. von Transaktionslisten.
  • Anzeigen statischer Blogseiten.
  • Ein öffentlich zugängliches Content-Management-System.

Nachteile:

  • Die Kosten für Compute- und Arbeitsspeichernutzung konzentrieren sich auf den Server und nicht auf jeden Client.
  • Benutzerinteraktionen erfordern einen Roundtrip zum Server, um Benutzeroberflächenupdates zu generieren.

Vom Client gerenderte Benutzeroberfläche

Eine vom Client gerenderte App rendert die Webbenutzeroberfläche dynamisch auf dem Client und aktualisiert das Browser-DOM bei Bedarf direkt.

Vorteile:

  • Ermöglicht umfassende Interaktivität, die nahezu sofort erfolgt, ohne dass ein Roundtrip zum Server erforderlich ist. Benutzeroberflächener-Eignisbehandlung und Logik werden lokal auf dem Gerät des Benutzers mit minimaler Latenz ausgeführt.
  • Unterstützt inkrementelle Updates unterstützen, wodurch teilweise bearbeitete Formulare oder Dokumente gespeichert werden, ohne dass der Benutzer auf eine Schaltfläche zum Senden eines Formulars klicken muss.
  • Kann für die Ausführung in einem getrennten Modus entworfen werden. Aktualisierungen des clientseitigen Modells werden schließlich wieder mit dem Server synchronisiert, sobald die Verbindung wiederhergestellt wurde.
  • Verringerte Serverauslastung und -kosten, die Arbeit wird auf den Client verlagert. Viele vom Client gerenderte Apps können auch als statische Websites gehostet werden.
  • Nutzt die Funktionen des Geräts des Benutzers.

Beispiele für vom Client gerenderte Webbenutzeroberfläche:

  • Ein interaktives Dashboard.
  • Eine App mit Drag & Drop-Funktionalität
  • Eine reaktionsfähige und zusammenarbeitsfähige App für soziale Netzwerke.

Nachteile:

  • Code für die Logik muss heruntergeladen und auf dem Client ausgeführt werden, was zur anfänglichen Ladezeit beiträgt.
  • Clientanforderungen können Benutzer ausschließen, die über Low-End-Geräte, ältere Browserversionen oder Verbindungen mit geringer Bandbreite verfügen.

Auswählen einer vom Server gerenderten ASP.NET Core-Benutzeroberflächenlösung

Im folgenden Abschnitt wird erläutert, welche von Servern gerenderten ASP.NET Core-Webbenutzeroberflächenmodelle verfügbar sind, und es werden Links zu den ersten Schritte bereitgestellt. ASP.NET Core Razor Pages und ASP.NET Core MVC sind serverbasierte Frameworks zum Erstellen von Web-Apps mit .NET.

ASP.NET Core Razor Pages

Razor Pages ist ein seitenbasiertes Modell. Benutzeroberflächen- und Geschäftslogikaspekte werden getrennt gehalten, jedoch innerhalb der Seite. Razor Pages ist die empfohlene Methode zum Erstellen neuer seitenbasierter oder formularbasierter Apps für Entwickler, die noch nicht ASP.NET Core vertraut sind. Razor Pages bietet einen einfacheren Ausgangspunkt als ASP.NET Core MVC.

Vorteile von Razor Pages zusätzlich zu den Vorteilen des Serverrenderings:

  • Schnelles Erstellen und Aktualisieren der Benutzeroberfläche. Der Code für die Seite verbleibt bei der Seite, während Benutzeroberflächen- und Geschäftslogikaspekte getrennt werden.
  • Kann getestet und auf große Apps skaliert werden.
  • Organisieren Sie ASP.NET Core-Seiten einfacher als ASP.NET MVC:
    • Ansichtsspezifische Logik und Ansichtsmodelle können zusammen in einem eigenen Namespace und Verzeichnis verwaltet werden.
    • Gruppen zusammengehöriger Seiten können zusammen in einem eigenen Namespace und Verzeichnis gespeichert werden.

Informationen zu den ersten Schritten mit Ihrer ersten Razor Pages-App in ASP.NET Core erhalten Sie im Tutorial: Erste Schritte mit Razor Pages in ASP.NET Core. Eine vollständige Übersicht über Razor Pages in ASP.NET Core, die zugehörige Architektur und Vorteile finden Sie in der Einführung in Razor Pages in ASP.NET Core.

ASP.NET Core MVC

ASP.NET MVC rendert die Benutzeroberfläche auf dem Server und verwendet ein MVC-Architekturmuster (Model-View-Controller). Das MVC-Muster unterteilt eine App in drei Hauptkomponentengruppen: Modelle (Models), Ansichten (Views) und Controller (Controllers). Benutzeranforderungen werden an einen Controller geroutet. Der Controller ist für die Arbeit mit dem Modell verantwortlich, um Benutzeraktionen durchzuführen oder Ergebnisse von Abfragen abzurufen. Der Controller wählt die Ansicht, die dem Benutzer angezeigt wird, und stellt alle erforderlichen Modelldaten dafür bereit. Unterstützung für Razor Pages baut auf ASP.NET Core MVC auf.

MVC-Vorteile zusätzlich zu den Vorteilen des Serverrenderings:

  • Basiert auf einem skalierbaren und ausgereiften Modell zum Erstellen großer Web-Apps.
  • Klare Separation of Concerns für maximale Flexibilität.
  • Die Model View Controller-Trennung von Zuständigkeiten stellt sicher, dass das Geschäftsmodell weiterentwickelt werden kann, ohne eng an Implementierungsdetails auf niedriger Ebene gekoppelt zu sein.

Informationen zu den ersten Schritten mit ASP.NET Core MVC finden Sie unter Erste Schritte mit ASP.NET Core MVC. Eine Übersicht über die Architektur und die Vorteile von ASP.NET Core MVC finden Sie unter Übersicht über ASP.NET Core MVC.

Auswählen einer vom Client gerenderten ASP.NET Core-Lösung

Im folgenden Abschnitt wird kurz erläutert, welche vom Client gerenderten ASP.NET Core-Webbenutzeroberflächenmodelle verfügbar sind, und es werden Links zu den ersten Schritte bereitgestellt.

Blazor

Blazor-Apps bestehen aus Razor-Komponenten: Segmente der wiederverwendbaren Webbenutzeroberfläche, die mit C#, HTML und CSS implementiert werden. Sowohl der Client- als auch der Servercode sind in C# geschrieben und ermöglichen freigegebenen Code und Bibliotheken. Razor-Komponenten können aus Ansichten und Seiten gerendert oder vorab gerendert werden.

Vorteile von Razor-Komponenten:

  • Erstellen interaktiver Webbenutzeroberflächen mit C# anstelle von JavaScript. Dieselbe Programmiersprache für den Front-End- und Back-End-Code zu verwenden, bringt folgende Vorteile mit sich:
    • Schnellere App-Entwicklung
    • Reduzieren der Komplexität der Buildpipeline.
    • Einfachere Wartung
    • Nutzen Sie das vorhandene .NET-Ökosystem von .NET-Bibliotheken.
    • Entwickler verstehen sowohl den clientseitigen als auch den serverseitigen Code und arbeiten auch mit beidem.
  • Erstellen wiederverwendbarer, Benutzeroberflächenkomponenten, die gemeinsam genutzt werden können.
  • Schnelle Produktivität mit Blazor wiederverwendbaren Benutzeroberflächenkomponenten von führenden Komponentenanbietern.
  • Funktioniert in allen modernen Webbrowsern, einschließlich mobilen Browsern. Blazor verwendet offene Webstandards ohne Plug-Ins oder Codetranspilation.

Host Razor Komponenten haben die Flexibilität, entweder Blazor Server oder Blazor WebAssembly zu verwenden, um die Vorteile des Server- oder Clientrenderings auszunutzen.

Weitere Informationen finden Sie unter ASP.NET Core Blazor und ASP.NET Core Blazor Hostingmodelle.

ASP.NET Core Single-Page-Anwendung (SPA) mit JavaScript-Frameworks wie Angular und React

Erstellen Sie clientseitige Logik für ASP.NET Core-Apps mit beliebten JavaScript-Frameworks, z. B. mit Angular oder React. ASP.NET Core stellt Projektvorlagen für Angular und React bereit und kann auch mit anderen JavaScript-Frameworks verwendet werden.

Vorteile von ASP.NET Core SPA mit JavaScript-Frameworks sowie die zuvor aufgeführten Vorteile des Clientrenderings:

  • Die JavaScript-Laufzeitumgebung wird bereits mit dem Browser bereitgestellt.
  • Große Community und ausgereiftes Ökosystem.
  • Erstellen Sie clientseitige Logik für ASP.NET Core-Apps mit beliebten JS Frameworks, wie z. B. mit Angular oder React.

Nachteile:

  • Weitere Programmiersprachen, Frameworks und Tools erforderlich.
  • Es ist schwierig, Code freizugeben, sodass ein Teil der Logik ggf. dupliziert werden muss.

Informationen zu den ersten Schritten finden Sie unter:

Auswählen einer Hybridlösung: ASP.NET Core MVC oder Razor Seiten plus Blazor

MVC, Razor Seiten und Blazor sind Teil des ASP.NET Core-Frameworks und sind für die gemeinsame Verwendung konzipiert. Razor-Komponenten können in Razor Pages- und MVC-Apps integriert werden, die in einer Blazor WebAssembly oder Blazor Server Lösung gehostet werden. Wenn eine Ansicht oder Seite gerendert wird, können Komponenten gleichzeitig vorab gerendert werden.

Vorteile für MVC oder Razor Seiten plus Blazor, zusätzlich zu den MVC oder Razor-Seiten Vorteilen:

  • Vorabrendering führt Razor Komponenten auf dem Server aus und rendert sie in eine Ansicht oder Seite, was die gefühlte Ladezeit der App verbessert.
  • Fügen Sie vorhandenen Ansichten oder Seiten mithilfe des Komponententag-Hilfsprogramms Interaktivität hinzu.

Informationen zu den ersten Schritte mit ASP.NET Core MVC oder Razor-Seiten plus Blazor finden Sie unter Vorabrendern und Integrieren von Razor-Komponenten in ASP.NET Core.

Nächste Schritte

Weitere Informationen finden Sie unter