Ćwiczenie — dodawanie nowego formularza pizzy

10 min

W tej lekcji dokończysz stronę Lista pizzy, dodając formularz do tworzenia nowych pizz. Dodasz również procedury obsługi stron, aby obsługiwać przesyłanie formularzy i usuwanie pizz.

Dodaj formularz, aby utworzyć nowe pizze

Zacznijmy od dodania właściwości do PizzaListModel klasy w celu reprezentowania danych wejściowych użytkownika. Dodasz również odpowiedni obsługiwacz stron.

Otwórz plik Pages\PizzaList.cshtml.cs i dodaj następującą właściwość do PizzaListModel klasy:
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
W poprzednim kodzie:
- Właściwość o nazwie NewPizza jest dodawana do PizzaListModel klasy.
  - NewPizza jest obiektem Pizza .
- Atrybut BindProperty jest zastosowany do właściwości NewPizza.
  - Atrybut BindProperty jest używany do powiązania NewPizza właściwości ze stroną Razor. Po wysłaniu NewPizza żądania HTTP POST właściwość zostanie wypełniona danymi wejściowymi użytkownika.
- Właściwość NewPizza jest inicjowana na default!.
  - Słowo kluczowe default! jest używane do zainicjowania właściwości NewPizza na null. Zapobiega to temu, że kompilator wygeneruje ostrzeżenie o niezainicjowanej właściwości NewPizza.
Teraz dodaj procedurę obsługi strony dla protokołu HTTP POST. W tym samym pliku dodaj następującą metodę do PizzaListModel klasy:
```
public IActionResult OnPost()
{
    if (!ModelState.IsValid || NewPizza == null)
    {
        return Page();
    }

    _service.AddPizza(NewPizza);

    return RedirectToAction("Get");
}
```
W poprzednim kodzie:
- Właściwość ModelState.IsValid służy do określania, czy dane wejściowe użytkownika są prawidłowe.
  - Reguły walidacji są wnioskowane z atrybutów (takich jak Required i Range) w Pizza klasie Models\Pizza.cs.
  - Jeśli dane wejściowe użytkownika są nieprawidłowe, Page metoda jest wywoływana w celu ponownego renderowania strony.
- Właściwość NewPizza służy do dodawania nowej pizzy do _service obiektu.
- Metoda RedirectToAction służy do przekierowywania użytkownika do Get programu obsługi strony, co spowoduje ponowne renderowanie strony ze zaktualizowaną listą pizzy.
Zapisz plik. Jeśli używasz usługi GitHub Codespaces, plik jest zapisywany automatycznie.
Wróć do uruchomionego dotnet watch terminalu i naciśnij Ctrl+R , aby ponownie załadować aplikację.

Teraz, gdy istnieje procedura obsługująca przesyłanie formularza, dodajmy formularz do strony Razor.

Otwórz plik Pages\PizzaList.cshtml i zastąp element  następującym kodem:

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

W poprzednim kodzie:

Atrybut asp-validation-summary służy do wyświetlania błędów walidacji dla całego modelu.
Każde pole formularza (<input> i <select> elementy) oraz każdy <label> jest powiązany z odpowiednią właściwością NewPizza przy użyciu atrybutu asp-for.
Atrybut asp-validation-for służy do wyświetlania błędów walidacji dla każdego pola formularza.
Metoda @Html.DisplayNameFor służy do wyświetlania nazwy IsGlutenFree właściwości. Jest to metoda pomocnika Razor używana do wyświetlania nazwy wyświetlanej właściwości. Wykonanie etykiety w ten sposób gwarantuje, że pole wyboru jest zaznaczone, gdy użytkownik kliknie etykietę.
Do formularza dodawany jest przycisk przesyłania oznaczony etykietą Create w celu wysłania danych formularza na serwer. W czasie wykonywania, gdy użytkownik wybierze ten przycisk Utwórz , przeglądarka wysyła formularz jako żądanie HTTP POST do serwera.

W dolnej części strony dodaj następujący kod:
```
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
```
Powoduje to wstrzyknięcie skryptów walidacji po stronie klienta do strony. Skrypty weryfikacji po stronie klienta są używane do sprawdzania poprawności danych wejściowych użytkownika przed przesłaniem formularza na serwer.
Zapisz plik. W przeglądarce strona Lista pizzy zostanie odświeżona przy użyciu nowego formularza. Jeśli używasz usługi GitHub Codespaces, plik jest zapisywany automatycznie, ale musisz ręcznie odświeżyć kartę przeglądarki.
Wprowadź nową pizzę i wybierz przycisk Utwórz . Strona powinna odświeżyć się i wyświetlić nową pizzę na liście.

Dodaj obsługę strony do usunięcia pizz.

Jest jeden ostatni kawałek, który należy dodać do strony Lista pizzy: procedurę obsługi strony w celu usunięcia pizzy. Przyciski usuwania pizzy są już na stronie, ale jeszcze nic nie robią.

Po powrocie do klasy Pages\PizzaList.cshtml.cs dodaj następującą PizzaListModel metodę:
```
public IActionResult OnPostDelete(int id)
{
    _service.DeletePizza(id);

    return RedirectToAction("Get");
}
```
W poprzednim kodzie:
- Metoda OnPostDelete jest wywoływana, gdy użytkownik kliknie przycisk Usuń dla pizzy.
  - Strona wie, aby używać tej metody, ponieważ atrybut na przycisku asp-page-handler w pliku Pages\PizzaList.cshtml jest ustawiony na .
- Parametr id służy do identyfikowania pizzy do usunięcia.
  - Parametr id jest powiązany z wartością id trasy w adresie URL. Jest to realizowane za pomocą atrybutu asp-route-id na przycisku Usuń w pliku Pages\PizzaList.cshtml.
- Metoda DeletePizza jest wywoływana na obiekcie _service w celu usunięcia pizzy.
- Metoda RedirectToAction służy do przekierowywania użytkownika do Get programu obsługi strony, co spowoduje ponowne renderowanie strony ze zaktualizowaną listą pizzy.
Zapisz plik. Jeśli używasz usługi GitHub Codespaces, plik jest zapisywany automatycznie.
Przetestuj przycisk Usuń dla pizzy. Strona powinna zostać odświeżona, a wybrana pizza powinna zostać usunięta z listy.

Gratulacje! Pomyślnie utworzono stronę Razor, która wyświetla listę pizz, umożliwia użytkownikowi dodawanie nowych pizz, a także umożliwia użytkownikowi usunięcie pizzy.

Sprzężenie zwrotne

Czy ta strona była pomocna?

Ćwiczenie — dodawanie nowego formularza pizzy

Sprawdź swoją wiedzę

Sprzężenie zwrotne