Gyakorlat – Új pizza űrlap hozzáadása

10 perc

Ebben a szakaszban befejezi a Pizzalista oldalt azzal, hogy hozzáad egy űrlapot, amely lehetővé teszi új pizzák létrehozását. Oldalkezelőket is hozzáad a pizzák űrlapbeküldésének és törlésének kezeléséhez.

Adjunk hozzá egy űrlapot új pizzák létrehozásához

Kezdjük azzal, hogy tulajdonságokat ad hozzá az PizzaListModel osztályhoz, hogy a felhasználó bemenetét képviselje. A megfelelő oldalkezelőt is hozzá fogja adni.

Nyissa meg a Pages\PizzaList.cshtml.cs fájlt, és adja hozzá a következő tulajdonságot az PizzaListModel osztályhoz:
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
Az előző kódban:
- A rendszer hozzáad egy elnevezett NewPizza tulajdonságot az PizzaListModel osztályhoz.
  - NewPizza egy Pizza objektum.
- Az BindProperty attribútum a tulajdonságra NewPizza lesz alkalmazva.
  - A BindProperty attribútum a NewPizza tulajdonság Razor-laphoz kötésére szolgál. HTTP POST kérés esetén a NewPizza tulajdonság a felhasználó bemenetével lesz feltöltve.
- A NewPizza tulajdonság inicializálása a következőre történik default!: .
  - A default! kulcsszó a NewPizza tulajdonság inicializálására null értékre szolgál. Ez megakadályozza, hogy a fordító figyelmeztetést generáljon a NewPizza nem inicializált tulajdonságról.
Most adja hozzá a HTTP POST oldalkezelőt. Ugyanabban a fájlban adja hozzá a következő metódust az PizzaListModel osztályhoz:
```
public IActionResult OnPost()
{
    if (!ModelState.IsValid || NewPizza == null)
    {
        return Page();
    }

    _service.AddPizza(NewPizza);

    return RedirectToAction("Get");
}
```
Az előző kódban:
- A ModelState.IsValid tulajdonság annak megállapítására szolgál, hogy a felhasználó bemenete érvényes-e.
  - Az érvényesítési szabályokat a Required osztályban található attribútumokból következtetik, például Range és Pizza a osztályban.
  - Ha a felhasználó bemenete érvénytelen, a rendszer meghívja a Page metódust a lap újbóli megjelenítésére.
- A NewPizza tulajdonság egy új pizza hozzáadására szolgál az _service objektumhoz.
- Ezzel RedirectToAction a módszerrel átirányíthatja a felhasználót az Get oldalkezelőbe, amely újra rendereli az oldalt a frissített pizzalistával.
Mentse a fájlt. Ha GitHub Codespaces-t használ, a fájl automatikusan ment.
Térjen vissza a futó dotnet watch terminálhoz, és nyomja le a Ctrl+R billentyűkombinációt az alkalmazás újratöltéséhez.

Most, hogy van egy lapkezelő, amely kezeli az űrlap beküldését, adja hozzá az űrlapot a Razor-oldalhoz.

Nyissa meg a Pages\PizzaList.cshtml fájlt, és cserélje le a  következő kódra:

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

Az előző kódban:

Az asp-validation-summary attribútum a teljes modell érvényesítési hibáinak megjelenítésére szolgál.
Minden űrlapmező (<input> és <select> elem), valamint mindegyik <label> az attribútum NewPizza használatával van kötve a megfelelő asp-for tulajdonsághoz.
Az asp-validation-for attribútum az egyes űrlapmezők érvényesítési hibáinak megjelenítésére szolgál.
A @Html.DisplayNameFor metódus a IsGlutenFree tulajdonság megjelenítendő nevének megjelenítésére szolgál. Ez egy Razor-segédmetódus, amelyet egy tulajdonság nevének megjelenítésére használnak. Ha így végzi a címkét, akkor a jelölőnégyzet be van jelölve, amikor a felhasználó a címkére kattint.
A rendszer hozzáad egy küldés gombot Create az űrlaphoz, hogy közzétehesse az űrlapadatokat a kiszolgálón. Futásidőben, amikor a felhasználó ezt a Létrehozás gombot választja, a böngésző HTTP POST-kérésként küldi el az űrlapot a kiszolgálónak.

A lap alján adja hozzá a következő kódot:
```
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
```
Ez beszúrja az ügyféloldali érvényesítési szkripteket a lapra. Az ügyféloldali érvényesítési szkriptek a felhasználó bemenetének ellenőrzésére szolgálnak, mielőtt az űrlapot elküldené a kiszolgálónak.
Mentse a fájlt. A böngészőben a Pizzalista oldal frissül az új űrlappal. GitHub Codespaces használata esetén a fájl automatikusan menti a fájlt, de manuálisan kell frissítenie a böngészőlapot.
Írjon be egy új pizzát, és válassza a Létrehozás gombot. Az oldalnak frissítenie kell, és meg kell jelenítenie az új pizzát a listában.

Oldalkezelő hozzáadása pizzák törléséhez

Van egy utolsó darab, amit hozzá kell adni a Pizzalista oldalhoz: egy lapkezelőt a pizzák törléséhez. A pizzák törlésére vonatkozó gombok már szerepelnek az oldalon, de még nem tesznek semmit.

A Pages\PizzaList.cshtml.cs lapra visszatérve adja hozzá a következő metódust az PizzaListModel osztályhoz:
```
public IActionResult OnPostDelete(int id)
{
    _service.DeletePizza(id);

    return RedirectToAction("Get");
}
```
Az előző kódban:
- A OnPostDelete metódus akkor lesz meghívva, ha a felhasználó a Törlés gombra kattint egy pizza esetében.
  - A lap tudja, hogy ezt a módszert kell használnia, mert a asp-page-handlerPages\PizzaList.cshtmlDelete gombjának attribútuma a következőre Deletevan állítva: .
- A id paraméter a törölni kívánt pizza azonosítására szolgál.
  - A id paraméter az id URL-cím útvonalértékéhez van kötve. Ez a asp-route-idPages\PizzaList.cshtmlTörlés gombjának attribútumával történik.
- A DeletePizza metódus meghívja az _service objektumot, hogy törölje a pizzát.
- Ezzel RedirectToAction a módszerrel átirányíthatja a felhasználót az Get oldalkezelőbe, amely újra rendereli az oldalt a frissített pizzalistával.
Mentse a fájlt. Ha GitHub Codespaces-t használ, a fájl automatikusan ment.
Tesztelje a Delete gombot egy pizzához. A lapnak frissülnie kell, és a kiválasztott pizzát el kell távolítani a listáról.

Gratulálok! Sikeresen létrehozott egy Razor-oldalt, amely megjeleníti a pizzák listáját, lehetővé teszi, hogy a felhasználó új pizzákat vegyen fel, és lehetővé teszi a felhasználó számára a pizzák törlését is.

Visszajelzés

Hasznosnak találta ezt az oldalt?

Gyakorlat – Új pizza űrlap hozzáadása

Tesztelje tudását

Visszajelzés