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

Завершено

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

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

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

1. Откройте Файл Pages\PizzaList.cshtml.cs и добавьте в класс следующее PizzaListModel свойство:

   [BindProperty]
   public Pizza NewPizza { get; set; } = default!;
   

   В приведенном выше коде:

   • Свойство с именем NewPizza добавляется в PizzaListModel класс .
     • NewPizza является объектом Pizza.
   • Атрибут BindProperty применяется к свойству NewPizza.
     • Атрибут BindProperty используется для привязки NewPizza свойства к странице Razor. При выполнении NewPizza HTTP-запроса POST свойство будет заполнено входными данными пользователя.
   • Свойство NewPizza инициализировано значением параметра default!.
     • Ключевое слово default! используется для инициализации NewPizza свойства в null. Это предотвращает создание компилятором предупреждения о неинициализации NewPizza свойства.

2. Теперь добавьте обработчик страницы для 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 обработчик страницы, который повторно отрисовывает страницу с обновленным списком пицц.

3. Сохраните файл. Если вы используете GitHub Codespaces, файл сохраняется автоматически.

4. Вернитесь в запущенный dotnet watch терминал и нажмите клавиши CTRL+R , чтобы перезагрузить приложение.

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

1. Откройте Pages\PizzaList.cshtml и замените <!-- New Pizza form will go here --> на следующий код:

   <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 на сервер.

2. В нижней части страницы добавьте следующий код:

   @section Scripts {
   <partial name="_ValidationScriptsPartial" />
   }
   

   Это встраивает скрипты проверки на стороне клиента на страницу. Скрипты проверки на стороне клиента используются для проверки введенных пользователем данных перед отправкой формы на сервер.

3. Сохраните файл. В браузере страница Список пицц обновляется с помощью новой формы. Если вы используете GitHub Codespaces, файл сохраняется автоматически, но вам потребуется обновить вкладку браузера вручную.

   

4. Введите новую пиццу и нажмите кнопку Создать . Страница должна обновиться и отобразить новую пиццу в списке.

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

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

1. Вернитесь в 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 обработчик страницы, который повторно отрисовывает страницу с обновленным списком пицц.

2. Сохраните файл. Если вы используете GitHub Codespaces, файл сохраняется автоматически.

3. Протестируйте кнопку Удалить для пиццы. Страница должна обновиться, а выбранная пицца должна быть удалена из списка.

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

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

1.

Какой метод следует использовать для обработки отправки формы в PageModel?

OnPost Используйте метод (или OnPostAsync).

Метод OnGet.

Для обработки отправки формы следует использовать DataAnnotation.

Вы должны ответить на все вопросы перед проверкой.