In modernen Web-Apps spielen Layouts eine entscheidende Rolle für die Benutzererfahrung und -interaktion. Ein durchdachtes Layout sorgt nicht nur für eine ansprechende Darstellung, sondern beeinflusst auch die Usability, Performance und letztlich den Erfolg der Anwendung. Folgende Aspekte unterstreichen die Bedeutung von Layouts:

1. Benutzerführung und Intuitivität: Ein gut strukturiertes Layout leitet Benutzer:innen intuitiv durch die App. Durch die gezielte Platzierung von Navigationselementen, Buttons und Inhalten können Benutzer:innen mühelos und ohne Verwirrung navigieren, was die Verweildauer und Zufriedenheit steigert.
2. Responsivität und Zugänglichkeit: Web-Apps müssen auf verschiedenen Geräten und Bildschirmgrößen funktionieren. Ein responsives Layout, das sich dynamisch anpasst, stellt sicher, dass die App sowohl auf mobilen Geräten als auch auf großen Bildschirmen gut aussieht und einfach zu bedienen ist. Zudem trägt ein zugängliches Layout dazu bei, dass auch Nutzende mit Einschränkungen ein uneingeschränktes Erlebnis genießen können.
3. Leistung und Ladezeiten: Effiziente Layoutstrukturen sind optimiert für schnelle Ladezeiten und Performance. Eine schlanke, gut strukturierte Layoutarchitektur reduziert den Ressourcenverbrauch und beschleunigt das Rendering – das sind wichtige Faktoren für die Benutzerzufriedenheit, insbesondere in mobilen Umgebungen.
4. Konsistenz und Wiederverwendbarkeit: Ein konsistentes Layoutdesign fördert die Wiedererkennung und erleichtert die Entwicklung. In Blazor können Layoutkomponenten modular aufgebaut und wiederverwendet werden, was nicht nur die Entwicklungszeit verkürzt, sondern auch für ein einheitliches Erscheinungsbild in der gesamten Anwendung sorgt.
5. Flexibilität und Skalierbarkeit: Die Anforderungen an eine Web-App ändern sich oft im Laufe der Zeit. Ein flexibles Layoutdesign erleichtert es, Änderungen oder Erweiterungen vorzunehmen, ohne die gesamte Struktur zu überarbeiten. Durch den modularen Aufbau in Blazor können Layouts leicht angepasst und skaliert werden, um neue Funktionen oder Inhalte zu integrieren.

In diesem Artikel geht es um die technische Umsetzung von Layouts in Web-Apps mit Hilfe des Blazor Frameworks.

Layoutoptionen

Die verschiedenen Layoutoptionen bieten Nutzer:innen eine flexible und effiziente Möglichkeit, die Struktur und Benutzerführung von Webapplikationen gezielt zu gestalten. Eine erste Übersicht ist in Tabelle 1 zu sehen. 

Tabelle 1: Layoutoptionen in der Web-App

Layouts in Blazor

Layouts ermöglichen es, konsistente Strukturen für Seiten zu definieren und gemeinsame Elemente wie Navigation, Kopf- und Fußzeilen zentral zu verwalten. Ein Layout in Blazor ist eine spezielle Razor-Komponente, die als Vorlage für andere Komponenten dient. Diese Layoutkomponenten erben von der Klasse LayoutComponentBase und definieren eine Body-Eigenschaft, die einen Platzhalter für den Inhalt der untergeordneten Komponenten darstellt. Als erstes analysieren wir dazu den Quellcode einer Blazor-App (Web-App), die wir auf der Basis des gleichnamigen Templates generieren. Verantwortlich ist die Datei (Komponente) MainLayout.razor, die man im Ordner Components/Layout findet (Listing 1, Abb. 1).

@inherits LayoutComponentBase
<div class="page">
  <div class="sidebar">
    <NavMenu />
  </div>

  <main>
    <div class="top-row px-4">
      <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
    </div>

    <article class="content px-4">
      @Body
    </article>
  </main>
</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

Abb. 1: Layout (Seitennavigation mit Menü) in einer Blazor-App (Template)

