Ćwiczenie — dodawanie nowego formularza pizzy

10 min

W tej lekcji dokończysz stronę Lista pizzy, dodając formularz, aby utworzyć nowe pizze. Dodasz również procedury obsługi stron w celu obsługi przesyłania formularzy i usuwania pizzy.

Dodawanie formularza w celu utworzenia nowych pizz

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

Otwórz plik Pages\PizzaList.cshtml.cs i dodaj następującą PizzaListModel właściwość do klasy:
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
Powyższy kod ma następujące działanie:
- Właściwość o nazwie NewPizza jest dodawana do PizzaListModel klasy.
  - NewPizza jest obiektem Pizza .
- Atrybut BindProperty jest stosowany 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 wartość default!.
  - Słowo default! kluczowe jest używane do inicjowania NewPizza właściwości na wartość null. Zapobiega to generowaniu przez kompilator ostrzeżenia o NewPizza niezainicjowanej właściwości.
Teraz dodaj procedurę obsługi strony dla żądania HTTP POST. W tym samym pliku dodaj następującą metodę PizzaListModel do klasy :
```
public IActionResult OnPost()
{
    if (!ModelState.IsValid || NewPizza == null)
    {
        return Page();
    }

    _service.AddPizza(NewPizza);

    return RedirectToAction("Get");
}
```
Powyższy kod ma następujące działanie:
- 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, metoda jest wywoływana w Page 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 stron, co spowoduje ponowne renderowanie strony ze zaktualizowaną listą pizz.
Zapisz plik. Jeśli używasz usługi GitHub Codespaces, plik jest zapisywany automatycznie.
Wróć do uruchomionego dotnet watch terminalu i naciśnij klawisze Ctrl+R , aby ponownie załadować aplikację.

Teraz, gdy istnieje procedura obsługi strony do obsługi przesyłania 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>

Powyższy kod ma następujące działanie:

Atrybut asp-validation-summary służy do wyświetlania błędów walidacji dla całego modelu.
Każde pole formularza (<input> i elementy) i <select> każda z nich <label> jest powiązana z odpowiednią NewPizza właściwością 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 wyświetlanej 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ę.
Przycisk przesyłania z etykietą jest dodawany Create do formularza w celu opublikowania danych formularza na serwerze. 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" />
}
```
Spowoduje to wstrzyknięcie skryptów weryfikacji 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 do serwera.
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ć i wyświetlić nową pizzę na liście.

Dodawanie procedury obsługi strony w celu usunięcia pizzy

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

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

    return RedirectToAction("Get");
}
```
Powyższy kod ma następujące działanie:
- Metoda OnPostDelete jest wywoływana, gdy użytkownik kliknie przycisk Usuń dla pizzy.
  - Strona wie, że używa tej metody, ponieważ asp-page-handler atrybut na przycisku Usuń w pliku Pages\PizzaList.cshtml jest ustawiony na Deletewartość .
- 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 jest wywoływana DeletePizza w obiekcie w _service celu usunięcia pizzy.
- Metoda RedirectToAction służy do przekierowywania użytkownika do Get programu obsługi stron, co spowoduje ponowne renderowanie strony ze zaktualizowaną listą pizz.
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 usuwanie pizzy.

Sprawdź swoją wiedzę

Kontynuuj

Ćwiczenie — dodawanie nowego formularza pizzy

Dodawanie formularza w celu utworzenia nowych pizz

Dodawanie procedury obsługi strony w celu usunięcia pizzy

Sprawdź swoją wiedzę

Opinia