Ćwiczenie — tworzenie interfejsu użytkownika za pomocą składników platformy Blazor

5 min

W tym ćwiczeniu zaczniesz tworzyć nową aplikację Blazing Pizza dla firmy dostarczającej pizzę. Firma udostępniła bieżący kod CSS, obrazy i kod HTML ze swojej starej witryny do pracy.

Uwaga

W tym module do programowania lokalnego użyto interfejsu wiersza polecenia platformy .NET i programu Visual Studio Code. Po zakończeniu tego modułu można zastosować koncepcje przy użyciu programu Visual Studio dla systemu Windows i Visual Studio dla komputerów Mac dla systemu macOS. W celu dalszego opracowywania można używać programu Visual Studio Code dla systemów Windows, Linux i macOS.

Jeśli wcześniej nie utworzono aplikacji Blazor, postępuj zgodnie z instrukcjami konfiguracji platformy Blazor , aby zainstalować poprawną wersję platformy .NET i sprawdzić, czy maszyna została prawidłowo skonfigurowana. Zatrzymaj się w kroku Tworzenie aplikacji .

Tworzenie nowej aplikacji platformy Blazor

W tym module jest używany zestaw .NET 6.0 SDK. Upewnij się, że masz zainstalowany program .NET 6.0, uruchamiając następujące polecenie w preferowanym terminalu:

dotnet --list-sdks

Pojawia się dane wyjściowe podobne do następującego:

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

Upewnij się, że na liście znajduje się wersja rozpoczynająca się od 6 . Jeśli na liście nie ma żadnej listy lub nie można odnaleźć polecenia, zainstaluj najnowszy zestaw SDK platformy .NET 6.0.

Platforma .NET umożliwia tworzenie nowych projektów przy użyciu dowolnej wersji poleceń programu Visual Studio lub terminalu. W poniższych ćwiczeniach przedstawiono kroki przy użyciu terminalu i programu Visual Studio Code.

Otwórz Visual Studio Code.
Otwórz zintegrowany terminal z programu Visual Studio Code, wybierając pozycję Widok. Następnie w menu głównym wybierz pozycję Terminal.
W terminalu przejdź do miejsca, w którym chcesz utworzyć projekt.
Uruchom polecenie dotnet terminal:
```
dotnet new blazorserver -o BlazingPizza --no-https true -f net6.0
```
To polecenie tworzy nowy projekt serwera Blazor w folderze o nazwie BlazingPizza. Informuje również projekt o wyłączeniu protokołu HTTPS.
Wybierz pozycję Plik>Otwórz folder.
W oknie dialogowym Otwieranie przejdź do folderu BlazingPizza i wybierz pozycję Wybierz folder.
Program Visual Studio Code monituje o dodanie wymaganych zasobów do kompilowania i debugowania projektu. Wybierz opcję Tak.
Program Visual Studio Code dodaje launch.json i tasks.json w folderze .vscode projektu.

Te pliki umożliwiają uruchamianie i debugowanie aplikacji Blazor przy użyciu narzędzi debugowania programu Visual Studio Code.

Testowanie konfiguracji

Możesz użyć terminalu lub programu Visual Studio Code do uruchomienia aplikacji.

W oknie terminalu uruchom aplikację Blazor za pomocą polecenia:
```
dotnet watch
```
To polecenie kompiluje, a następnie uruchamia aplikację. Polecenie zegarka informuje dotnet o obserwowaniu wszystkich plików projektu. Wszelkie zmiany wprowadzone w plikach projektu automatycznie wyzwalają ponowną kompilację, a następnie ponownie uruchom aplikację.

Domyślna przeglądarka komputera powinna otworzyć nową stronę pod adresem http://localhost:5000.
Aby zatrzymać aplikację, wybierz Ctrl + C w oknie terminalu.

Możesz również uruchomić i debugować projekt za pomocą programu Visual Studio Code.

W programie Visual Studio Code wybierz pozycję F5. Lub w menu Uruchom wybierz pozycję Rozpocznij debugowanie.

Aplikacja powinna skompilować i otworzyć nową stronę przeglądarki.
Program Visual Studio Code przełącza się również do okna Uruchamianie i debugowanie , które umożliwia ponowne uruchomienie lub zatrzymanie aplikacji.
Wybierz pozycję Shift + F5, aby zatrzymać aplikację.

Pobieranie zasobów Blazing Pizza i plików startowych

Teraz sklonujesz istniejące pliki projektu aplikacji Blazor zespołów z repozytorium GitHub.

Usuń folder BlazingPizza przy użyciu eksploratora plików lub programu Visual Studio Code.

W terminalu sklonuj bieżące pliki robocze do nowego folderu BlazingPizza .

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

Uruchom bieżącą wersję aplikacji. Wybierz F5.

Zrób pizzę

Składnik Pages/Index.razor umożliwia klientom wybieranie i konfigurowanie pizz, które chcą zamówić. Składnik odpowiada na główny adres URL aplikacji.

Zespół utworzył również klasy reprezentujące modele w aplikacji. Przejrzyj bieżący PizzaSpecial model.

W programie Visual Studio Code w Eksploratorze plików rozwiń folder Model . Następnie wybierz pozycję 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");
}

Zwróć uwagę, że zamówienie pizzy ma wartość Name, , BasePriceDescriptioni ImageUrl.

W Eksploratorze plików rozwiń węzeł Pages , a następnie wybierz pozycję Index.razor.
```
@page "/"

<h1>Blazing Pizzas</h1>
```
W tej chwili istnieje tylko jeden tag H1 dla tytułu. Dodasz kod, aby utworzyć specjalne pizze.

W obszarze tagu <h1> dodaj następujący kod w języku C#:

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

Blok @code tworzy tablicę do przechowywania specjalnych pizzy. Po zainicjowaniu strony dodaje sześć pizz do tablicy.

Wybierz pozycję F5 lub wybierz pozycję Uruchom. Następnie wybierz pozycję Rozpocznij debugowanie.

Aplikacja powinna zostać skompilowana i uruchomiona. Zobaczysz, że nic się nie zmieniło. Kod nie jest używany przez nic w kodzie HTML po stronie klienta. Naprawmy to.
Wybierz pozycję Shift + F5 lub wybierz pozycję Zatrzymaj debugowanie.

W pliku Index.razor zastąp ciąg <h1>Blazing Pizzas</h1> następującym kodem:

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

Ten kod łączy zwykły kod HTML wraz z dyrektywami pętli i dostępu do składowych. Pętla @foreach tworzy <li> tag dla każdej pizzy w tablicy specials .

Wewnątrz pętli każda specjalna pizza wyświetla swoją nazwę, opis, cenę i obraz z dyrektywami składowymi.

Wybierz pozycję F5 lub wybierz pozycję Uruchom. Następnie wybierz pozycję Rozpocznij debugowanie.

Masz teraz składnik bazy pizzy, aby umożliwić klientom zamawianie pizzy. Ulepszysz ten składnik w kolejnych ćwiczeniach.

Kontynuuj

Ćwiczenie — tworzenie interfejsu użytkownika za pomocą składników platformy Blazor

Tworzenie nowej aplikacji platformy Blazor

Testowanie konfiguracji

Pobieranie zasobów Blazing Pizza i plików startowych

Zrób pizzę

Opinia