Sehen wir uns diese Komponente zunächst etwas genauer an:

• Vererbung von LayoutComponentBase: Die Layoutkomponente erbt von der Basisklasse LayoutComponentBase, die in Blazor speziell für Layouts verwendet wird. Diese Basisklasse stellt die Body-Eigenschaft bereit, die als Platzhalter für den Inhalt der untergeordneten Komponente dient, die dieses Layout verwendet.
• HTML-Grundstruktur: Das Haupt-<div> mit der CSS-Klasse “page” umfasst das Layout und bildet den äußeren Rahmen der Benutzeroberfläche.

• Sidebar: Der Bereich <div class=”sidebar”> enthält die Komponente <NavMenu />, die typischerweise als Navigationsmenü fungiert. Die Sidebar bleibt innerhalb des Layouts fest verankert und bietet Nutzer:innen eine konsistente Navigation durch die Applikation.

• Hauptinhalt (main): Innerhalb des <main>-Elements gibt es zwei zentrale Bereiche: Das Element mit der Klassenzuweisung “top-row” am Anfang des Hauptinhaltsbereichs enthält einen Link zur ASP.NET-Core-Dokumentation und wird durch eine CSS-Klasse (“px-4”) „gepolstert“, was den Inhalt innen um vier Einheiten Abstand versetzt. Dieser Bereich könnte für weitere Links oder Informationen genutzt werden. Der Artikelbereich mit der Klasse “content px-4” enthält die @Body-Direktive. Diese Direktive stellt den Bereich dar, in dem der spezifische Inhalt der untergeordneten Komponente gerendert wird, die das Layout verwendet. Hier werden also die Hauptinhalte der jeweiligen Seite angezeigt, die von der Sidebar unabhängig sind.

• Fehleranzeige (blazor-error-ui): Am Ende des Layouts befindet sich ein <div> mit der ID “blazor-error-ui”, das nur sichtbar wird, wenn ein unerwarteter Fehler auftritt. Dieser Bereich enthält: 
  • eine Fehlermeldung („An unhandled error has occurred.“) 
  • einen Reload-Link, der die Seite neu lädt
  • ein Schließen-Symbol (🗙) zum Ausblenden der Fehlermeldung

Dieses Layout bietet eine klare Struktur und ermöglicht eine flexible Gestaltung, da verschiedene Seiten das gleiche Layout nutzen können. Die Navigation und die Fehlerverarbeitung werden über die gesamte Anwendung hinweg vereinheitlicht.

SIE WOLLEN MEHR INPUT ZUM THEMA WEB DEVELOPMENT?

Entdecken Sie den BASTA! Web Development Track

Mehr erfahren

Viele Blazor-Entwickler:innen sind höchstwahrscheinlich über die Programmiersprache C# zur Webentwicklung mit Blazor gestoßen. Daher lohnt sich ein vertiefender Blick auf die Möglichkeiten des semantischen HTML, denn es bietet einen klaren Vorteil für die Strukturierung und Benutzerfreundlichkeit von Webanwendungen und wir nutzen diese HTML-Elemente in Blazor-Anwendungen. Webprofis können diesen Abschnitt getrost überspringen.

Exkurs: Semantisches HTML – Struktur und Bedeutung

In HTML5 ist die semantische Strukturierung ein wichtiger Aspekt, um die Benutzerfreundlichkeit, Zugänglichkeit und Übersichtlichkeit von Webseiten zu verbessern. Semantisches HTML bedeutet, dass Inhalte so strukturiert und mit Tags ausgezeichnet werden, dass ihre Funktion und Bedeutung im Kontext der Webseite klar erkennbar sind. Dies hilft nicht nur Entwickler:innen und Nutzer:innen, sondern auch Suchmaschinen und Screenreadern, den Inhalt korrekt zu interpretieren. Ein HTML-Dokument sollte nicht lediglich nacheinander mit Inhalten gefüllt werden, sondern eine klare Struktur und Hierarchie aufweisen. Mit den HTML-Tags lassen sich Webseiten logisch gliedern und erleichtern es Nutzer:innen, sich auf der Seite zurechtzufinden. Die wichtigsten HTML-Tags zur Strukturierung sind die folgenden:

• <body>: Der <body>-Tag stellt den darstellbaren Inhaltsbereich des HTML-Dokuments dar. Alle Inhalte der Seite, die sichtbar sein sollen, werden innerhalb dieses Tags organisiert.
• <nav>: Das <nav>-Element dient der Kennzeichnung von Navigationselementen einer Seite. Es enthält oft Links und Menüs zur Hauptnavigation der Seite. Da Seiten mehrere Navigationselemente enthalten können, sollte <nav> gezielt für die Hauptnavigation eingesetzt werden.
• <section>: Mit <section> können Seiten in zusammenhängende inhaltliche Abschnitte aufgeteilt werden. Ein typisches Beispiel sind Abschnitte für „News“ oder „Services“. Verschachtelte Sections sind möglich und helfen, die Gliederung der Seite zu verfeinern.
• <article>: Das <article>-Tag dient der Kennzeichnung in sich geschlossener Inhalte, die auch eigenständig bestehen könnten, wie Blogartikel oder Kommentare. Oft werden <section>- und <article>-Tags kombiniert, um die Seite hierarchisch zu gliedern.
• <aside>: Das <aside>-Tag wird verwendet, um zusätzliche Informationen wie Seitenleisten oder ergänzende Inhalte anzuzeigen. Diese Inhalte sind oft mit dem Hauptinhalt verwandt, aber nicht zwingend erforderlich.
• Überschriftenelemente (<h1> bis <h6>): HTML unterstützt die semantische Gliederung von Überschriften von <h1> bis <h6>. Innerhalb der Strukturtags wie <section>, <article>, <aside> und <nav> beginnt die Zählung der Überschriftenebenen neu.
• <header>: Das <header>-Tag kennzeichnet den Kopfbereich einer Seite oder eines Abschnitts und kann Überschriften, Logos oder Navigationslinks enthalten.
• <footer>: Im <footer>-Tag werden Informationen für den Fußbereich der Seite gesammelt. Typische Inhalte sind Urheberrechtshinweise und Kontaktinformationen.
• <address>: Das <address>-Tag gibt Kontaktinformationen zum Autor des Inhalts an und wird oft im <footer> verwendet. In Browsern wird es meist kursiv dargestellt.
• <main>: Mit <main> wird der zentrale Inhalt der Seite ausgezeichnet. Dieses Element sollte nur einmal pro Dokument vorkommen und ersetzt <div id=”main”>, um den Hauptinhalt der Seite semantisch zu kennzeichnen.

Die Verwendung dieser HTML5-Elemente zur Strukturierung verleiht Webseiten eine klare und bedeutungsgerechte Gliederung, was mehrere Vorteile mit sich bringt: Screenreader und andere Assistenztechnologien können die Struktur besser interpretieren, was sehbehinderten Nutzer:innen zugutekommt. Suchmaschinen verstehen durch semantische Tags die Bedeutung und Struktur des Inhalts besser, was die Indexierung und Auffindbarkeit der Seite verbessern kann. Klare Strukturen erleichtern die Wartung und Erweiterung des Codes, da die Bedeutung der einzelnen Bereiche sofort ersichtlich ist. Ein Beispiel für eine HTML5-Struktur mit semantischen Tags finden Sie in Listing 2 und Abb. 2.

<!DOCTYPE html>
<head>
  …
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <header>
    <h1>Die Überschrift</h1>
  </header>
  <nav>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </nav>
  <main>
    <div class="column side">
      <p>Der linke Bereich der Seite</p>
      <p>
        Lorem ipsum ….
      </p>
    </div>
    <div class="column middle">
      <p>Der mittlere Bereich der Seite</p>
      <p>
        Lorem ipsum ….
      </p>
    </div>
    <div class="column side">
      <p>Der rechte Bereich der Seite</p>
      <p>
        Lorem ipsum ….
      </p>
    </div>
  </main>
  <footer>
    Hier kommt zum Beispiel das Impressum.
  </footer>
</body>
</html>

