Übung: Hinzufügen eines Blazor-Layouts zum Reduzieren von Duplizierung im Code

4 Minuten

Als Sie der Blazing Pizza-App Seiten hinzugefügt haben, werden Sie wahrscheinlich bemerkt haben, dass der HTML-Navigationscode kopiert wurde. In Blazor sind Features integriert, um diese Art von Seitengerüst an einem Ort zu erstellen. Diese werden als Blazor-Layouts bezeichnet.

Wir haben jetzt viel doppelten HTML-Code auf mehreren Seiten. Im nächsten Schritt erstellen Sie ein Layout für die gesamte App, sodass Sie Navigations- und Unternehmensinformationen an einem einzigen Ort hinzufügen können.

In dieser Übung erstellen Sie eine MainLayout-Komponente . Sie erfahren, wie Sie dieses Layout für bestimmte Seiten verwenden und es dann zum Standardlayout für die gesamte App erklären können.

Hinzufügen einer MainLayout-Komponente

Wählen Sie in Visual Studio Code im Menü "Neue Datei"> aus.
Nennen Sie die Datei "MainLayout.razor". Stellen Sie sicher, dass Sie die Datei im freigegebenen Verzeichnis speichern.

Erstellen Sie in der neuen Datei eine Layoutkomponente, und kopieren Sie den Navigations-HTML-Code von einer beliebigen Seite.

@inherits LayoutComponentBase

<div id="app">

  <header class="top-bar">
    <a class="logo" href="">
      <img src="img/logo.svg" />
    </a>

    <NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
      <img src="img/pizza-slice.svg" />
      <div>Get Pizza</div>
    </NavLink>

    <NavLink href="myorders" class="nav-tab">
      <img src="img/bike.svg" />
      <div>My Orders</div>
    </NavLink>
  </header>

  <div class="content">
    @Body
  </div>

  <footer>
    &copy; Blazing Pizza @DateTime.UtcNow.Year
  </footer>

</div>

Dieses Layout verwendet einige Markups in _Host.cshtml, daher müssen wir es von dort entfernen.

Speichern Sie Ihre Änderungen, indem Sie STRG+S auswählen.
Erweitern Sie im Datei-Explorer den Ordner Pages. Wählen Sie dann _Host.cshtml aus.

Ändern Sie die Elemente um die Blazor-App-Komponente von diesem Code:

<div id="app">
    <div class="content">
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </div>
</div>

In diesen Code:

<component type="typeof(App)" render-mode="ServerPrerendered" />

Verwenden eines Blazor-Layouts für eine Seitenkomponente

Erweitern Sie im Datei-Explorer den Ordner Pages. Wählen Sie dann "Index.razor" aus.
Löschen Sie das top-bar-div-Element, und fügen Sie unter der @page-Anweisung einen Verweis auf das neue Layout hinzu.
```
@layout MainLayout
```
Löschen Sie auch das alte <h1>Blazing Pizzas</h1>-Element. Es wird nicht mehr benötigt, da im Layout eine obere Leiste vorhanden ist.
Wählen Sie in Visual Studio Code F5 aus. Oder wählen Sie im Menü "Ausführen " die Option "Debuggen starten" aus.

Die neue Homepage enthält eine Copyrightfußzeile für dieses Jahr, die automatisch aktualisiert wird. Wenn Sie sehen möchten, wie eine Seite aussieht, die dieses Layout nicht verwendet, wählen Sie "Meine Bestellungen" aus. Alternativ können Sie eine ungültige Seite wie (http://localhost:5000/help) aufrufen. Im Moment haben wir unsere Meldung 404 Seite nicht gefunden nicht mit unserer Marke gestaltet.
Um die App zu beenden, wählen Sie Umschalt + F5 aus.

Aktualisieren aller Seiten mit dem neuen Layout

Jetzt könnten Sie die @layout MainLayout-Anweisung allen Seiten in Ihrer App hinzufügen, aber Blazor hat eine bessere Lösung. Löschen Sie zunächst die Layoutdirektive, die sie soeben zu Index.razor hinzugefügt hat.

Löschen Sie in der @layout MainLayout .
Erweitern Sie im Datei-Explorer den Ordner Pages. Wählen Sie dann MyOrders.razor aus.
Löschen Sie das top-bar-div-Element.
Erweitern Sie im Datei-Explorer den Ordner Pages. Wählen Sie dann "OrderDetail.razor" aus.
Löschen Sie das top-bar-div-Element.
Erweitern Sie im Datei-Explorer den Ordner Pages. Wählen Sie dann Checkout.razor aus.
Löschen Sie das top-bar-div-Element.

Die App.razor-Komponente ist der Ort, an dem wir ändern können, wie Seiten weitergeleitet werden, aber auch Blazor anweisen, ein Standardlayout zu verwenden.

Wählen Sie im Datei-Explorer "App.razor" aus.
Fügen Sie die DefaultLayout="typeof(MainLayout)" Deklaration zum RouteView-Element hinzu.
Fügen Sie Layout="typeof(MainLayout)" zu LayoutView hinzu.

App.razor sollte jetzt wie in diesem Beispiel aussehen:

<Router AppAssembly="typeof(Program).Assembly" Context="routeData">
    <Found>
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(MainLayout)">
            <div class="main">Sorry, there's nothing at this address.</div>
        </LayoutView>
    </NotFound>
</Router>

Testen des neuen Layouts

Wählen Sie in Visual Studio Code F5 aus. Oder wählen Sie im Menü "Ausführen " die Option "Debuggen starten" aus.

Der Vorteil der Verwendung eines Standardlayouts besteht darin, dass Sie es auf alle Seiten anwenden und es für die Layoutansicht für nicht gefundene Seiten verwenden können.
Um die App zu beenden, wählen Sie Umschalt + F5 aus.

Die Aufgaben, die Sie für die App ausführen mussten, sind in diesem Modul abgeschlossen. Wenn Sie erfahren möchten, wie Sie Formulare und Validierungen verarbeiten, arbeiten Sie das nächste Modul in diesem Lernpfad durch.

Feedback

War diese Seite hilfreich?