Übung: Hinzufügen eines neuen Pizza-Formulars

10 Minuten

In dieser Einheit beenden Sie die Seite "Pizzaliste", indem Sie ein Formular hinzufügen, um neue Pizzas zu erstellen. Sie fügen auch Seitenhandler hinzu, um die Übermittlung von Formularen und Löschvorgänge für Pizzasorten zu verarbeiten.

Hinzufügen eines Formulars zum Erstellen neuer Pizzas

Beginnen wir damit, der PizzaListModel Klasse Eigenschaften hinzuzufügen, um die Eingabe des Benutzers darzustellen. Sie fügen auch den entsprechenden Seitenhandler hinzu.

Öffnen Sie Pages\PizzaList.cshtml.cs , und fügen Sie der PizzaListModel Klasse die folgende Eigenschaft hinzu:
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
Im vorhergehenden Code:
- Der Klasse PizzaListModel wird eine NewPizza genannte Eigenschaft hinzugefügt.
  - NewPizza ist ein Pizza Objekt.
- Das BindProperty Attribut wird auf die NewPizza Eigenschaft angewendet.
  - Das BindProperty Attribut wird verwendet, um die NewPizza Eigenschaft an die Razor-Seite zu binden. Wenn eine HTTP POST-Anforderung gestellt wird, wird die NewPizza Eigenschaft mit der Eingabe des Benutzers aufgefüllt.
- Die NewPizza-Eigenschaft wird mit default! initialisiert.
  - Das default! Schlüsselwort wird verwendet, um die NewPizza Eigenschaft auf null zu initialisieren. Dadurch wird verhindert, dass der Compiler eine Warnung darüber generiert, dass die NewPizza Eigenschaft nicht initialisiert wird.
Fügen Sie nun den Seitenhandler für HTTP POST hinzu. Fügen Sie in derselben Datei der PizzaListModel Klasse die folgende Methode hinzu:
```
public IActionResult OnPost()
{
    if (!ModelState.IsValid || NewPizza == null)
    {
        return Page();
    }

    _service.AddPizza(NewPizza);

    return RedirectToAction("Get");
}
```
Im vorhergehenden Code:
- Die ModelState.IsValid Eigenschaft wird verwendet, um zu bestimmen, ob die Eingabe des Benutzers gültig ist.
  - Die Gültigkeitsprüfungsregeln werden von Attributen (z. B. Required und Range) an der Pizza-Klasse in Models\Pizza.cs hergeleitet.
  - Wenn die Eingabe des Benutzers ungültig ist, wird die Page Methode aufgerufen, um die Seite erneut zu rendern.
- Die NewPizza Eigenschaft wird verwendet, um dem _service Objekt eine neue Pizza hinzuzufügen.
- Die RedirectToAction Methode wird verwendet, um den Benutzer an den Get Seitenhandler umzuleiten, wodurch die Seite mit der aktualisierten Liste der Pizza neu gerendert wird.
Speichern Sie die Datei. Wenn Sie GitHub Codespaces verwenden, wird die Datei automatisch gespeichert.
Kehren Sie zum ausgeführten dotnet watch Terminal zurück, und drücken Sie STRG+R , um die App neu zu laden.

Nachdem nun ein Seitenhandler zum Verarbeiten der Formularübermittlung vorhanden ist, fügen wir das Formular der Razor-Seite hinzu.

Öffnen Sie Pages\PizzaList.cshtml und ersetzen Sie  durch den folgenden Code:

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

Im vorhergehenden Code:

