Home
Insights
Web Development
Mit .NET ins Web

Elena Bochkor

19. Jul 2021

Lesedauer 13 Min.

Mit .NET ins Web

Web-Apps mit Blazor, Teil 4

Das UI moderner Webapplikationen rein mit HTML und CSS zu gestalten widerspricht dem Komponentenansatz von Blazor. Drittanbieter wie Syncfusion oder Telerik bieten Abhilfe.

Auf dem Lernpfad der modernen Webapplikation mit Blazor sind wir schon ein Stück fortgeschritten und haben Ansatz und technische Hintergründe, Grundlagen der Blazor-Komponenten und die Arbeit mit Formularen betrachtet [1] [2] [3]. Eine Webapplikation muss die Anwender aber auch mit einer modernen, ansprechenden und benutzerfreundlichen Oberfläche überzeugen.Grundsätzlich haben Sie dafür alles an Bord – HTML und CSS sind die Basis. An dieser Stelle könnten Sie bereits aufhören, denn jedes Element des User Interface können Sie mit den beiden Technologien zusammenbauen. Das ist jedoch nicht der Sinn von Blazor. Microsoft möchte mit diesem Framework den Entwicklungsprozess beschleunigen, daher gilt der Komponentenansatz auch für das User Interface.

Material Design und Fluent Design

Das Material Design [16] basiert auf dem Einsatz von kartenähnlichen Flächen und dem Flat Design (Minimalismus). Zusätzlich verwendet dieser Designentwurf Animationen und Schatten, um einen leichten Tiefeneffekt zu erzeugen. Damit wird gezeigt, welche Bereiche wichtige Informationen enthalten beziehungsweise interaktiv sind.

.NET-Entwickler haben eine lange Historie mit Komponentenbibliotheken (WinForms, WPF, Win UI, Xamarin). Und dieses Prinzip gilt auch für Webapplikationen auf der Basis von Blazor. Da das Blazor-Framework hier zunächst keine umfassenden User-Interface-Komponenten bereitstellt, ist dies eine Spielwiese von Third-Party-Anbietern.

Komponentenbibliotheken

Im Lauf des Artikels werden wir die Arbeit mit der einen oder anderen Bibliothek erläutern. Typische Fragen lauten:

Wie werden die Bibliotheken üblicherweise in ein aktuelles Projekt eingebunden?
An welchen Dateien müssen wir Verweise ergänzen?
Wie nutzen wir in einer eigenen Blazor-Komponente die vordefinierten User-Interface-Bausteine?

Bevor wir jedoch loslegen, verschaffen wir uns sinnvollerweise einen Überblick über verfügbare Komponentenbibliotheken. Das Spektrum reicht von Open Source bis kommerziell. Von vielen kommerziellen Angeboten stehen jedoch auch kostenfreie Testversionen zur Verfügung, beziehungsweise die Bibliotheken sind unter bestimmten Bedingungen – in der Regel bei nicht oder nur eingeschränkt kommerzieller Nutzung – kostenfrei. Sehr häufig gibt es auch Test-Applikationen, welche die Verwendung der UI-Komponenten demonstrieren. Bei unseren Recherchen haben wir die folgenden interessanten Bibliotheken gefunden:

Listing 1: Login-Formular mit Radzen-Komponente

&lt;span class="hljs-keyword"&gt;@page&lt;/span&gt; &lt;span class="hljs-string"&gt;"/radzenTest"&lt;/span&gt; &lt;br/&gt;&amp;lt;h3&amp;gt;RadzenTest&amp;lt;/h3&amp;gt; &lt;br/&gt;&lt;br/&gt;&amp;lt;div class=&lt;span class="hljs-string"&gt;"my-5"&lt;/span&gt;&amp;gt; &lt;br/&gt;  &amp;lt;RadzenCard&amp;gt; &lt;br/&gt;    &amp;lt;RadzenLogin AllowRegister=&lt;span class="hljs-string"&gt;"true"&lt;/span&gt; &lt;br/&gt;        AllowResetPassword=&lt;span class="hljs-string"&gt;"true"&lt;/span&gt; &lt;br/&gt;      LoginText=&lt;span class="hljs-string"&gt;"Einloggen"&lt;/span&gt; UserText=&lt;span class="hljs-string"&gt;"Benutzername"&lt;/span&gt; &lt;br/&gt;        PasswordText=&lt;span class="hljs-string"&gt;"Passwort"&lt;/span&gt; &lt;br/&gt;      UserRequired=&lt;span class="hljs-string"&gt;"Benutzername erforderlich"&lt;/span&gt; &lt;br/&gt;      PasswordRequired=&lt;span class="hljs-string"&gt;"Passwort erforderlich"&lt;/span&gt; &lt;br/&gt;      RegisterText=&lt;span class="hljs-string"&gt;"Registrieren"&lt;/span&gt; &lt;br/&gt;      RegisterMessageText=&lt;span class="hljs-string"&gt;"Sie haben noch keinen &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-string"&gt;        Account?"&lt;/span&gt; &lt;br/&gt;      ResetPasswordText=&lt;span class="hljs-string"&gt;"Passwort zurücksetzen"&lt;/span&gt; &lt;br/&gt;      Style=&lt;span class="hljs-string"&gt;"margin-bottom: 20px;"&lt;/span&gt; /&amp;gt; &lt;br/&gt;  &amp;lt;/RadzenCard&amp;gt; &lt;br/&gt;&amp;lt;/div&amp;gt; &lt;br/&gt;&lt;br/&gt;&lt;span class="hljs-variable"&gt;@code&lt;/span&gt; { &lt;br/&gt;}

Radzen Blazor Components [4]: Es handelt sich um einen Satz von mehr als 60 nativen Blazor-UI-Steuerelementen. Die Komponenten können sowohl für Blazor-Server- als auch für Blazor-WebAssembly-Apps eingesetzt werden. Die Bibliothek ist Open Source und steht auch für einen kommerziellen Einsatz zur Verfügung. Die Palette der UI-Komponenten deckt einen Großteil der üblichen Anforderungen moderner Webapplikationen ab. Enthalten sind Basiskomponenten wie Button, Image, Menu und ProgressBar, aber auch leistungsfähige DataGridControls, HTML-Editoren, Chart-Elemente, Elemente zur Formulargestaltung und vieles mehr.In der Dokumentation auf der Webseite findet man die Hinweise für die Installation beziehungsweise die Verwendung im eigenen Projekt. Die Dokumentation zu den einzelnen Komponenten beinhaltet eine Live-Vorschau. Mit deren Hilfe lässt sich direkt die Eignung der Komponente für das eigene Projekt beurteilen. Am Beispiel einer Chart-Komponente sind in Bild 1 Ansicht und Quellcode dargestellt. Der Hersteller bietet darüber hinaus ein visuelles Design-Tool (kommerziell) zur Gestaltung des User Interface für datengebundene Business-Webapplikationen auf der Basis von Blazor und Angular. Dabei wird gemäß den Angaben auf der Webseite der gesamte Lebenszyklus einer Webapplikation, vom Entwurf der Benutzeroberfläche bis hin zum Deployment, unterstützt. Damit haben wir es mit einem RAD-Tool für das Web Development zu tun. Uns interessieren hier jedoch die Blazor-Komponenten für den Einsatz in eigenen Projekten.

