Wie man Benutzeroberflächen mit Razor und Bootstrap in ASP.NET Core erstellt

In modernen Webanwendungen spielt die Erstellung und Handhabung von Benutzeroberflächen eine entscheidende Rolle. Bei der Entwicklung von ASP.NET Core MVC-Anwendungen ist Razor das Standard-Template-System, das es ermöglicht, Server-seitige Logik nahtlos in HTML-Elemente einzufügen. Razor bietet eine einfache Möglichkeit, dynamische Inhalte in statische Webseiten zu integrieren. Die Kombination aus Razor und Bootstrap bietet ein solides Fundament, um responsive und benutzerfreundliche Webseiten zu erstellen.

Ein weiterer wichtiger Bestandteil jeder Webanwendung ist die Benutzeroberfläche. Um eine benutzerfreundliche und ansprechende Oberfläche zu schaffen, wird häufig Razor verwendet. Razor ermöglicht es Entwicklern, HTML mit C#-Code zu kombinieren, um dynamische Inhalte zu erzeugen. Ein typisches Beispiel dafür ist das Arbeiten mit der „Index.cshtml“-Datei. Diese Datei enthält HTML und C#-Code, der beim Laden der Seite ausgeführt wird, um den Inhalt zu dynamisieren.

Ein wesentlicher Bestandteil von Razor ist die Verwendung von ViewData, um Daten zwischen der Controller- und der View-Ebene zu übergeben. Ein einfaches Beispiel ist die Übergabe des Titels der Webseite:

csharp
Copy code
@{
    ViewData["Title"] = "Startseite";
}

Das Layout von Seiten wird in ASP.NET Core über die _Layout.cshtml-Datei konfiguriert. Diese Datei enthält die grundlegende Struktur jeder Seite, einschließlich Header, Navigation und Body. Der Inhalt, der in verschiedenen Seiten angezeigt wird, wird durch den Aufruf von @RenderBody() in das Layout eingefügt, wodurch eine dynamische Generierung von HTML-Inhalten ermöglicht wird.

Neben Razor und dem MVC-Framework spielt Bootstrap eine wichtige Rolle in der Gestaltung moderner Webanwendungen. Bootstrap ist das weltweit populärste Framework für responsive und mobile-first Webseiten. Es kombiniert CSS-Stylesheets mit JavaScript-Bibliotheken, um interaktive und anpassbare Benutzeroberflächen zu erstellen. Bootstrap stellt vordefinierte Stile und Layout-Komponenten bereit, die es Entwicklern ermöglichen, ohne viel Aufwand ansprechende Benutzeroberflächen zu erstellen.

Die Breakpoints in Bootstrap sind wie folgt definiert:

• X-Small (<576px)

• Small (≥576px)

• Medium (≥768px)

• Large (≥992px)

• Extra Large (≥1200px)

• Extra Extra Large (≥1400px)

Jeder Container passt sich dynamisch an die Bildschirmgröße an, wodurch eine benutzerfreundliche und flexible Darstellung ermöglicht wird. Ein typisches Beispiel für die Nutzung von Bootstrap-Containern ist die Verwendung des container-Klassenattributs, das dafür sorgt, dass der Inhalt je nach Bildschirmgröße eine feste Breite hat oder sich auf 100% der verfügbaren Breite ausdehnt.

html
Copy code
<div class="container">

    <!-- Inhalt hier -->
</div>

Die Container-Klassen in Bootstrap bieten folgende Größenanpassungen:

• .container: Passt sich der Bildschirmgröße an, mit festen Breiten bei größeren Bildschirmen.

• .container-sm: Fängt bei kleinen Bildschirmen an, sich an die Breite des Bildschirms anzupassen.

• .container-md, .container-lg, .container-xl: Diese Container passen sich ebenfalls den jeweiligen Bildschirmgrößen an und bieten jeweils eine feste Breite, die mit zunehmender Bildschirmgröße wächst.

Bootstrap bietet nicht nur Layout-Funktionalitäten, sondern auch zahlreiche Komponenten wie Navigationselemente, Buttons, Formulare und viele mehr. Diese Komponenten erleichtern es, komplexe Benutzeroberflächen schnell zu erstellen, die sowohl funktional als auch ansprechend sind.

Neben den grundlegenden Layout-Optionen und Container-Klassen enthält Bootstrap auch eine Vielzahl von Utility-Klassen. Diese ermöglichen es, bestimmte Stilattribute wie Abstände, Ränder, Schriftgrößen und Farben schnell und effizient anzupassen.

Die Arbeit mit Razor und Bootstrap ermöglicht es, ansprechende und funktionale Webanwendungen zu entwickeln, die auf allen Geräten gut funktionieren. Bei der Entwicklung ist es jedoch auch wichtig, sicherzustellen, dass die Benutzeroberfläche nicht nur gut aussieht, sondern auch eine hervorragende Benutzererfahrung bietet. Ein gutes Design geht über die Ästhetik hinaus und berücksichtigt die Usability und Zugänglichkeit der Anwendung.