Das asp-validation-summary Attribut wird verwendet, um Überprüfungsfehler für das gesamte Modell anzuzeigen.
Jedes Formularfeld (<input> und <select> Elemente) sowie jedes <label> wird mit der entsprechenden NewPizza Eigenschaft durch das asp-for Attribut gebunden.
Das asp-validation-for Attribut wird verwendet, um alle Überprüfungsfehler für jedes Formularfeld anzuzeigen.
Die @Html.DisplayNameFor Methode wird verwendet, um den Anzeigenamen für die IsGlutenFree Eigenschaft anzuzeigen. Dies ist eine Razor-Hilfsmethode, die zum Anzeigen des Anzeigenamens für eine Eigenschaft verwendet wird. Auf diese Weise wird sichergestellt, dass das Kontrollkästchen aktiviert wird, wenn der*die Benutzer*in auf die Bezeichnung klickt.
Dem Formular wird eine Schaltfläche Create zum Senden hinzugefügt, um die Formulardaten auf dem Server zu veröffentlichen. Wenn der Benutzer zur Laufzeit diese Schaltfläche " Erstellen " auswählt, sendet der Browser das Formular als HTTP POST-Anforderung an den Server.

Fügen Sie unten auf der Seite den folgenden Code hinzu:
```
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
```
Dadurch werden die clientseitigen Überprüfungsskripts in die Seite eingefügt. Die clientseitigen Überprüfungsskripts werden verwendet, um die Eingabe des Benutzers zu überprüfen, bevor das Formular an den Server übermittelt wird.
Speichern Sie die Datei. Im Browser wird die Seite "Pizzaliste" mit dem neuen Formular aktualisiert. Wenn Sie GitHub Codespaces verwenden, wird die Datei automatisch gespeichert, aber Sie müssen die Browserregisterkarte manuell aktualisieren.
Geben Sie eine neue Pizza ein, und wählen Sie die Schaltfläche " Erstellen " aus. Die Seite sollte die neue Pizza in der Liste aktualisieren und anzeigen.

Fügen Sie einen Seitenhandler zum Löschen von Pizza hinzu

Es gibt ein letztes Element, das der Seite "Pizzaliste" hinzugefügt werden soll: ein Seitenhandler zum Löschen von Pizzas. Die Schaltflächen zum Löschen von Pizzas befinden sich bereits auf der Seite, aber sie tun noch nichts.

Zurück in Pages\PizzaList.cshtml.cs fügen Sie der Klasse die folgende Methode hinzu:
```
public IActionResult OnPostDelete(int id)
{
    _service.DeletePizza(id);

    return RedirectToAction("Get");
}
```
Im vorhergehenden Code:
- Die OnPostDelete Methode wird aufgerufen, wenn der Benutzer auf die Schaltfläche "Löschen " für eine Pizza klickt.
  - Die Seite weiß, dass sie diese Methode verwenden soll, da das asp-page-handler-Attribut auf der Löschen-Schaltfläche in Pages\PizzaList.cshtml auf Delete gesetzt ist.
- Der id Parameter wird verwendet, um die zu löschende Pizza zu identifizieren.
  - Der id Parameter ist an den id Routenwert in der URL gebunden. Dies erfolgt mit dem asp-route-id Attribut auf der Schaltfläche "Löschen " in "Pages\PizzaList.cshtml".
- Die DeletePizza Methode wird für das _service Objekt aufgerufen, um die Pizza zu löschen.
- Die RedirectToAction Methode wird verwendet, um den Benutzer an den Get Seitenhandler umzuleiten, wodurch die Seite mit der aktualisierten Liste der Pizza neu gerendert wird.
Speichern Sie die Datei. Wenn Sie GitHub Codespaces verwenden, wird die Datei automatisch gespeichert.
Testen Sie die Schaltfläche "Löschen " für eine Pizza. Die Seite sollte aktualisiert werden, und die ausgewählte Pizza sollte aus der Liste entfernt werden.

Glückwunsch! Sie haben erfolgreich eine Razor-Seite erstellt, die eine Liste von Pizzas anzeigt, dem Benutzer ermöglicht, neue Pizzas hinzuzufügen und dem Benutzer auch das Löschen von Pizzas zu ermöglichen.

Feedback

War diese Seite hilfreich?

Übung: Hinzufügen eines neuen Pizza-Formulars

Überprüfen Sie Ihr Wissen

Feedback