Der bekannte Hersteller Syncfusion [5] bietet auch für Webapplikationen auf der Basis von Blazor ein umfassendes Set von Komponenten für die Gestaltung des User Interface. Auch hier ist eine Nutzung der Komponenten in beiden Blazor-App-Typen (Server und WebAssembly) möglich. Neben kostenpflichtigen Lizenzen steht auch die Community-Lizenz zur Verfügung, die eine eingeschränkte kommerzielle Nutzung erlaubt. Damit ist dieses Set an Komponenten ideal für den Einstieg in die Welt der Blazor-Apps. Die Palette der angebotenen User-Interface-Komponenten deckt auch hier das gesamte Spektrum ab und ist mit über 70 Komponenten ebenfalls sehr umfangreich (Bild 2). Darunter finden sich auch sehr funktionsreiche Komponenten, wie zum Beispiel ein komplettes Kanban-Board (Bild 3). Hier wird schnell klar, welchen Vorteil der Einsatz von fertigen Komponenten für das User Interface bietet.

Neben der Einbindung der Bibliotheken in das eigene Blazor-Projekt, etwa über NuGet, ist auch der individuelle Lizenz-Key zu hinterlegen. Die Dokumentation gibt dazu entsprechende Auskunft.Auch die Komponentenanbieter DevExpress [6] und Telerik [7] unterstützen mit ihren UI-Komponenten inzwischen das Web-Framework Blazor. Beide Anbieter stellen jeweils ein umfassendes Set an Komponenten (Telerik mehr als 75; DevExpress über 35) zur Verfügung. Ein Test kann auf der Basis von Trial-Versionen durchgeführt werden.Erwähnen möchten wir ebenso MatBlazor [8]. Es handelt sich um kein kommerzielles Projekt. Die Komponenten werden kostenfrei zur Verfügung gestellt. MatBlazor basiert auf Material Design. Die Komponentenpalette ist auch hier umfangreich und umfasst primär Elemente für klassische datengetriebene Oberflächen (Buttons, Dialoge, DataTable et cetera). Das Design ist schlicht und lässt sich über Themen im Kontext von Material Design anpassen.Bei BlazorStrap [9] handelt es sich um ein UI-Framework für Blazor, welches sich auf Bootstrap konzentriert. Es werden die typischen UI-Komponenten mit Bootstrap-Design bereitgestellt. Die Bibliothek kann kostenfrei genutzt werden. Ebenfalls auf Material Design basiert MudBlazor [10]. Es werden Komponenten für Blazor Server und Blazor WebAssembly angeboten. Die Bibliothek steht quelloffen auf GitHub zur Verfügung. Die Palette an Komponenten umfasst ebenso die üblichen Controls. BlazorFluentUI [11] setzt entgegen vielen anderen Bibliotheken auf den Fluent-Design-Ansatz.Keine Komponentenbibliothek im eigentlichen Sinne ist Blazor Extensions[12]. Dennoch lohnt sich ein Blick auf diese Erweiterungen. Für die Gestaltung des User Interface findet sich dort die Blazor-Extension Canvas, welche einen Wrapper für das HTML5-Canvas-Element bietet. Diese Erweiterung steht für die beiden Anwendungstypen Blazor-Server-Apps und Blazor-WebAssembly-Apps zur Verfügung. Man nutzt sie für Webapplikationen mit 2D- oder 3D-Grafiken. Der Wrapper für Blazor unterstützt sowohl Canvas 2D als auch WebGL (3D).Diese Liste der Bibliotheken ist nicht vollständig, sie sollte jedoch bereits einen guten Überblick über die vielfältigen Optionen zur Gestaltung der Benutzeroberfläche mit Komponenten für Blazor-Apps bieten. Kommen wir nun zur praktischen Umsetzung anhand einiger Beispiele.

Ein User Interface mit Radzen

Wir werden uns nun konkret die Arbeit mit vordefinierten UI-Komponenten ansehen. Dazu wollen wir in einem ersten Schritt die Komponenten von Radzen verwenden. Sie benötigen dafür eine Test-Applikation. Erstellen Sie diese über den Assistenten von Visual Studio oder verwenden Sie unsere Vorlage. Fügen Sie eine neue Seite hinzu, um dann testweise Inhalte für das User Interface zu erstellen. Wir haben diese Seite RadzenTest.razor genannt. Kommen wir nun dazu, wie man die Komponenten aus der Radzen-Bibliothek nutzt. Dazu sind die folgenden Schritte notwendig:

Package hinzufügen: Hinzufügen des Pakets Radzen.Blazor über NuGet in das Projekt. Das kann über die Kommandozeile mit dotnet add package Radzen.Blazor oder aber komfortabel über den Package-Manager von Visual Studio erfolgen.
Importieren der Namensräume: Fügen Sie die beiden using-Anweisungen@using Radzen und @using Radzen.Blazor der Datei _Imports.razor aus dem Root-Verzeichnis der Applikation hinzu.
Thema hinzufügen: Hier müssen wir unterscheiden, ob wir eine serverseitige oder eine clientseitige Blazor-App erstellen. Bei einer serverseitigen App editieren wir die Datei _Host.cshtml; bei einer clientseitigen App ergänzen wir die Datei wwwroot/index.html um die folgende CSS-Datei: <link rel=“stylesheet“ href=“_content/Radzen.Blazor/css/default-base.css“>. Damit stellen wir sicher, dass die Bibliothek das richtige Styling und Design verwendet.
Einbindung des JavaScript-Verweises: Auch hier unterscheiden wir zwischen serverseitiger oder clientseitiger Blazor-App. Das heißt, dass wir entweder erneut die Datei _Host.cshtml oder aber die Datei wwwroot/index.html jeweils um den folgenden Eintrag ergänzen: <script src=“_content/Radzen.Blazor/Radzen.Blazor.js“></script>

Nach diesen Schritten können wir die Komponenten aus der Bibliothek bereits nutzen. Wir haben dabei eine große Auswahl (Bild 4). Öffnen Sie eine Razor-Page und probieren Sie ein Login-Formular aus, wie wir es in zahlreichen Applikationen einsetzen. Eine fertige Komponente <RadzenLogin\> steht zur Verfügung, die wir wiederum in eine <RadzenCard\>-Komponente einbetten. Das sieht dann wie folgt aus:

&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"my-5"</span>&gt; 
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">RadzenCard</span>&gt;</span> </span>
<span class="xml">    <span class="hljs-tag">&lt;<span class="hljs-name">RadzenLogin</span> <span class="hljs-attr">AllowRegister</span>=</span></span>
<span class="xml"><span class="hljs-tag">      <span class="hljs-string">"false"</span> </span></span>
<span class="xml"><span class="hljs-tag">      <span class="hljs-attr">AllowResetPassword</span>=<span class="hljs-string">"false"</span> </span></span>
<span class="xml"><span class="hljs-tag">      <span class="hljs-attr">Style</span>=<span class="hljs-string">"margin-bottom: </span></span></span>
<span class="xml"><span class="hljs-tag"><span class="hljs-string">      20px;"</span> /&gt;</span> </span>
<span class="xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">RadzenCard</span>&gt;</span> </span>
<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>

Das umschließende <div\>-Element dient als Container, damit wir das Login-Formular entsprechend im Layout ausrichten können. Wenn Sie die App starten, bekommen Sie bereits ein Standard-Login-Formular. Dieses lässt sich über die Properties der Komponente nach unseren Wünschen anpassen. Die Dokumentation gibt Auskunft, welche Optionen wir haben. Das Login-Formular von Radzen macht die Properties und Events gemäß Bild 5 nach außen verfügbar [13].

Mit diesen Informationen können wir unser Login-Formular nunmehr wunschgemäß anpassen, zum Beispiel hinsichtlich der angezeigten Texte. Listing 1 zeigt den Quellcode unserer Komponente. Das Ergebnis ist in Bild 6 dargestellt.

Listing 1: Login-Formular mit Radzen-Komponente

&lt;span class="hljs-keyword"&gt;@page&lt;/span&gt; &lt;span class="hljs-string"&gt;"/radzenTest"&lt;/span&gt; &lt;br/&gt;&amp;lt;h3&amp;gt;RadzenTest&amp;lt;/h3&amp;gt; &lt;br/&gt;&lt;br/&gt;&amp;lt;div class=&lt;span class="hljs-string"&gt;"my-5"&lt;/span&gt;&amp;gt; &lt;br/&gt;  &amp;lt;RadzenCard&amp;gt; &lt;br/&gt;    &amp;lt;RadzenLogin AllowRegister=&lt;span class="hljs-string"&gt;"true"&lt;/span&gt; &lt;br/&gt;        AllowResetPassword=&lt;span class="hljs-string"&gt;"true"&lt;/span&gt; &lt;br/&gt;      LoginText=&lt;span class="hljs-string"&gt;"Einloggen"&lt;/span&gt; UserText=&lt;span class="hljs-string"&gt;"Benutzername"&lt;/span&gt; &lt;br/&gt;        PasswordText=&lt;span class="hljs-string"&gt;"Passwort"&lt;/span&gt; &lt;br/&gt;      UserRequired=&lt;span class="hljs-string"&gt;"Benutzername erforderlich"&lt;/span&gt; &lt;br/&gt;      PasswordRequired=&lt;span class="hljs-string"&gt;"Passwort erforderlich"&lt;/span&gt; &lt;br/&gt;      RegisterText=&lt;span class="hljs-string"&gt;"Registrieren"&lt;/span&gt; &lt;br/&gt;      RegisterMessageText=&lt;span class="hljs-string"&gt;"Sie haben noch keinen &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-string"&gt;        Account?"&lt;/span&gt; &lt;br/&gt;      ResetPasswordText=&lt;span class="hljs-string"&gt;"Passwort zurücksetzen"&lt;/span&gt; &lt;br/&gt;      Style=&lt;span class="hljs-string"&gt;"margin-bottom: 20px;"&lt;/span&gt; /&amp;gt; &lt;br/&gt;  &amp;lt;/RadzenCard&amp;gt; &lt;br/&gt;&amp;lt;/div&amp;gt; &lt;br/&gt;&lt;br/&gt;&lt;span class="hljs-variable"&gt;@code&lt;/span&gt; { &lt;br/&gt;}

Als zweites Beispiel sehen wir uns noch den Einbau eines Menüs an. Dieses wird insbesondere in Applikationen benötigt, die eine dokumentenbasierte Interaktion (Datei öffnen, Element hinzufügen, Daten exportieren et cetera) umsetzen. Ein solches Anwendungsmenü gab es nicht nur in früheren Desktop-Applikationen, sondern man kann es auch in Webapplikationen sinnvoll verwenden. Das Vorhaben gelingt leichtgewichtig mithilfe der Komponente Radzen Blazor Menu. Ein Menü besteht hier aus einzelnen MenuItems, welche auch geschachtelt (Untermenüs) werden können. Die Eigenschaften des gesamten Menüs (Menu) und der einzelnen Einträge (MenuItems) zeigt Bild 7. Die Verwendung der Komponente ist dann denkbar einfach und erinnert in großen Teilen an den Aufbau von Menüs mittels XAML-Dialekt in Windows-Applikationen (WPF, UWP, Win UI). Listing 2 zeigt das Vorgehen. Für die MenuItem-Elemente definieren wir die Text- und die Icon-Eigenschaft. Für die Icons greifen wir auf die Material-Icons von Google zurück, die bereits im Projekt verfügbar sind. Unter [14] können Sie das passende Icon und den zugehörigen Namen auswählen (Bild 8).

Listing 2: Ein Menü mittels Radzen-Komponente

&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenu&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"File"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Neu"&lt;/span&gt; &lt;span class="hljs-attr"&gt;Icon&lt;/span&gt;=&lt;span class="hljs-string"&gt;"add"&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;br/&gt;      &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Öffnen"&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-tag"&gt;      &lt;span class="hljs-attr"&gt;Icon&lt;/span&gt;=&lt;span class="hljs-string"&gt;"open_in_new"&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Speichern"&lt;/span&gt; &lt;span class="hljs-attr"&gt;Icon&lt;/span&gt;=&lt;span class="hljs-string"&gt;"save"&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;br/&gt;      &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Bearbeiten"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Kopieren"&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-tag"&gt;      &lt;span class="hljs-attr"&gt;Icon&lt;/span&gt;=&lt;span class="hljs-string"&gt;"content_copy"&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Ausschneiden"&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-tag"&gt;      &lt;span class="hljs-attr"&gt;Icon&lt;/span&gt;=&lt;span class="hljs-string"&gt;"content_cut"&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Einfügen"&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-tag"&gt;      &lt;span class="hljs-attr"&gt;Icon&lt;/span&gt;=&lt;span class="hljs-string"&gt;"content_paste"&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenu&lt;/span&gt;&amp;gt;&lt;/span&gt;