Wie man eine Kundenliste in einer .NET MAUI-App erstellt und bearbeitet

In modernen Anwendungen spielt die Handhabung von Daten eine zentrale Rolle. Insbesondere bei der Erstellung von mobilen und Desktop-Anwendungen mit .NET MAUI ist es wichtig, Daten effizient zu verwalten und die Benutzeroberfläche dynamisch zu aktualisieren, um eine reibungslose Nutzererfahrung zu gewährleisten. In diesem Kapitel zeigen wir, wie eine einfache Kundenliste mit der Möglichkeit zur Anzeige von Details und zur Bearbeitung von Kundendaten erstellt werden kann. Dabei wird die ObservableCollection verwendet, die eine effiziente und automatische Benachrichtigung der Benutzeroberfläche ermöglicht, wenn sich die Daten ändern.

In der Klasse CustomersListViewModel wird die Methode AddSampleData() verwendet, um einige Beispielkunden hinzuzufügen. Dies ermöglicht das Testen der Benutzeroberfläche, bevor der Webdienst integriert wird. So kann man sicherstellen, dass alle Interaktionen mit der Benutzeroberfläche, wie das Hinzufügen neuer Kunden oder das Löschen bestehender, korrekt umgesetzt werden.

Die Kundenliste wird in einer CustomersPage.xaml-Datei dargestellt, wobei das Layout so angepasst wird, dass jeder Kunde mit dem Firmennamen und dem Standort angezeigt wird. Wichtige Funktionen wie das "Pull-to-Refresh"-Feature, das die Liste bei Bedarf aktualisiert, sind ebenfalls integriert. Um eine neue Kundenanzeige hinzuzufügen, wurde ein Button in den Header der Liste eingefügt, der den Benutzer zu einer Detailansicht führt. Hier können Kundeninformationen bearbeitet und neue Einträge hinzugefügt werden.

Die Benutzerinteraktion in der Liste wird über Event-Handler gesteuert. Diese umfassen unter anderem das Antippen eines Kunden, um die Details anzuzeigen, das Aktualisieren der Liste, das Löschen eines Kunden durch Wischen oder lange Drücken sowie das Wählen eines Kunden zum Anrufen. Die Event-Handler sind präzise definiert, sodass jede Interaktion eine entsprechende Reaktion in der Benutzeroberfläche nach sich zieht. So wird etwa beim Wischen auf der Liste eine Schaltfläche angezeigt, die es dem Benutzer ermöglicht, den Kunden anzurufen, sofern die Telefonanwendung auf dem Gerät unterstützt wird.

In der CustomersPage.xaml.cs-Datei wird die ViewModel-Klasse CustomersListViewModel instanziiert und als Bindungskontext gesetzt. Dadurch können alle Daten der Kundenliste an die Benutzeroberfläche gebunden werden. Darüber hinaus wurden Event-Handler für verschiedene Aktionen definiert, wie etwa das Antippen eines Kunden zum Anzeigen der Details, das Simulieren eines Listen-Refreshs oder das Löschen eines Kunden.

Das Editieren und Anzeigen der Details eines einzelnen Kunden wird auf einer separaten Seite, der CustomerDetailPage, durchgeführt. Hier wird die Benutzeroberfläche mit einem Grid organisiert, das zwei Spalten und sechs Zeilen umfasst. Jedes Eingabefeld ist bidirektional an die Eigenschaften des Kunden gebunden, sodass Änderungen in der Benutzeroberfläche direkt im ViewModel widergespiegelt werden. Der Button „Insert“ ermöglicht das Hinzufügen eines neuen Kunden.

Es ist wichtig zu beachten, dass jede Benutzerinteraktion, wie das Antippen eines Kunden oder das Löschen eines Eintrags, direkt mit der zugrunde liegenden Logik verbunden ist, die das ViewModel manipuliert. Diese Trennung von Präsentation und Logik ist entscheidend für eine saubere Architektur, da sie die Wartbarkeit und Erweiterbarkeit der Anwendung erhöht. Auch wenn die Benutzeroberfläche im Hintergrund komplexe Datenoperationen durchführt, bleibt sie für den Benutzer intuitiv und leicht verständlich.

Zusätzlich sollte der Entwickler sicherstellen, dass alle Event-Handler korrekt implementiert sind, um eine fehlerfreie und benutzerfreundliche Interaktion zu gewährleisten. Dies umfasst auch das ordnungsgemäße Handling von Fehlern, wie etwa das fehlerhafte Anrufen eines Kunden, das in der App durch eine entsprechende Fehlermeldung angezeigt wird. Das Verwenden von asynchronen Methoden, wie sie in der Customer_Tapped-Methode zum Navigieren zur Detailansicht oder in der Customers_Refreshing-Methode zum Simulieren eines Refreshs verwendet wird, sorgt für eine reibungslose und ressourcenschonende Nutzererfahrung.