Abb. 2: Typisches Layout einer Web-App, realisiert mit semantischem HTML

Wenn Sie diese Elemente in einem HTML5-Dokument verwenden, können Sie die inhaltliche Struktur des Dokumentes festlegen. Beachten Sie jedoch zwingend: Der Browser wird das eine oder andere Element bereits in irgendeiner Form angepasst darstellen, zum Beispiel werden Inhalte in <address> kursiv ausgegeben. Die eigentliche Festlegung des Layouts und des Designs erfolgt jedoch in CSS, in dem man dann die Tagelemente konkret anspricht und diese mit dem entsprechenden CSS-Styling und Design versieht. Kommen wir jetzt wieder zurück zu Blazor.

Nav-Komponente

Innerhalb der Layoutkomponente haben wir die Navigation (<Nav/>-Komponente) integriert, die im Blazor-Kontext des Templates als Sidebar oder Top-Navigationsleiste dient (Listing 3). Diese Navigationsleiste ermöglicht eine strukturierte und konsistente Navigation durch die Hauptbereiche der Anwendung.

<div class="top-row ps-3 navbar navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="">BlazorApp1</a>
  </div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
  <nav class="flex-column">
    <div class="nav-item px-3">
      <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
        <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
      </NavLink>
    </div>
    <div class="nav-item px-3">
      <NavLink class="nav-link" href="counter">
        <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
      </NavLink>
    </div>
    <div class="nav-item px-3">
      <NavLink class="nav-link" href="weather">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
      </NavLink>
    </div>
  </nav>
</div>

Schauen wir uns den Aufbau und das Zusammenspiel der verschiedenen Teile der Navigation an. Der Navigationsbereich enthält mehrere Elemente, die zusammen eine responsive und funktionale Sidebar erzeugen:

<div class="top-row ps-3 navbar navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="">BlazorApp1</a>
  </div>
</div>

Dieser Abschnitt definiert den obersten Bereich der Navigation. Er enthält die “navbar-brand”-CSS-Klasse, die als Logo oder Markennamen dient (“BlazorApp1”). Das “navbar”– und “navbar-dark”-Klassenset bringt den Stil der Bootstrap-Navigationsleiste ein und sorgt für ein abgedunkeltes Farbschema. Mit folgendem Beispiel wird ein checkbox-Element definiert, das als Hamburgermenü fungiert:

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

Beim Anklicken, beispielsweise auf Mobilgeräten, wird das Menü ein- und ausgeblendet. Das title-Attribut verleiht dem Toggle-Button eine beschreibende Bezeichnung, die für Screenreader und eine universelle Zugänglichkeit wichtig ist. Kommen wir zum Nav-Container (scrollbarer Bereich):

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
  <nav class="flex-column">

Der Bereich nav-scrollable ist ein Container für die Navigation, der vertikales Scrollen unterstützt. Durch das onclick-Event im div wird das Menü ein- oder ausgeblendet, wenn Benutzer.innen auf den Bereich klicken. Das ermöglicht eine einfache Bedienung der Sidebar. Die einzelnen Navigationselemente werden durch <NavLink>-Komponenten definiert, die von Blazor bereitgestellt werden. Jedes <NavLink> ist mit einer Route der Anwendung verknüpft und wechselt den Zustand basierend auf dem aktuellen URL. Der Code:

<div class="nav-item px-3">
  <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
    <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
  </NavLink>
</div>

Die Klasse “nav-item” sorgt für einheitliche Abstände, während die Klasse “px-3” für ein horizontal gepolstertes Layout sorgt. Die “nav-link”-Klasse ist eine Standardklasse für Links in Bootstrap und wird hier verwendet, um den Navigationselementen ein einheitliches Styling zu verleihen. Jedes <NavLink>-Element enthält ein span-Element mit einer Bootstrap-Icon-Klasse (“bi bi-house-door-fill-nav-menu”). Das ermöglicht die Darstellung eines Icons neben dem Text. Das aria-hidden=”true”-Attribut stellt sicher, dass das Icon für Screenreader ignoriert wird, da es nur eine dekorative Funktion hat. Kommen wir als letztes zu den Seitenverlinkungen (href-Attribute). Die einzelnen href-Attribute definieren die Routen in der Blazor-Anwendung, zum Beispiel: `/` (Startseite), `/counter` (Counter-Seite) oder `/weather` (Weather-Seite). Jedes dieser Elemente wird durch ein Icon und eine Beschriftung ergänzt, um die Navigation für Benutzer:innen intuitiv zu gestalten. Die Hauptvorteile dieses Vorgehens sind:

