Übung: Erstellen einer Benutzeroberfläche mit Blazor-Komponenten

  • 5 Minuten

In dieser Übung beginnen Sie mit dem Erstellen einer neuen Blazing Pizza-App für den Pizzalieferdienst. Das Unternehmen hat die aktuellen CSS-, Bild- und HTML-Dateien seiner alten Website als Ausgangsbasis bereitgestellt.

Hinweis

In diesem Modul werden die .NET-CLI (Befehlszeilenschnittstelle) und Visual Studio Code für die lokale Entwicklung verwendet. Nach Abschluss dieses Moduls können Sie die Konzepte mithilfe von Visual Studio (Windows) oder Visual Studio für Mac (macOS) anwenden. Verwenden Sie für die weitere Entwicklung Visual Studio Code für Windows, Linux und macOS.

Wenn Sie noch nie eine Blazor-Anwendung erstellt haben, befolgen Sie die Setupanweisungen für Blazor, um die richtige Version von .NET zu installieren und zu überprüfen, ob Ihr Computer ordnungsgemäß eingerichtet ist. Halten Sie beim Schritt Erstellen Ihrer App an.

Erstellen einer neuen Blazor-App

In diesem Modul wird das .NET 6.0 SDK verwendet. Stellen Sie sicher, dass .NET 6.0 installiert ist, indem Sie in Ihrem bevorzugten Terminal den folgenden Befehl ausführen:

dotnet --list-sdks

Daraufhin wird eine Ausgabe angezeigt, die in etwa wie folgt aussieht:

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

Stellen Sie sicher, dass eine Version aufgeführt wird, die mit 6 beginnt. Wenn keine solche Version aufgeführt wird oder der Befehl nicht gefunden wurde, installieren Sie das neueste .NET 6.0 SDK.

.NET ermöglicht Ihnen das Erstellen neuer Projekte mit einer beliebigen Version von Visual Studio oder Terminalbefehlen. In den folgenden Übungen werden die Schritte mithilfe des Terminals und von Visual Studio Code gezeigt.

  1. Öffnen Sie Visual Studio Code.

  2. Öffnen Sie das integrierte Terminal über Visual Studio Code, indem Sie im Hauptmenü Ansicht auswählen. Wählen Sie dann im Hauptmenü Terminal aus.

  3. Wechseln Sie im Terminal zu dem Speicherort, an dem Sie das Projekt erstellen möchten.

  4. Führen Sie den dotnet-Terminalbefehl aus:

    dotnet new blazorserver -o BlazingPizza --no-https true -f net6.0

    Dieser Befehl erstellt ein neues Blazor-Serverprojekt in einem Ordner namens BlazingPizza. Außerdem wird das Projekt angewiesen, HTTPS zu deaktivieren.

  5. Wählen Sie Datei>Ordner öffnen aus.

  6. Navigieren Sie im Dialogfeld „Öffnen“ zum Ordner BlazingPizza, und wählen Sie Ordner auswählen aus.

  7. Visual Studio Code fordert Sie auf, erforderliche Ressourcen zum Erstellen und Debuggen des Projekts hinzuzufügen. Wählen Sie Ja aus.

    Screenshot des Dialogfelds zu erforderlichen Ressourcen

  8. Visual Studio Code fügt launch.json und tasks.json im Ordner .vscode Ihres Projekts hinzu.

Diese Dateien ermöglichen es Ihnen, Ihre Blazor-App mit den Debugtools von Visual Studio Code auszuführen und zu debuggen.

Testen des Setups

Zum Ausführen der App können Sie das Terminal oder Visual Studio Code verwenden.

  1. Im Terminalfenster starten Sie die Blazor-App mit dem folgenden Befehl:

    dotnet watch

    Dieser Befehl erstellt und startet dann die App. Der Befehl watch weist dotnet an, alle Projektdateien zu beobachten. Jegliche Änderungen, die Sie an Projektdateien vornehmen, lösen automatisch eine Neuerstellung und einen Neustart der App aus.

    Der Standardbrowser Ihres Computers sollte eine neue Seite unter http://localhost:5000 öffnen.

  2. Zum Beenden der App wählen Sie STRG + C im Terminalfenster aus.

Sie können Ihr Projekt auch mit Visual Studio Code ausführen und debuggen.

  1. Drücken Sie in Visual Studio Code F5. Wählen Sie alternativ Debuggen starten im Menü Ausführen aus.

    Die App sollte erstellt und auf einer neuen Browserseite geöffnet werden.

  2. Visual Studio Code wechselt außerdem zum Fenster Ausführen und debuggen, in dem Sie die App neu starten oder beenden können.

    Screenshot des Debugfensters in Visual Studio Code

  3. Drücken Sie UMSCHALT + F5, um die App zu beenden.