Es stellt sich nun noch die Frage, wie man auf einen Mausklick auf ein MenuItem-Element reagiert. Die Komponente besitzt keinen eigenen Click-Event. Hinweis: Verwechseln Sie nicht die JavaScript-Events mit den Events der Razor-Komponenten (Bild 9). Ein JavaScript-@onclick-Event gibt es, dieses nutzen wir jedoch nicht, denn wir wollen die Programmlogik mit C# und der Razor-Syntax umsetzen und nicht mit JavaScript. Vielmehr nutzen wir den Click-Event der <Menu/>-Komponente und ordnen diesem Event einen Ereignishandler zu. Innerhalb der Methode zur Behandlung des Ereignisses können wir dann über eine einfache if-Abfrage herausbekommen, welcher Menüpunkt vom Nutzer angeklickt wurde. Sie finden den zugehörigen Quellcode in Listing 3.

Listing 3: Ein Menü mittels Radzen-Komponente und Ereignisbehandlung

&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenu&lt;/span&gt; &lt;span class="hljs-attr"&gt;Click&lt;/span&gt;=&lt;span class="hljs-string"&gt;"MenuClick"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"File"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Neu"&lt;/span&gt; &lt;span class="hljs-attr"&gt;Icon&lt;/span&gt;=&lt;span class="hljs-string"&gt;"add"&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;      &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Öffnen"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;      &lt;span class="hljs-attr"&gt;Icon&lt;/span&gt;=&lt;span class="hljs-string"&gt;"open_in_new"&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Speichern"&lt;/span&gt; &lt;span class="hljs-attr"&gt;Icon&lt;/span&gt;=&lt;span class="hljs-string"&gt;"save"&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;      &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Bearbeiten"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;    ... &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenuItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenMenu&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;br/&gt;&lt;span class="xml"&gt;@code &lt;/span&gt;&lt;span class="hljs-template-variable"&gt;{ &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-template-variable"&gt;  void MenuClick(MenuItemEventArgs e) &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-template-variable"&gt;  { &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-template-variable"&gt;    &lt;span class="hljs-keyword"&gt;if&lt;/span&gt; (e.Text == "Neu") &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-template-variable"&gt;    { &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-template-variable"&gt;      // Aktion für Neu &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-template-variable"&gt;    }&lt;/span&gt;&lt;span class="xml"&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;    else if (e.Text == "Speichern") &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;    &lt;/span&gt;&lt;span class="hljs-template-variable"&gt;{ &lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-template-variable"&gt;      // Aktion für Speichern &lt;/span&gt;&lt;br/&gt;&lt;br/&gt;&lt;span class="hljs-template-variable"&gt;    }&lt;/span&gt;&lt;span class="xml"&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;  } &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;} &lt;/span&gt;

Ein User Interface mit Syncfusion

Als zweites Beispiel für die Arbeit mit Komponenten betrachten wir die Arbeit mit der Blazor-Bibliothek von Syncfusion. Auch hier starten wir wieder mit einem neuen App-Gerüst und fügen eine neue Page in Form einer Razor-Komponente hinzu. Wir haben diese vereinfachend SyncfusionTest genannt. Ergänzen Sie diese Komponente auch im Navigationsmenü, also in der Datei NavMenu.razor. Hier sehen Sie nochmals den Code:

&lt;NavLink <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"nav-link"</span> href=<span class="hljs-string">"syncfusiontest"</span>&gt; 
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"oi oi-plus"</span> <span class="hljs-attr">aria</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">"true"</span>&gt;</span> </span>
<span class="xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>Syncfusion Test 
&lt;<span class="hljs-regexp">/NavLink&gt; </span>

Danach kann es schon an die Einbindung der Bibliotheken für die Syncfusion-Komponenten gehen. Dazu werden mehrere Optionen angeboten. Zum einem über ein Installationsprogramm; dabei werden die Bibliotheksdateien und Beispiele kopiert. Gleichzeitig erfolgt auch eine Einbindung in Visual Studio mit eigenen Vorlagen. Diese Variante gibt es als Offline- und als Web-Installer. Zum anderen gibt es auch die Möglichkeit, die notwendigen Bibliotheken über den Paketmanager NuGet in das betreffende Projekt aufzunehmen.Gehen wir den typischen Weg über die Paketinstallation. Sie brauchen keine eigenen Paketquellen für Syncfusion. Die Bibliotheken stehen auf dem Server von NuGet zur Verfügung. Wir müssen erneut danach unterscheiden, ob wir eine Blazor-WebAssembly-App bauen oder ob wir das Hosting-Modell Blazor Server Side App verwenden. Die folgenden Schritte integrieren die Syncfusion-Komponenten in eine Blazor-WebAssembly-App:

NuGet-Package(s) hinzufügen: Fügen wir die Bibliothek Syncfusion.Blazor hinzu. Diese beinhaltet alle angebotenen Komponenten von Syncfusion. Es gibt auch einzelne NuGet-Packages, wenn man nur die eine oder andere Komponente benötigt, also zum Beispiel Syncfusion.Blazor.Calendars (Kalender) oder Syncfusion.Blazor.Kanban (Kanban-Board). Informationen zu den einzelnen NuGet-Packages findet man in der Dokumentation bei den Komponenten beziehungsweise unter [15].
Thema ergänzen: Danach ergänzen wir den Verweis auf das Bootstrap4-Thema in der Datei ~/wwwroot/index.html wie folgt:

<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> 
  ... 
  <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"_content/Syncfusion.Blazor.Themes/</span></span>
<span class="hljs-tag"><span class="hljs-string">    bootstrap4.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> /&gt;</span> 
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>

Syncfusion Service registrieren: Das geschieht in der Datei
~/Program.cs mit builder.Services.AddSyncfusionBlazor();
Lizenzierungs-Key einfügen: Den Lizenz-Key bekommen Sie von Syncfusion online nach einer Registrierung und der Auswahl der betreffenden Komponentenbibliothek (vergleiche Bild 10). Den Lizenz-Key ergänzen Sie ebenfalls in der Datei Program.cs in der Main-Methode mit dem Eintrag Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(“Key“);

Bibliothek importieren: Das geschieht über die @using-Anweisung in der Datei: ~/_Imports.razor durch Einbindung der Namespaces, zum Beispiel:

<span class="hljs-variable">@using</span> Syncfusion.Blazor.Buttons 
<span class="hljs-variable">@using</span> Syncfusion.Blazor.Calendars

Mit diesen Schritten sind wir auch schon durch, das heißt, wir können die Komponenten in der App verwenden. Die relevanten Codeabschnitte haben wir in Listing 4 zusammengefasst.

Listing 4: Syncfusion-Komponente in Blazor-WebAssembly-App verwenden

Datei: index.html &lt;br/&gt;&lt;span class="hljs-meta"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt; &lt;br/&gt;&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;html&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;&lt;br/&gt;&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;head&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;meta&lt;/span&gt; &lt;span class="hljs-attr"&gt;charset&lt;/span&gt;=&lt;span class="hljs-string"&gt;"utf-8"&lt;/span&gt; /&amp;gt;&lt;/span&gt; &lt;br/&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;meta&lt;/span&gt; &lt;span class="hljs-attr"&gt;name&lt;/span&gt;=&lt;span class="hljs-string"&gt;"viewport"&lt;/span&gt; &lt;span class="hljs-attr"&gt;content&lt;/span&gt;=&lt;span class="hljs-string"&gt;"width=device-width, &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-tag"&gt;&lt;span class="hljs-string"&gt;    initial-scale=1.0, maximum-scale=1.0, &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-tag"&gt;&lt;span class="hljs-string"&gt;    user-scalable=no"&lt;/span&gt; /&amp;gt;&lt;/span&gt; &lt;br/&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;title&lt;/span&gt;&amp;gt;&lt;/span&gt;MyWebApp&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;title&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;  ... &lt;br/&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;link&lt;/span&gt; &lt;span class="hljs-attr"&gt;href&lt;/span&gt;=&lt;span class="hljs-string"&gt;"_content/Syncfusion.Blazor/styles/&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="hljs-tag"&gt;&lt;span class="hljs-string"&gt;    bootstrap4.css"&lt;/span&gt; &lt;span class="hljs-attr"&gt;rel&lt;/span&gt;=&lt;span class="hljs-string"&gt;"stylesheet"&lt;/span&gt; /&amp;gt;&lt;/span&gt; &lt;br/&gt;&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;head&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;&lt;br/&gt;... &lt;br/&gt;&lt;br/&gt;&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;html&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;br/&gt;&lt;br/&gt;Datei: Program.cs &lt;br/&gt;public static async Task Main(string[] args) &lt;br/&gt;{ &lt;br/&gt;  // Register Syncfusion license &lt;br/&gt;  Syncfusion.Licensing.SyncfusionLicenseProvider.&lt;br/&gt;    RegisterLicense("Key"); &lt;br/&gt;  var builder = &lt;br/&gt;    WebAssemblyHostBuilder.CreateDefault(args); &lt;br/&gt;  builder.RootComponents.Add&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;App&lt;/span&gt;&amp;gt;&lt;/span&gt;("#app"); &lt;br/&gt;  builder.Services.AddScoped(sp =&amp;gt; new HttpClient &lt;br/&gt;    { &lt;br/&gt;      BaseAddress = &lt;br/&gt;        new Uri(builder.HostEnvironment.BaseAddress) &lt;br/&gt;    }); &lt;br/&gt;&lt;br/&gt;  builder.Services.AddSyncfusionBlazor(); &lt;br/&gt;  await builder.Build().RunAsync(); &lt;br/&gt;} &lt;br/&gt;&lt;br/&gt;Datei ~/_Imports.razor &lt;br/&gt;@using System.Net.Http &lt;br/&gt;... &lt;br/&gt;@using Syncfusion.Blazor.Buttons &lt;br/&gt;@using Syncfusion.Blazor.Calendars

Die Verwendung der einzelnen Komponenten in einer Page ist dann denkbar einfach, zum Beispiel ein Button und eine Kalender-Komponente:

<span class="hljs-tag">&lt;<span class="hljs-name">SfButton</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">SfButton</span>&gt;</span> 
<span class="hljs-tag">&lt;<span class="hljs-name">SfCalendar</span> <span class="hljs-attr">TValue</span>=<span class="hljs-string">"DateTime"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">SfCalendar</span>&gt;</span>

Diese Zeilen werden dann an geeigneter Stelle einer Razor-Komponente hinzugefügt. Ein minimalistisches Beispiel mit Datenbindung zeigt Listing 5. Das Ergebnis finden Sie in Bild 11.

Listing 5: Syncfusion-Komponenten einbinden

@page &lt;span class="hljs-string"&gt;"/syncfusiontest"&lt;/span&gt; &lt;br/&gt;&amp;lt;h3&amp;gt;SyncfusionTest&amp;lt;/h3&amp;gt; &lt;br/&gt;&lt;br/&gt;&amp;lt;SfButton&amp;gt;Button&amp;lt;/SfButton&amp;gt; &lt;br/&gt;&lt;br/&gt;&amp;lt;SfCalendar TValue=&lt;span class="hljs-string"&gt;"DateTime?"&lt;/span&gt; Value=&lt;span class="hljs-string"&gt;"@DateValue"&lt;/span&gt;&amp;gt;&lt;br/&gt;  &amp;lt;/SfCalendar&amp;gt; &lt;br/&gt;&lt;br/&gt;@code{ &lt;br/&gt;  &lt;span class="hljs-keyword"&gt;public&lt;/span&gt; DateTime? &lt;span class="hljs-built_in"&gt;DateValue&lt;/span&gt; { &lt;span class="hljs-keyword"&gt;get&lt;/span&gt;; &lt;span class="hljs-keyword"&gt;set&lt;/span&gt;; } = &lt;span class="hljs-keyword"&gt;new&lt;/span&gt; &lt;br/&gt;    DateTime(DateTime.&lt;span class="hljs-built_in"&gt;Now&lt;/span&gt;.&lt;span class="hljs-built_in"&gt;Year&lt;/span&gt;, DateTime.&lt;span class="hljs-built_in"&gt;Now&lt;/span&gt;.&lt;span class="hljs-built_in"&gt;Month&lt;/span&gt;, &lt;br/&gt;    &lt;span class="hljs-number"&gt;28&lt;/span&gt;); &lt;br/&gt;&lt;br/&gt;  &lt;span class="hljs-keyword"&gt;public&lt;/span&gt; void UpdateValue() &lt;br/&gt;  { &lt;br/&gt;    &lt;span class="hljs-built_in"&gt;DateValue&lt;/span&gt; = DateTime.&lt;span class="hljs-built_in"&gt;Now&lt;/span&gt;; &lt;br/&gt;  } &lt;br/&gt;}

Auch mit Syncfusion probieren wir eine etwas umfassendere Komponente aus, beispielsweise die Kanban-Komponente. Ein komplettes Kanban-Board programmiert man nicht mal so nebenher, daher lohnt sich auch hier der Einsatz eines fertigen Bausteins.Listing 6 zeigt die Einbindung der Kanban-Komponente aus Syncfusion und Bild 12 das Ergebnis. Der Dokumentation können Sie weitere Optionen zur Erweiterung entnehmen, wie Darstellung einer Swimlane, Hinzufügen einer Sortierfunktion für die Karten, eine Drag-and-drop-Funktion und so weiter.

Listing 6: Kanban-Board mit Syncfusion-Komponente

&lt;span class="hljs-keyword"&gt;@page&lt;/span&gt; &lt;span class="hljs-string"&gt;"/syncfusiontest"&lt;/span&gt; &lt;br/&gt;&amp;lt;h3&amp;gt;SyncfusionTest&amp;lt;/h3&amp;gt; &lt;br/&gt;&lt;span class="hljs-variable"&gt;@using&lt;/span&gt; Syncfusion.Blazor.Kanban &lt;br/&gt;&amp;lt;SfKanban TValue=&lt;span class="hljs-string"&gt;"TasksModel"&lt;/span&gt;&amp;gt; &lt;br/&gt;  &amp;lt;KanbanColumns&amp;gt; &lt;br/&gt;    &amp;lt;KanbanColumn HeaderText=&lt;span class="hljs-string"&gt;"Neu"&lt;/span&gt; KeyField=&lt;br/&gt;      &lt;span class="hljs-string"&gt;"@(new List&amp;lt;string&amp;gt;() {"&lt;/span&gt;Neu&lt;span class="hljs-string"&gt;"})"&lt;/span&gt;&amp;gt;&amp;lt;/KanbanColumn&amp;gt; &lt;br/&gt;    &amp;lt;KanbanColumn HeaderText=&lt;span class="hljs-string"&gt;"In Arbeit"&lt;/span&gt; KeyField=&lt;br/&gt;      &lt;span class="hljs-string"&gt;"@(new List&amp;lt;string&amp;gt;() {"&lt;/span&gt;In Arbeit&lt;span class="hljs-string"&gt;"})"&lt;/span&gt;&amp;gt;&lt;br/&gt;      &amp;lt;/KanbanColumn&amp;gt; &lt;br/&gt;    &amp;lt;KanbanColumn HeaderText=&lt;span class="hljs-string"&gt;"Prüfung"&lt;/span&gt; KeyField=&lt;br/&gt;      &lt;span class="hljs-string"&gt;"@(new List&amp;lt;string&amp;gt;() {"&lt;/span&gt;Prüfung&lt;span class="hljs-string"&gt;"})"&lt;/span&gt;&amp;gt;&lt;br/&gt;      &amp;lt;/KanbanColumn&amp;gt; &lt;br/&gt;    &amp;lt;KanbanColumn HeaderText=&lt;span class="hljs-string"&gt;"Beendet"&lt;/span&gt; KeyField=&lt;br/&gt;      &lt;span class="hljs-string"&gt;"@(new List&amp;lt;string&amp;gt;() {"&lt;/span&gt;Beendet&lt;span class="hljs-string"&gt;"})"&lt;/span&gt;&amp;gt;&lt;br/&gt;      &amp;lt;/KanbanColumn&amp;gt; &lt;br/&gt;  &amp;lt;/KanbanColumns&amp;gt; &lt;br/&gt;&amp;lt;/SfKanban&amp;gt; &lt;br/&gt;&lt;br/&gt;&lt;span class="hljs-variable"&gt;@code&lt;/span&gt; { &lt;br/&gt;  &lt;span class="hljs-selector-tag"&gt;public&lt;/span&gt; &lt;span class="hljs-selector-tag"&gt;class&lt;/span&gt; &lt;span class="hljs-selector-tag"&gt;TasksModel&lt;/span&gt; &lt;br/&gt;  { &lt;br/&gt;    &lt;span class="hljs-selector-tag"&gt;public&lt;/span&gt; &lt;span class="hljs-selector-tag"&gt;string&lt;/span&gt; &lt;span class="hljs-selector-tag"&gt;Id&lt;/span&gt; { &lt;span class="hljs-selector-tag"&gt;get&lt;/span&gt;; &lt;span class="hljs-selector-tag"&gt;set&lt;/span&gt;; } &lt;br/&gt;    &lt;span class="hljs-selector-tag"&gt;public&lt;/span&gt; &lt;span class="hljs-selector-tag"&gt;string&lt;/span&gt; &lt;span class="hljs-selector-tag"&gt;Title&lt;/span&gt; { &lt;span class="hljs-selector-tag"&gt;get&lt;/span&gt;; &lt;span class="hljs-selector-tag"&gt;set&lt;/span&gt;; } &lt;br/&gt;    &lt;span class="hljs-selector-tag"&gt;public&lt;/span&gt; &lt;span class="hljs-selector-tag"&gt;string&lt;/span&gt; &lt;span class="hljs-selector-tag"&gt;Status&lt;/span&gt; { &lt;span class="hljs-selector-tag"&gt;get&lt;/span&gt;; &lt;span class="hljs-selector-tag"&gt;set&lt;/span&gt;; } &lt;br/&gt;    &lt;span class="hljs-selector-tag"&gt;public&lt;/span&gt; &lt;span class="hljs-selector-tag"&gt;string&lt;/span&gt; &lt;span class="hljs-selector-tag"&gt;Summary&lt;/span&gt; { &lt;span class="hljs-selector-tag"&gt;get&lt;/span&gt;; &lt;span class="hljs-selector-tag"&gt;set&lt;/span&gt;; } &lt;br/&gt;  } &lt;br/&gt;}

Empfehlung

Halten wir an dieser Stelle fest: Wir haben nahezu unendliche Optionen, um eine moderne und ansprechende Benutzeroberfläche mit Blazor zu erstellen. Jetzt gilt es, sich im „Dschungel“ der Möglichkeiten nicht zu verlaufen. Es braucht ein durchdachtes Konzept, wie man auch mit Blazor zu einem passenden User Interface kommt. Dabei stehen folgende Fragen im Mittelpunkt:

Was sind Meilensteine zum passenden User Interface?
Welche Bibliothek soll ich verwenden?
Kann ich Komponenten nach Belieben mischen?

Eine etablierte Vorgehensweise zu einem guten User Interface sollte mit einem möglichst leichtgewichtigen Prototyp starten. Dabei sind zuerst das grundsätzliche Layout der App, die Stilrichtung des Designs und so weiter festzulegen. Entwickler, die aus dem Desktop-Bereich wechseln, müssen hier durchaus umdenken. Auch wenn sich das Erscheinungsbild von Desktop-Anwendungen in der letzten Zeit umfassend geändert hat, folgen Layout und Design einer Webapplikation anderen Richtlinien. Hier gelten die Prinzipien „Content First“ und „Mobile First“.Ein erster Prototyp kann dabei mit einem leichtgewichtigen Zeichentool erstellt und zur Diskussion gestellt werden. Danach geht es darum, zu ermitteln, welche Komponenten für den Aufbau des User Interface benötigt werden. Diese Informationen sind die Basis für eine Vorauswahl der passenden Komponenten-Library.Bezüglich des Designs sollte man sich für eine Stilrichtung entscheiden, zum Beispiel Material Design oder Fluent Design (siehe Textkasten Material Design und Fluent Design). Ein Vermischen der beiden Stilrichtungen ist mit Ziel eines einheitlichen Designs zu vermeiden.

Quellcode auf GitHub

Den Quellcode zu den Beispielen des Artikels finden Sie auf dem GitHub-Account der Autoren in den Repositories unter [18], [19] und [20].

Mit einer Entscheidung für eine Komponentenbibliothek gilt es zu evaluieren, ob die Anforderungen an das User Interface gemäß dem erstellten Prototyp umsetzbar sind. Das kann zum Beispiel mithilfe kleiner „Wegwerf“-Apps geschehen. Ist eine Komponentenbibliothek als geeignet eingestuft, sollte das User Interface auf der Basis dieser Bibliothek möglichst durchgängig erstellt werden.Die Vorgehensweise möchten wir noch an einem Beispiel skizzieren. Es geht um die Entwicklung eines User Interface zur Verwaltung von Stamm- und Vertragsdaten von Dozierenden einer Bildungseinrichtung. Starten wir mit einem ersten Prototyp (Bild 13). Diesen gilt es schrittweise in eine Blazor-Komponente zu überführen.

Wir setzen eine neue Blazor-WebAssembly-App auf. Als Komponentenbibliothek verwenden wir erneut Radzen. Der Prototyp macht deutlich, dass wir ein Tabbed-Interface (Registerkarten) benötigen. Wir werden im Abschnitt Container fündig. Die Komponente lautet <RadzenTabs/>. Die Registerkarten sind Komponenten des Typs <RadzenTabsItem/>. In dem ersten Tab fügen wir dann das Datenformular ein. Die relevanten Teile des Quellcodes findet man in Listing 7. Das erste Ergebnis sehen Sie in Bild 14. Auf dieser Basis wird das User Interface schrittweise vervollständigt.

Listing 7: Ansatz eines User Interface mit Radzen

&lt;span class="xml"&gt;@page "/radzenTest" &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;h3&lt;/span&gt;&amp;gt;&lt;/span&gt;Dozenten&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;h3&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"row"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"col-7"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenTabs&lt;/span&gt; &lt;span class="hljs-attr"&gt;style&lt;/span&gt;=&lt;span class="hljs-string"&gt;"height: 880px"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;        &lt;span class="hljs-attr"&gt;RenderMode&lt;/span&gt;=&lt;span class="hljs-string"&gt;"TabRenderMode.Client"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;      &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;Tabs&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;        &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenTabsItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Stammdaten"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;          &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"container"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;            &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"row"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;              &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"col-md-5"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"row"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                    &lt;span class="hljs-attr"&gt;style&lt;/span&gt;=&lt;span class="hljs-string"&gt;"margin-top:10px"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"col-md-12"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;label&lt;/span&gt; &lt;span class="hljs-attr"&gt;for&lt;/span&gt;=&lt;span class="hljs-string"&gt;"salutation"&lt;/span&gt;&amp;gt;&lt;/span&gt;Wählen &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                      Sie eine Anrede:&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;label&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;select&lt;/span&gt; &lt;span class="hljs-attr"&gt;name&lt;/span&gt;=&lt;span class="hljs-string"&gt;"salutation"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                        &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"form-control"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                        &lt;span class="hljs-attr"&gt;id&lt;/span&gt;=&lt;span class="hljs-string"&gt;"salutation"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                      &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;option&lt;/span&gt; &lt;span class="hljs-attr"&gt;value&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Frau"&lt;/span&gt;&amp;gt;&lt;/span&gt;Frau&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                        &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;option&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                      &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;option&lt;/span&gt; &lt;span class="hljs-attr"&gt;value&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Herr"&lt;/span&gt;&amp;gt;&lt;/span&gt;Herr&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                        &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;option&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                    &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;select&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                  &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"row"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                    &lt;span class="hljs-attr"&gt;style&lt;/span&gt;=&lt;span class="hljs-string"&gt;"margin-top:10px"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"col-md-12"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;label&lt;/span&gt; &lt;span class="hljs-attr"&gt;for&lt;/span&gt;=&lt;span class="hljs-string"&gt;"firstName"&lt;/span&gt;&amp;gt;&lt;/span&gt;Vorname&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                      &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;label&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;input&lt;/span&gt; &lt;span class="hljs-attr"&gt;type&lt;/span&gt;=&lt;span class="hljs-string"&gt;"text"&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                      &lt;span class="hljs-string"&gt;"form-control"&lt;/span&gt; &lt;span class="hljs-attr"&gt;id&lt;/span&gt;=&lt;span class="hljs-string"&gt;"firstName"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                      &lt;span class="hljs-attr"&gt;placeholder&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Vorname hier &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;&lt;span class="hljs-string"&gt;                      eingeben"&lt;/span&gt; /&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                  &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"row"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                    &lt;span class="hljs-attr"&gt;style&lt;/span&gt;=&lt;span class="hljs-string"&gt;"margin-top:10px"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"col-md-12"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;label&lt;/span&gt; &lt;span class="hljs-attr"&gt;for&lt;/span&gt;=&lt;span class="hljs-string"&gt;"lastName"&lt;/span&gt;&amp;gt;&lt;/span&gt;Nachname&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                      &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;label&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;input&lt;/span&gt; &lt;span class="hljs-attr"&gt;type&lt;/span&gt;=&lt;span class="hljs-string"&gt;"text"&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                      &lt;span class="hljs-string"&gt;"form-control"&lt;/span&gt; &lt;span class="hljs-attr"&gt;id&lt;/span&gt;=&lt;span class="hljs-string"&gt;"lastName"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                      &lt;span class="hljs-attr"&gt;placeholder&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Nachname hier &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;&lt;span class="hljs-string"&gt;                      eingeben.."&lt;/span&gt; /&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                  &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;br/&gt;&lt;span class="xml"&gt;                &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"row"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                    &lt;span class="hljs-attr"&gt;style&lt;/span&gt;=&lt;span class="hljs-string"&gt;"margin-top:10px"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                  &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"col-md-12"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;label&lt;/span&gt; &lt;span class="hljs-attr"&gt;for&lt;/span&gt;=&lt;span class="hljs-string"&gt;"email"&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                      E-Mail-Adresse&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;label&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                    &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;input&lt;/span&gt; &lt;span class="hljs-attr"&gt;type&lt;/span&gt;=&lt;span class="hljs-string"&gt;"text"&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                      &lt;span class="hljs-string"&gt;"form-control"&lt;/span&gt; &lt;span class="hljs-attr"&gt;id&lt;/span&gt;=&lt;span class="hljs-string"&gt;"email"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                      &lt;span class="hljs-attr"&gt;placeholder&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Die E-Mail-Adresse &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;&lt;span class="hljs-string"&gt;                      bitte..."&lt;/span&gt; /&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;br/&gt;&lt;span class="xml"&gt;                  &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;              &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;              &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;div&lt;/span&gt; &lt;span class="hljs-attr"&gt;class&lt;/span&gt;=&lt;span class="hljs-string"&gt;"col-md-5"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;                &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenImage&lt;/span&gt; &lt;span class="hljs-attr"&gt;Path&lt;/span&gt;=&lt;span class="hljs-string"&gt;"img.png"&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;                  &lt;span class="hljs-attr"&gt;Style&lt;/span&gt;=&lt;span class="hljs-string"&gt;"width:250px"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenImage&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;              &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;            &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;            &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;        &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenTabsItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;        &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenTabsItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Akademisch"&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;          &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenTabsItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;        &lt;span class="hljs-tag"&gt;&amp;lt;&lt;span class="hljs-name"&gt;RadzenTabsItem&lt;/span&gt; &lt;span class="hljs-attr"&gt;Text&lt;/span&gt;=&lt;span class="hljs-string"&gt;"Vertrag"&lt;/span&gt;&amp;gt;&lt;/span&gt;  &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;          &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenTabsItem&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;      &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;Tabs&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;    &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;RadzenTabs&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;  &lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;span class="xml"&gt;&lt;span class="hljs-tag"&gt;&amp;lt;/&lt;span class="hljs-name"&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt; &lt;/span&gt;&lt;br/&gt;&lt;br/&gt;&lt;span class="xml"&gt;@code &lt;/span&gt;&lt;span class="hljs-template-variable"&gt;{ &lt;/span&gt;&lt;br/&gt;&lt;br/&gt;&lt;span class="hljs-template-variable"&gt;}&lt;/span&gt;&lt;span class="xml"&gt; &lt;/span&gt;

Fazit und Ausblick

Moderne User Interfaces sind für Web-Apps das A und O. Grundsätzlich bieten Webapplikationen hier alle Gestaltungsoptionen. Durch den Einsatz von Komponenten können sehr gute Ergebnisse mit vertretbarem Zeitaufwand erreicht werden. Weitere Features von Blazor stehen im abschließenden und letzten Teil unserer Artikelserie auf der Agenda.

Fussnoten

Olena Bochkor, Veikko Krypczyk, Mit .NET ins Web, Web-Apps mit Blazor, Teil 1, dotnetpro 5/2021, Seite 16 ff., http://www.dotnetpro.de/A2105BlazorLernen
Olena Bochkor, Veikko Krypczyk, Mit .NET ins Web, Web-Apps mit Blazor, Teil 2, dotnetpro 6/2021, Seite 65 ff., http://www.dotnetpro.de/A2106BlazorLernen
Olena Bochkor, Veikko Krypczyk, Mit .NET ins Web, Web-Apps mit Blazor, Teil 3, dotnetpro 7/2021, Seite 44 ff., http://www.dotnetpro.de/A2107BlazorLernen
Die Blazor Component Library bei Radzen, https://razor.radzen.com
Syncfusion, https://blazor.syncfusion.com
Blazor UI Components by DevExpress, https://www.devexpress.com/blazor
Telerik, https://www.telerik.com
MatBlazor, https://www.matblazor.com
BlazorStrap, https://blazorstrap.io
MudBlazor, https://mudblazor.com
BlazorFluentUI, https://github.com/BlazorFluentUI/BlazorFluentUI
Blazor Extensions, https://github.com/BlazorExtensions
Blazor Login Properties, https://www.radzen.com/documentation/blazor/login/#properties
Material Icons bei Google Fonts, https://fonts.google.com/icons
Individual NuGet packages for Syncfusion Blazor UI components, https://blazor.syncfusion.com/documentation/nuget-packages
Material Design, https://material.io/design
Fluent Design, https://www.microsoft.com/design/fluent
Beispielcode Radzen, https://github.com/veikkoEF/MyWebAppRadzen
Beispielcode Syncfusion, https://github.com/veikkoEF/MyWebAppSyncfusion
Beispielcode Tabbed Interface, https://github.com/veikkoEF/MyWebAppTabbedInterface

Neueste Beiträge

Data & Analytics

DWX hakt nach: Wie stellt man Daten besonders lesbar dar?

Dass das Design von Websites maßgeblich für die Lesbarkeit der Inhalte verantwortlich ist, ist klar. Das gleiche gilt aber auch für die Aufbereitung von Daten für Berichte. Worauf besonders zu achten ist, erklären Dr. Ina Humpert und Dr. Julia Norget.

3 Minuten

DWX Redaktion

27. Jun 2025

Mehr erfahren

UI/UX

DWX hakt nach: Wie gestaltet man intuitive User Experiences?

DWX hakt nach: Wie gestaltet man intuitive User Experiences? Intuitive Bedienbarkeit klingt gut – doch wie gelingt sie in der Praxis? UX-Expertin Vicky Pirker verrät auf der Developer Week, worauf es wirklich ankommt. Hier gibt sie vorab einen Einblick in ihre Session.

4 Minuten

DWX Redaktion

27. Jun 2025

Mehr erfahren

Artificial Intelligence

„Sieh die KI als Juniorentwickler“

CTO Christian Weyer fühlt sich jung wie schon lange nicht mehr. Woran das liegt und warum er keine Angst um seinen Job hat, erzählt er im dotnetpro-Interview.

15 Minuten

Christian Weyer

27. Jun 2025

Mehr erfahren

Miscellaneous

Das könnte Dich auch interessieren

UI/UX

UIs für Linux - Bedienoberflächen entwickeln mithilfe von C#, .NET und Avalonia

Es gibt viele UI-Frameworks für .NET, doch nur sehr wenige davon unterstützen Linux. Avalonia schafft als etabliertes Open-Source-Projekt Abhilfe.

16 Minuten

Roland König

16. Jun 2025

Project Management & Methodologies

Mythos Motivation - Teamentwicklung

Entwickler bringen Arbeitsfreude und Engagement meist schon von Haus aus mit. Diesen inneren Antrieb zu erhalten sollte für Führungskräfte im Fokus stehen.

13 Minuten

Uwe Vigenschow

19. Jan 2017

Testing & Quality

Bausteine guter Architektur - Entwurf und Entwicklung wartbarer Softwaresysteme, Teil 2

Code sauberer gestalten anhand von wenigen Patterns und Grundhaltungen.

6 Minuten

Bernhard Pichler

16. Jun 2025