• Responsivität: Die Kombination der Klassen “navbar-toggler” und “nav-scrollable” sorgt dafür, dass die Sidebar auf verschiedenen Geräten unterschiedlich dargestellt wird. Auf großen Bildschirmen bleibt die Sidebar sichtbar, während sie auf kleineren Bildschirmen durch das Hamburgermenü ein- und ausgeblendet werden kann.
• Interaktive Navigation mit <NavLink/>-Komponente: Blazor stellt sicher, dass die <NavLink/>-Komponente automatisch den Zustand „aktiv“ annimmt, wenn Benutzer:innen sich auf der entsprechenden Seite befinden. Das bietet visuelles Feedback und vereinfacht die Orientierung innerhalb der Anwendung.
• Trennung von Inhalt und Layout: Die Icons, Links und Navigationsstruktur sind klar in HTML5-CSS-Klassen organisiert, was die Benutzeroberfläche einfach anpassbar macht. CSS kann verwendet werden, um das Layout und Styling der Sidebar weiter zu individualisieren.

Zusammengefasst bietet dieses Layout eine gut strukturierte Navigation, die sich dynamisch anpasst, nutzerfreundlich ist und eine konsistente Navigation über die gesamte Blazor-App hinweg ermöglicht.

CSS-Definition des Layouts

Das Styling der Layoutkomponente erfolgt durch eine zugeordnete CSS-Datei, in der die visuelle Gestaltung der Navigation und des allgemeinen Layouts definiert wird. Diese CSS-Datei enthält die Stile für die verschiedenen Bereiche der Layoutkomponente, wie die Sidebar, das Hamburgermenü, den Hauptinhalt und den Footer. In der App auf der Basis des allgemeinen Templates wird die Definition in der Datei MainLayout.razor.css (Listing 4) vorgenommen.

