Упражнение. Добавление новой формы пиццы

10 мин

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

Добавление формы для создания новых пицц

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

Откройте Pages\PizzaList.cshtml.cs и добавьте в класс следующее PizzaListModel свойство:
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
В предыдущем коде:
- В класс NewPizza добавлено свойство PizzaListModel.
  - NewPizza Pizza— это объект.
- Атрибут BindProperty применяется к свойству NewPizza .
  - Атрибут BindProperty используется для привязки NewPizza свойства к странице Razor. При выполнении HTTP-запроса POST свойство NewPizza будет заполнено входными данными пользователя.
- Свойство NewPizza инициализировано в default!.
  - Ключевое слово default! используется для инициализации свойства NewPizza до null. Это предотвращает создание компилятором предупреждения о том, что свойство NewPizza неинициализировано.
Теперь добавьте обработчик страницы для HTTP POST. В том же файле добавьте следующий метод в PizzaListModel класс:
```
public IActionResult OnPost()
{
    if (!ModelState.IsValid || NewPizza == null)
    {
        return Page();
    }

    _service.AddPizza(NewPizza);

    return RedirectToAction("Get");
}
```
В предыдущем коде:
- Свойство ModelState.IsValid используется для определения допустимости входных данных пользователя.
  - Правила проверки выводятся из атрибутов (например Required , и Range) Pizza класса в Models\Pizza.cs.
  - Если входные данные пользователя недопустимы, метод Page вызывается для повторной отрисовки страницы.
- Свойство NewPizza используется для добавления новой пиццы в объект _service.
- Метод RedirectToAction используется для перенаправления пользователя на Get обработчик страницы, который заново отрисовывает страницу с обновленным списком пицц.
Сохраните файл. Если вы используете GitHub Codespaces, файл сохраняется автоматически.
Вернитесь к терминалу под управлением dotnet watch и нажмите клавиши CTRL+R , чтобы перезагрузить приложение.

Теперь, когда у нас есть обработчик страницы для обработки отправки формы, добавим форму на страницу «Razor».

Откройте Pages\PizzaList.cshtml и замените следующий  код:
```
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <label asp-for="NewPizza.Name" class="control-label"></label>
    <input asp-for="NewPizza.Name" class="form-control" />
    <span asp-validation-for="NewPizza.Name" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="NewPizza.Size" class="control-label"></label>
    <select asp-for="NewPizza.Size" class="form-control" id="PizzaSize">
        <option value="">-- Select Size --</option>
        <option value="Small">Small</option>
        <option value="Medium">Medium</option>
        <option value="Large">Large</option>
    </select>
    <span asp-validation-for="NewPizza.Size" class="text-danger"></span>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
        <input class="form-check-input" asp-for="NewPizza.IsGlutenFree" /> @Html.DisplayNameFor(model => model.NewPizza.IsGlutenFree)
    </label>
</div>
<div class="form-group">
    <label asp-for="NewPizza.Price" class="control-label"></label>
    <input asp-for="NewPizza.Price" class="form-control" />
    <span asp-validation-for="NewPizza.Price" class="text-danger"></span>
</div>
<div class="form-group">
    <input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
```
В предыдущем коде:
- Атрибут asp-validation-summary используется для отображения ошибок проверки для всей модели.
- Каждое поле формы (<input> и <select> элементы) и каждое из них <label> привязано к соответствующему NewPizza свойству с помощью атрибута asp-for .
- Атрибут asp-validation-for используется для отображения ошибок проверки для каждого поля формы.
- Метод @Html.DisplayNameFor используется для отображения имени свойства IsGlutenFree. Это вспомогательный метод Razor, используемый для отображения отображаемого имени свойства. Этот способ размещения метки гарантирует, что флажок будет выбран при щелчке на метке пользователем.
- Кнопка Create отправки добавляется в форму для публикации данных формы на сервер. Во время выполнения, когда пользователь нажимает эту кнопку "Создать ", браузер отправляет форму в виде HTTP-запроса POST на сервер.
В нижней части страницы добавьте следующий код:
```
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
```
Это внедряет скрипты проверки на стороне клиента на страницу. Скрипты проверки на стороне клиента используются для проверки входных данных пользователя перед отправкой формы на сервер.
Сохраните файл. В браузере страница "Список пиццы" обновляется с новой формой. Если вы используете GitHub Codespaces, файл сохраняется автоматически, но вам потребуется обновить вкладку браузера вручную.
Введите новую пиццу и нажмите кнопку "Создать ". Страница должна обновляться и отображать новую пиццу в списке.

Добавить обработчик страницы для удаления пицц

Есть один последний элемент, который нужно добавить на страницу списка пицц: обработчик для удаления пицц. Кнопки для удаления пиццы уже находятся на странице, но они еще ничего не делают.

Вернувшись в Pages\PizzaList.cshtml.cs, добавьте следующий метод в PizzaListModel класс:
```
public IActionResult OnPostDelete(int id)
{
    _service.DeletePizza(id);

    return RedirectToAction("Get");
}
```
В предыдущем коде:
- Метод OnPostDelete вызывается, когда пользователь нажимает кнопку "Удалить " для пиццы.
  - Страница знает, что этот метод используется, так как asp-page-handler для атрибута на кнопке "Удалить " в Pages\PizzaList.cshtml задано значение Delete.
- Параметр id используется для идентификации пиццы, подлежащей удалению.
  - Параметр id привязан к значению id маршрута в URL-адресе. Это достигается с помощью атрибута asp-route-id на кнопке "Удалить " в Pages\PizzaList.cshtml.
- Метод DeletePizza вызывается в объекте _service для удаления пиццы.
- Метод RedirectToAction используется для перенаправления пользователя на Get обработчик страницы, который заново отрисовывает страницу с обновленным списком пицц.
Сохраните файл. Если вы используете GitHub Codespaces, файл сохраняется автоматически.
Проверьте кнопку "Удалить " для пиццы. Страница должна обновляться, а выбранная пицца должна быть удалена из списка.

Поздравляю! Вы успешно создали страницу Razor, которая отображает список пицц, позволяет пользователю добавлять новые пиццы, а также позволяет пользователю удалять пиццы.

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

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

Упражнение. Добавление новой формы пиццы

Проверьте свои знания

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