Herunterladen der Blazing Pizza-Ressourcen und Startdateien

Sie klonen jetzt die vorhandenen Blazor-App-Projektdateien Ihres Teams aus dem GitHub-Repository.

  1. Löschen Sie Ihren Ordner BlazingPizza mit dem Datei-Explorer oder in Visual Studio Code.

  2. Klonen Sie im Terminal die aktuellen Arbeitsdateien in einen neuen Ordner BlazingPizza.

    git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza

  3. Führen Sie die aktuelle Version der App aus. Drücken Sie F5.

    Screenshot: Blazing Pizza-Starter-App

Zusammenstellen von Pizzas

Mit der Komponente Pages/Index.razor können Kunden die Pizzen auswählen und konfigurieren, die sie bestellen möchten. Die Komponente reagiert auf die Stamm-URL der App.

Das Team hat außerdem Klassen erstellt, um die Modelle in der App darzustellen. Überprüfen Sie das aktuelle PizzaSpecial-Modell.

  1. Erweitern Sie in Visual Studio Code im Datei-Explorer den Ordner Model. Wählen Sie dann PizzaSpecial aus.

    namespace BlazingPizza;

/// <summary>
/// Represents a pre-configured template for a pizza a user can order
/// </summary>
public class PizzaSpecial
{
    public int Id { get; set; }

    public string Name { get; set; }

    public decimal BasePrice { get; set; }

    public string Description { get; set; }

    public string ImageUrl { get; set; }

    public string GetFormattedBasePrice() => BasePrice.ToString("0.00");
}

    Beachten Sie, dass eine Pizzabestellung über Name, BasePrice, Description und ImageUrl verfügt.

  2. Erweitern Sie im Datei-Explorer den Ordner Pages, und wählen Sie dann Index.razor aus.

    @page "/"

<h1>Blazing Pizzas</h1>

    Zurzeit gibt es nur ein einzelnes H1-Tag für den Titel. Sie werden nun Code hinzufügen, um Pizzaspezialitäten zu erstellen.

  3. Fügen Sie unter dem <h1>-Tag den folgenden C#-Code hinzu:

    @code {
    List<PizzaSpecial> specials = new();

    protected override void OnInitialized()
    {
        specials.AddRange(new List<PizzaSpecial>
        {
            new PizzaSpecial { Name = "The Baconatorizor", BasePrice =  11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"},
            new PizzaSpecial { Name = "Buffalo chicken", BasePrice =  12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"},
            new PizzaSpecial { Name = "Veggie Delight", BasePrice =  11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"},
            new PizzaSpecial { Name = "Margherita", BasePrice =  9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"},
            new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice =  11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"},
            new PizzaSpecial { Name = "Classic pepperoni", BasePrice =  10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" }               
        });
    }
}

    Der @code-Block erstellt ein Array, das die Pizzaspezialitäten enthält. Wenn die Seite initialisiert wird, werden dem Array sechs Pizzas hinzugefügt.

  4. Wählen Sie F5 oder Ausführen aus. Wählen Sie dann Debuggen starten aus.

    Die App sollte kompiliert und ausgeführt werden, und Sie stellen fest, dass sich nichts geändert hat. Der Code wird im clientseitigen HTML gar nicht verwendet. Das ändern wir gleich.

  5. Drücken Sie UMSCHALTTASTE + F5, oder wählen Sie Debuggen beenden aus.

  6. Ersetzen Sie <h1>Blazing Pizzas</h1> in Index.razor durch diesen Code:

    <div class="main">
  <h1>Blazing Pizzas</h1>
  <ul class="pizza-cards">
    @if (specials != null)
    {
      @foreach (var special in specials)
      {
        <li style="background-image: url('@special.ImageUrl')">
          <div class="pizza-info">
              <span class="title">@special.Name</span>
                  @special.Description
                <span class="price">@special.GetFormattedBasePrice()</span>
          </div>
        </li>
      }
    }
  </ul>
</div>

    Dieser Code kombiniert einfaches HTML mit Schleifen und Direktiven für den Memberzugriff. Die @foreach-Schleife erstellt ein <li>-Tag für jede Pizza im specials-Array.

    Innerhalb der Schleife wird für jede Pizzaspezialität der Name, die Beschreibung, der Preis und ein Bild mit Member-Direktiven angezeigt.

  7. Wählen Sie F5 oder Ausführen aus. Wählen Sie dann Debuggen starten aus.

    Screenshot einer Liste von Blazing Pizzas

Sie verfügen jetzt über eine Pizzabasiskomponente, mit der Kunden eine Pizza bestellen können. In den folgenden Übungen werden Sie diese Komponente weiter ausbauen.