.page {
  position: relative;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.sidebar {
  background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
…
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

Zunächst erfolgt die Definition des grundlegenden Layoutcontainers:

.page {
  position: relative;
  display: flex;
  flex-direction: column;
}

Diese Klasse bildet den Hauptcontainer des Layouts und nutzt das Flexbox-Element aus CSS als Layoutmethode. Durch flex-direction: column werden die Elemente in .page vertikal angeordnet. Das position: relative stellt sicher, dass die Elemente innerhalb des Containers relativ zu .page positioniert werden können. Durch

main {
  flex: 1;
}

wird der Hauptinhalt so gestaltet, dass er den verbleibenden verfügbaren Platz im Container .page einnimmt. Dadurch passt sich der main-Bereich dynamisch an die Größe des Containers an und lässt Platz für andere fixierte oder flexible Elemente wie die Sidebar und den Header.

.sidebar {
  background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

Die Sidebar erhält durch einen linearen Farbverlauf (Gradient) eine attraktive Hintergrundfarbe, die von einem dunklen Blau (rgb(5, 39, 103)) oben in ein tiefes Violett (#3a0647) unten übergeht. Dieses visuelle Design hilft, die Sidebar als festen Bereich vom restlichen Inhalt abzuheben und eine ansprechende, moderne Optik zu erzeugen. Als letztes wird eine mögliche Fehlereinblendung der Blazor-App mit einem Layout versehen (Listing 5).

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

• #blazor-error-ui: Dieser Bereich wird als Fehleranzeige verwendet, die standardmäßig ausgeblendet ist (display: none). Wenn ein Fehler auftritt, wird #blazor-error-ui sichtbar gemacht, sodass Nutzer:innen auf das Problem hingewiesen werden.
• Stil: Mittels background: lightyellow wird die hellgelbe Hintergrundfarbe definiert, die visuell eine Warnung oder einen Fehler symbolisiert; mit position: fixed platziert man das Element fest am unteren Rand des Bildschirms, unabhängig vom Seiteninhalt, sodass es stets sichtbar bleibt, wenn es eingeblendet ist; z-index: 1000 stellt sicher, dass die Fehleranzeige über anderen Inhalten liegt und mittels padding und box-shadow werden die Innenabstände und der Schatten der Fehleranzeige definiert. Es entsteht ein sauberes, abgesetztes Design, das ins Auge fällt und benutzerfreundlich bleibt.

SIE LIEBEN .NET?

Entdecken Sie die BASTA! Tracks

Mehr erfahren

Diese CSS-Definitionen (hier nur in Auszügen dargestellt und erläutert) legen die Grundstruktur und das Design der Blazor-Anwendung fest. Durch Flexbox und responsives Design wird ein flexibles Layout gewährleistet. Die Sidebar hebt sich durch ihren Farbverlauf ab, und die Fehleranzeige wird bei Bedarf hervorgehoben dargestellt. Studieren Sie die vollständige CSS-Datei in einer neuen Blazor-App, die sie auf einfache Art und Weise mit Hilfe des Assistenten in Visual Studio generieren lassen können.

Nutzung des Layouts in einer Komponente

In Blazor können Layouts auf verschiedene Arten auf Razor-Komponenten angewendet werden. Es bestehen die folgenden Optionen, um ein Layout für eine oder mehrere Komponenten festzulegen.

Nutzung eines Layouts durch die @layout-Direktive: Die einfachste Möglichkeit, einer Razor-Komponente ein Layout zuzuweisen, ist die Verwendung der @layout-Direktive direkt in der Komponente. Diese Methode ermöglicht eine individuelle Layoutzuweisung, die spezifisch für eine einzelne Komponente gilt. Ein einfaches Beispiel:

@page "/about"
@layout MainLayout
<h2>Über uns</h2>
<p>Willkommen auf der Über-uns-Seite.</p>

In diesem Beispiel wird der Komponente das Layout MainLayout zugewiesen, indem die @layout-Direktive verwendet wird. Der Inhalt der Razor-Komponente (hier: „Über uns“ und „Willkommen auf der Über-uns-Seite“) wird an der Stelle von @Body in MainLayout gerendert.

Nutzung eines Standard-Layouts für die gesamte Anwendung: Um ein Standardlayout für alle Razor-Komponenten festzulegen, können Sie das Layout in der <RouteView/>-Komponente der <Router/>-Komponente festlegen. Verwenden Sie den DefaultLayout-Parameter, um den Layouttyp festzulegen, üblicherweise in der Datei Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
  <Found Context="routeData">
    <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
    <FocusOnNavigate RouteData="routeData" Selector="h1" />
  </Found>
</Router>

In diesem Beispiel wird MainLayout als Standardlayout festgelegt. Dadurch wird MainLayout automatisch auf alle Razor-Komponenten angewendet, die keine spezifische @layout-Direktive haben.

Nutzung eines Layouts für mehrere Komponenten eines Ordners: Für Razor-Komponenten innerhalb eines bestimmten Ordners kann ein Layout durch eine _Imports.razor-Datei festgelegt werden. Diese Datei wird auf alle Razor-Komponenten im gleichen Ordner und in dessen Unterordnern angewendet, sodass das Layout automatisch übernommen wird. Ein weiteres Beispiel: In der Datei _Imports.razor notieren wir folgende Anweisung:

@layout MainLayout

In diesem Fall wird MainLayout als Layout für alle Razor-Komponenten innerhalb des gleichen Ordners wie die _Imports.razor-Datei und in den Unterordnern verwendet. Diese Methode ist besonders nützlich, wenn Sie unterschiedliche Layouts für verschiedene Teile Ihrer Anwendung benötigen, beispielsweise ein Adminlayout für alle Komponenten im Admin-Ordner und ein Standardlayout für andere Bereiche.

Fassen wir zusammen: Die @layout-Direktive dient der Zuweisung eines Layouts in einer spezifischen Komponente; das Standardlayout definiert das Layout für die gesamte Anwendung und mittels der _Imports.razor-Datei legen wir das Layout für mehrere Komponenten in einem bestimmten Ordner fest. Diese verschiedenen Methoden ermöglichen es Ihnen, Layouts flexibel und übersichtlich in einer Blazor-Anwendung anzuwenden und zu organisieren.

Layoutmodifikation – klassisches Menü

Wenn Sie das Layout einer Blazor-Anwendung anpassen möchten, dann müssen Sie die Layoutkomponente modifizieren und beispielsweise eine Menüstruktur hinzufügen. Hier wird der Code so angepasst, dass eine Navigationsleiste erstellt wird, die als Hauptmenü dient. Die Modifikation des Standardlayouts erfolgt durch die Definition von Header, Navigation und Inhaltsbereichen. Der Quellcode in Listing 6 beschreibt eine typische Menüstruktur.

@inherits LayoutComponentBase
Layout1
<div class="header-nav">
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">MyCompany</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <NavLink class="nav-link active" href="/" Match="NavLinkMatch.All">Home</NavLink>
          <NavLink href="/weather" class="nav-link">Wetter</NavLink>
          <NavLink href="/counter" class="nav-link">Counter</NavLink>
        </div>
      </div>
    </div>
  </nav>
</div>
<div class="content px-4">
  @Body
</div>

Es folgt eine kompakte Erklärung der Komponenten und Modifikationen gegenüber der Ausgangssituation:

• Vererbung von LayoutComponentBase: Durch @inherits LayoutComponentBase wird festgelegt, dass die Komponente als Layout verwendet werden kann. Die @Body-Direktive wird verwendet, um den Inhalt der untergeordneten Komponenten an der gewünschten Stelle im Layout einzufügen.
• Header und Navigation: Der Header enthält die Hauptnavigation in Form einer <navbar/>-Komponente. Die Klasse “navbar navbar-expand-lg” sorgt dafür, dass die Navigationsleiste auf großen Bildschirmen horizontal dargestellt wird und auf kleineren Bildschirmen als zusammenklappbares (responsive) Menü erscheint. Die “bg-body-tertiary”-Klasse definiert den Hintergrundstil, und “container-fluid” sorgt dafür, dass die Inhalte der Navigation die volle Breite des Containers einnehmen.
• Markenname (MyCompany): Das Element <a class=”navbar-brand” href=”#”>MyCompany</a>` definiert den Markennamen oder das Logo in der Navigationsleiste.
• Hamburgermenü (für mobile Geräte): Der Button mit der Klasse “navbar-toggler” sorgt dafür, dass die Navigation auf kleineren Bildschirmen ein- und ausgeklappt werden kann.

• Navigationselemente (NavLink): Die “navbar-nav”-Klasse gruppiert alle Navigationslinks in der Navbar. Die <NavLink/>-Komponenten erzeugen Links, die je nach Route aktiviert werden. NavLink mit href=”/” navigiert zur Startseite und hat Match=”NavLinkMatch.All”, sodass es als aktiv markiert wird, wenn sich Benutzer:innen auf der Startseite befinden. Weitere Navigationselemente, wie /weather für die Wetterseite und /counter für die Counter-Seite, werden hinzugefügt, um eine einfache Benutzerführung zu gewährleisten.

• Inhaltsbereich (@Body): Der @Body-Platzhalter im <div class=”content px-4″>-Container definiert den Bereich, in dem die Inhalte der jeweiligen Seite gerendert werden. Die Klasse “px-4” fügt horizontale Innenabstände hinzu, um den Inhalt nicht direkt am Rand anzuzeigen und die Lesbarkeit zu verbessern.

Mit dieser Anpassung wird das Standardlayout um eine intuitive Menüstruktur erweitert (Abb. 3). Die Navigation ist klar strukturiert und passt sich automatisch an die Bildschirmgröße an, was das Layout flexibel und benutzerfreundlich macht.

Abb. 3: Layout einer Blazor-App mittels Menünavigation

Layoutmodifikation – Tabnavigation

Wenn Sie das Layout einer Blazor-Anwendung zu einer Tabnavigation anpassen möchten, dann müssen Sie das Standardlayout modifizieren und eine Struktur erstellen, die auf einer Navigation mit Tabs basiert. Eine solche Navigation zeigt die wichtigsten Seiten der Anwendung in Form von Registerkarten (Tabs) an, die den Benutzer:innen eine einfache und schnelle Navigation zwischen den Seiten ermöglichen. Das Quellcodebeispiel finden Sie in Listing 7 und das Ergebnis in Abbildung 4.

@inherits LayoutComponentBase
Layout2
<div class="header-nav">
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">MyCompany</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <NavLink class="nav-link active" href="/" Match="NavLinkMatch.All">Home</NavLink>
        </li>
        <li class="nav-item">
          <NavLink href="/weather" class="nav-link">Wetter</NavLink>
        </li>
        <li class="nav-item">
          <NavLink href="/counter" class="nav-link">Counter</NavLink>
        </li>
      </ul>
    </div>
  </nav>
</div>
<div class="content px-4">
  @Body
</div>

Abb. 4: Layout einer Blazor-App mittels Tabnavigation

Die Anpassungen im Quellcode sind ähnlich, wie bei dem eben beschriebenen Beispiel. Um die Tabnavigation zu erreichen sind die entsprechenden Klassen aus Bootstrap für die Tabs zu nutzen.

Verschachtelte Layouts

In Blazor können Layouts ineinander geschachtelt werden, um eine hierarchische Struktur für die Benutzeroberfläche zu schaffen. Das bedeutet, dass ein Layout in einem anderen Layout eingebettet wird. Das ist besonders nützlich, wenn unterschiedliche Bereiche der Anwendung konsistente Elemente haben, aber einige Elemente eine spezifische Struktur benötigen. Dazu ein einfaches Beispiel: Stellen wir uns eine Anwendung vor, die ein Hauptlayout mit einer globalen Navigation und ein weiteres untergeordnetes Layout für einen bestimmten Bereich (z. B. Adminbereich) verwendet. Der Adminbereich hat eine zusätzliche Navigation und spezielle Formatierungen, die sich vom Hauptlayout abheben. Im Hauptlayout wird die globale Navigation und der allgemeine Inhaltsbereich definiert. Dieses Layout verwendet MainLayout als übergeordnetes Layout und fügt zusätzliche Strukturen, wie eine adminspezifische Navigation, hinzu. Nun kann eine Seite das Adminlayout als Layout verwenden. Durch diese Struktur wird eine übersichtliche und flexible Gestaltung möglich, die Bereiche mit spezifischen Anforderungen konsistent in das Hauptlayout integriert. Ein Beispiel finden Sie unter [1].

Fazit

Layouts spielen in Blazor-Anwendungen eine entscheidende Rolle, da sie die Grundlage für eine konsistente und benutzerfreundliche Benutzeroberfläche bilden. Sie ermöglichen eine klare Strukturierung der Seiteninhalte, fördern die Wiederverwendbarkeit und erleichtern die Wartung der Anwendung. Mit der Verwendung von Layouts in Blazor lassen sich Komponenten wie Header, Navigation und Footer zentral verwalten und für mehrere Seiten anwenden. Durch die verschiedenen Layoutoptionen wie Master-Detail, Sidebar, Tabnavigation und Fullscreen können Entwickler:innen das Layout flexibel an die Anforderungen der Anwendung und die Bedürfnisse der Nutzer:innen anpassen. Die Möglichkeit, Layouts ineinander zu verschachteln, bietet zusätzlichen Spielraum für komplexere Anwendungen, indem sie hierarchische Strukturen erlaubt. Zusammengefasst sind Layouts ein unverzichtbares Werkzeug für jede Blazor-Anwendung, da sie sowohl die technische Effizienz als auch die Benutzerfreundlichkeit erheblich steigern.

Web: https://larinet.com, https://www.tech-punkt.com

Links & Literatur

[1] https://learn.microsoft.com/de-de/aspnet/core/blazor/components/layouts?view=aspnetcore-8.0