Упражнение. Создание пользовательского интерфейса с компонентами Blazor

5 мин

В этом упражнении вы начнете создавать новое приложение Blazing Pizza для компании по доставке пиццы. Компания предоставляет текущий CSS, изображения и HTML-код со старого сайта для работы с ним.

Note

В этом модуле используются .NET CLI и Visual Studio Code для локальной разработки. После завершения этого модуля вы сможете применять изученные концепции для работы в Visual Studio (Windows) или Visual Studio для Mac (macOS). Для продолжения разработки можно использовать Visual Studio Code для Windows, Linux и macOS.

Этот модуль использует пакет SDK для .NET 9.0. Убедитесь, что установлен .NET 9.0, выполнив следующую команду в предпочтительном терминале команд:

dotnet --list-sdks

Выходные данные, аналогичные следующему примеру, отображаются:

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

Убедитесь, что в списке есть версия, которая начинается с цифры 9. Если ни один из них отсутствует или команда не найдена, установите последний пакет SDK для .NET 9.0.

Если вы создаете первое приложение Blazor, следуйте инструкциям по настройке Blazor, чтобы установить правильную версию .NET и проверить правильность настройки компьютера. Остановитесь на шаге Create your app (Создание приложения).

Создание приложения Blazor

.NET позволяет создавать новые проекты с помощью любой версией Visual Studio или команд терминала. В следующих упражнениях будут показаны действия с использованием терминала и Visual Studio Code.

Откройте Visual Studio Code.
Откройте интегрированный терминал Visual Studio Code, выбрав Вид. Затем в главном меню выберите Терминал.
В окне терминала перейдите в любое расположение, где вы хотите сохранить созданный проект.
Выполните команду терминала dotnet:
```
dotnet new blazor -o BlazingPizza
```
Эта команда создает новый серверный проект Blazor в папке с именем BlazingPizza.
Последовательно щелкните File (Файл)>Open folder (Открыть папку).
В диалоговом окне "Открыть" перейдите в папку BlazingPizza и щелкните Выбрать папку.

Эти файлы позволяют запускать и отлаживать приложение Blazor с помощью средств отладки Visual Studio Code.

Тестирование конфигурации

Приложение можно запустить с помощью терминала или Visual Studio Code.

Запустить приложение Blazor в окне терминала:
```
dotnet watch
```
Эта команда выполняет сборку и запуск приложения. Команда watch указывает dotnet просмотреть все файлы проекта. Любые изменения, вносимые в файлы проектов, автоматически активируют повторную сборку и перезапуск приложения.

На компьютере откроется браузер по умолчанию и отобразит страницу http://localhost:5000.
Чтобы прервать работу приложения, нажмите в окне терминала сочетание клавиш CTRL + C.

Запустить и отладить проект также можно с помощью Visual Studio Code.

В Visual Studio Code выберите F5. Выберите Начать отладку в меню Выполнить.

Приложение выполнит сборку и откроет новую страницу в браузере.
Visual Studio Code также откроет окно Запуск и отладка, в котором можно перезапустить или остановить приложение.

Снимок экрана: окно отладки в Visual Studio Code.
Чтобы остановить приложение, нажмите клавиши SHIFT + F5.

Скачивание ресурсов и исходных файлов для Blazing Pizza

Клонируйте файлы существующего проекта приложения Blazor вашей команды из репозитория GitHub.

Удалите папку BlazingPizza в проводнике или с помощью Visual Studio Code.
В терминале клонируйте текущие рабочие файлы в новую папку BlazingPizza.
```
git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza
```
Запустите текущую версию приложения. Нажмите клавишу F5.

Снимок экрана: базовое приложение BlazingPizza.

Создание пицц

Компонент Pages/Index.razor позволяет клиентам выбирать и изменять пиццу, которую они хотят заказать. Этот компонент отвечает на корневой URL-адрес приложения.

Команда также создала классы для представления моделей в приложении. Проверьте текущую модель PizzaSpecial.

В проводнике Visual Studio Code разверните папку Model. Затем выберите 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");
}

Обратите внимание, что заказ на пиццу Nameимеет , BasePriceDescriptionи ImageUrl.

В проводнике разверните элемент Pages и выберите файл Index.razor.
```
@page "/"

<h1>Blazing Pizzas</h1>
```
В данный момент здесь есть лишь один тег H1 для заголовка. Мы добавим сюда код для создания особых пицц.

Под тегом <h1> добавьте приведенный ниже код 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" }               
        });
    }
}

Блок @code создает массив для хранения специальных предложений по пицце. При инициализации страницы он добавляет шесть пицц в массив.

Нажмите клавишу F5 или выберите действие Выполнить. Теперь выберите Начать отладку.

Когда приложение компилируется и запускается, вы видите, что ничего. Код не используется HTML на стороне клиента. Давайте исправим это.
Нажмите сочетание клавиш Shift + F5 или выберите Остановить отладку.
В 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>
```
Этот код сочетает простой HTML с директивами циклов и доступа к элементам. Цикл @foreach создает тег <li> для каждой пиццы в массиве specials.

Внутри цикла директивы элементов для каждой специальной пиццы отображают название, описание, цену и изображение.
Нажмите клавишу F5 или выберите действие Выполнить. Теперь выберите Начать отладку.

Снимок экрана: список пицц.

Теперь у вас есть базовый компонент пиццы, позволяющий клиентам заказать пиццу. В следующих упражнениях вы улучшаете этот компонент.

Обратная связь

Была ли эта страница полезна?