Övning – Skapa ett användargränssnitt med Blazor-komponenter

5 minuter

I den här övningen börjar du skapa en ny Blazing Pizza-app för pizzaleveransföretaget. Företaget ger dig aktuell CSS, bilder och HTML från den gamla webbplatsen att arbeta med.

Note

Den här modulen använder .NET CLI och Visual Studio Code för lokal utveckling. När du har slutfört den här modulen kan du använda begreppen med hjälp av Visual Studio för Windows och Visual Studio för Mac för macOS. För fortsatt utveckling kan du använda Visual Studio Code för Windows, Linux och macOS.

I den här modulen används .NET 9.0 SDK. Kontrollera att du har .NET 9.0 installerat genom att köra följande kommando i önskad kommandoterminal:

dotnet --list-sdks

Utdata som liknar följande exempel visas:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

Kontrollera att en version som börjar med 9 visas. Om inget visas eller om kommandot inte hittas installerar du den senaste .NET 9.0 SDK:t.

Om du skapar din första Blazor-app följer du installationsanvisningarna för Blazor för att installera rätt version av .NET och kontrollera att datorn är korrekt konfigurerad. Stanna vid steget Skapa din app .

Skapa en ny Blazor-app

Med .NET kan du skapa nya projekt med valfri version av Visual Studio eller terminalkommandon. Följande övningar visar stegen med hjälp av terminalen och Visual Studio Code.

Öppna Visual Studio Code.
Öppna den integrerade terminalen från Visual Studio Code genom att välja Visa. Välj sedan Terminal på huvudmenyn.
I terminalen går du dit du vill skapa projektet.
Kör dotnet-terminalkommandot:
```
dotnet new blazor -o BlazingPizza
```
Det här kommandot skapar ett nytt Blazor-serverprojekt i en mapp med namnet BlazingPizza.
Välj Arkiv>Öppna mapp.
I dialogrutan Öppna går du till mappen BlazingPizza och väljer Välj mapp.

Med de här filerna kan du köra och felsöka Din Blazor-app med Visual Studio Codes felsökningsverktyg.

Testa din inställning

Du kan välja att använda terminalen eller Visual Studio Code för att köra din app.

Starta Blazor-appen i terminalfönstret med:
```
dotnet watch
```
Det här kommandot skapar och startar sedan appen. Klockan kommandot säger dotnet att titta på alla dina projektfiler. Alla ändringar du gör i projektfiler utlöser automatiskt en återskapande och startar sedan om appen.

Datorns standardwebbläsare bör öppna en ny sida på http://localhost:5000.
Om du vill stoppa appen väljer du Ctrl + C i terminalfönstret.

Du kan också köra och felsöka projektet med Visual Studio Code.

I Visual Studio Code väljer du F5. Eller på menyn Kör väljer du Starta felsökning.

Appen bör skapa och öppna en ny webbläsarsida.
Visual Studio Code växlar också till fönstret Kör och felsöka som gör att du kan starta om eller stoppa din app.

Skärmbild som visar felsökningsfönstret i Visual Studio Code.
Om du vill stoppa appen väljer du Skift + F5.

Ladda ned Blazing Pizza-tillgångarna och startfilerna

Klona dina teams befintliga Blazor-appprojektfiler från GitHub-lagringsplatsen.

Ta bort mappen BlazingPizza med utforskaren eller Visual Studio Code.

I terminalen klonar du de aktuella arbetsfilerna till en ny BlazingPizza-mapp .

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

Kör den aktuella versionen av appen. Välj F5.

Skärmbild som visar startappen Blazing Pizza.

Gör några pizzor

Med komponenten Pages/Index.razor kan kunderna välja och konfigurera de pizzor som de vill beställa. Komponenten svarar på appens rot-URL.

Teamet skapade också klasser för att representera modellerna i appen. Granska den aktuella PizzaSpecial modellen.

Expandera mappen Modell i Utforskaren i Visual Studio Code. Välj sedan PizzaSpecial.

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");
}

Observera att en pizzabeställning har en Name, BasePrice, Descriptionoch ImageUrl.

I utforskaren expanderar du Sidor och väljer sedan Index.razor.
```
@page "/"

<h1>Blazing Pizzas</h1>
```
För närvarande finns det bara en enda H1-tagg för titeln. Du ska lägga till kod för att skapa pizzaspecialer.

Under taggen <h1> lägger du till den här C#-koden:

@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" }               
        });
    }
}

Blocket @code skapar en matris för pizzaspecialerna. När sidan initieras läggs sex pizzor till i matrisen.

Välj F5 eller välj Kör. Välj sedan Starta felsökning.

När appen kompileras och körs ser du ingenting. Koden används inte av något i HTML på klientsidan. Vi fixar det.
Välj Skift + F5 eller välj Stoppa felsökning.

Ersätt med den här koden i Index.razor<h1>Blazing Pizzas</h1>:

<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>

Den här koden kombinerar vanlig HTML tillsammans med loopnings- och medlemsåtkomstdirektiv. Loopen @foreach skapar en <li> tagg för varje pizza i matrisen specials .

Inuti slingan visar varje speciell pizza sitt namn, beskrivning, pris och bild med medlemsdirektiv.

Välj F5 eller välj Kör. Välj sedan Starta felsökning.

Skärmbild som visar en lista över flammande pizzor.

Nu har du en pizzabaskomponent som gör att kunderna kan beställa en pizza. I följande övningar förbättrar du den här komponenten.

Feedback

Var den här sidan till hjälp?