Ü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 im Menü in Visual Studio Code Datei>Neue Textdatei aus.
Wählen Sie ASP.NET Razor als Sprache aus.

Erstellen Sie eine Layoutkomponente, und kopieren Sie den HTML-Navigationscode 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 einen Teil des Markups in _Host.cshtml. Daher müssen Sie es dort entfernen.

Drücken Sie STRG+S, um Ihre Änderungen zu speichern.
Verwenden Sie als Dateinamen MainLayout.razor. Stellen Sie sicher, dass Sie die Datei im Verzeichnis Shared speichern.
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.
Drücken Sie in Visual Studio Code F5. Wählen Sie alternativ Debuggen starten im Menü Ausführen aus.

Die neue Homepage enthält eine Copyrightfußzeile für dieses Jahr, die automatisch aktualisiert wird. Wählen Sie My Orders aus, um eine Seite ohne dieses Layout im Vergleich zu sehen. 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.
Drücken Sie UMSCHALT + F5, um die App zu beenden.

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 layout-Anweisung, die soeben der Datei Index.razor hinzugefügt wurde.

Löschen Sie @layout MainLayout aus der Index.razor-Komponente.
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.

In der App.razor-Komponente können Sie ändern, wie Seiten umgeleitet werden, aber sie informiert Blazor auch, dass ein Standardlayout verwendet werden soll.

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

App.razor sollte jetzt wie das folgende 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

Drücken Sie in Visual Studio Code F5. Wählen Sie alternativ Debuggen starten im Menü Ausführen 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.
Drücken Sie UMSCHALT + F5, um die App zu beenden.

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.

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

Hinzufügen einer MainLayout-Komponente

Verwenden eines Blazor-Layouts für eine Seitenkomponente

Aktualisieren aller Seiten mit dem neuen Layout

Testen des neuen Layouts

Feedback