Oefening: nieuw pizzaformulier toevoegen
- 10 minuten
In deze les voltooit u de pagina Pizzalijst door een formulier toe te voegen om nieuwe pizza's te maken. U voegt ook pagina-handlers toe om de formulierverzending en het verwijderen van pizza's af te handelen.
Een formulier toevoegen om nieuwe pizza's te maken
Laten we beginnen met het toevoegen van eigenschappen aan de PizzaListModel klasse om de invoer van de gebruiker weer te geven. Ook voeg je de juiste pagina-handler toe.
Open Pages\PizzaList.cshtml.cs en voeg de volgende eigenschap toe aan de
PizzaListModelklasse:[BindProperty] public Pizza NewPizza { get; set; } = default!;In de voorgaande code:
- Er wordt een eigenschap met de naam
NewPizzatoegevoegd aan dePizzaListModelklasse.-
NewPizzais eenPizzaobject.
-
- Het
BindPropertykenmerk wordt toegepast op deNewPizzaeigenschap.- Het
BindPropertykenmerk wordt gebruikt om deNewPizzaeigenschap te binden aan de Razor-pagina. Wanneer een HTTP POST-aanvraag wordt gedaan, wordt deNewPizzaeigenschap gevuld met de invoer van de gebruiker.
- Het
- De
NewPizzaeigenschap wordt geïnitialiseerd naardefault!.- Het
default!trefwoord wordt gebruikt om deNewPizzaeigenschap te initialiseren naarnull. Hiermee voorkomt u dat de compiler een waarschuwing genereert over deNewPizzaeigenschap die niet is geïnitialiseerd.
- Het
- Er wordt een eigenschap met de naam
Voeg nu de pagina-handler toe voor HTTP POST. Voeg in hetzelfde bestand de volgende methode toe aan de
PizzaListModelklasse:public IActionResult OnPost() { if (!ModelState.IsValid || NewPizza == null) { return Page(); } _service.AddPizza(NewPizza); return RedirectToAction("Get"); }In de voorgaande code:
- De
ModelState.IsValideigenschap wordt gebruikt om te bepalen of de invoer van de gebruiker geldig is.- De validatieregels worden afgeleid van kenmerken (zoals
RequiredenRange) in dePizzaklasse in Models\Pizza.cs. - Als de invoer van de gebruiker ongeldig is, wordt de
Pagemethode aangeroepen om de pagina opnieuw weer te geven.
- De validatieregels worden afgeleid van kenmerken (zoals
- De
NewPizzaeigenschap wordt gebruikt om een nieuwe pizza aan het_serviceobject toe te voegen. - De
RedirectToActionmethode wordt gebruikt om de gebruiker om te leiden naar deGetpagina-handler, waarmee de pagina opnieuw wordt weergegeven met de bijgewerkte lijst met pizza's.
- De
Sla het bestand op. Als u GitHub Codespaces gebruikt, wordt het bestand automatisch opgeslagen.
Ga terug naar de terminal waar
dotnet watchwordt uitgevoerd en druk op Ctrl+R om de app opnieuw te laden.
Nu we een handler hebben om het formulier te verwerken, voegen we het formulier toe aan de Razor Page.
Open Pages\PizzaList.cshtml en vervang de
<!-- New Pizza form will go here -->door de volgende 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>In de voorgaande code:
- Het
asp-validation-summarykenmerk wordt gebruikt om validatiefouten voor het hele model weer te geven. - Elk formulierveld (
<input>en alle elementen) en<select>elk<label>veld is gebonden aan de bijbehorendeNewPizzaeigenschap met behulp van hetasp-forkenmerk. - Het
asp-validation-forkenmerk wordt gebruikt om validatiefouten voor elk formulierveld weer te geven. - De
@Html.DisplayNameFormethode wordt gebruikt om de weergavenaam voor deIsGlutenFreeeigenschap weer te geven. Dit is een Razor-helpermethode die wordt gebruikt om de weergavenaam voor een eigenschap te tonen. Als u het label op deze manier uitvoert, zorgt u ervoor dat het selectievakje is ingeschakeld wanneer de gebruiker op het label klikt. - Er wordt een verzendknop met het label
Createtoegevoegd aan het formulier om de formuliergegevens op de server te plaatsen. Wanneer de gebruiker tijdens runtime deze knop Maken selecteert, verzendt de browser het formulier als een HTTP POST-aanvraag naar de server.
- Het
Voeg onder aan de pagina de volgende code toe:
@section Scripts { <partial name="_ValidationScriptsPartial" /> }Hiermee injecteert u de validatiescripts aan de clientzijde in de pagina. De validatiescripts aan de clientzijde worden gebruikt om de invoer van de gebruiker te valideren voordat het formulier wordt verzonden naar de server.
Sla het bestand op. In de browser wordt de pagina Pizzalijst vernieuwd met het nieuwe formulier. Als u GitHub Codespaces gebruikt, wordt het bestand automatisch opgeslagen, maar moet u het browsertabblad handmatig vernieuwen.
Voer een nieuwe pizza in en selecteer de knop Maken . De pagina moet vernieuwd worden en de nieuwe pizza moet in de lijst worden weergegeven.
Een pagina-handler toevoegen om pizza's te verwijderen
Er is nog een laatste stuk om toe te voegen aan de pagina Pizzalijst: een paginahandler om pizza's te verwijderen. De knoppen voor het verwijderen van pizza's bevinden zich al op de pagina, maar ze doen nog niets.
Voeg in Pages\PizzaList.cshtml.cs de volgende methode toe aan de
PizzaListModelklasse:public IActionResult OnPostDelete(int id) { _service.DeletePizza(id); return RedirectToAction("Get"); }In de voorgaande code:
- De
OnPostDeletemethode wordt aangeroepen wanneer de gebruiker op de knop Verwijderen voor een pizza klikt.- De pagina weet deze methode te gebruiken, omdat het
asp-page-handlerkenmerk op de knop Verwijderen in Pages\PizzaList.cshtml is ingesteld opDelete.
- De pagina weet deze methode te gebruiken, omdat het
- De
idparameter wordt gebruikt om de pizza te identificeren die moet worden verwijderd.- De
idparameter is gebonden aan deidroutewaarde in de URL. Dit wordt bereikt met hetasp-route-idkenmerk op de knop Verwijderen in Pages\PizzaList.cshtml.
- De
- De
DeletePizzamethode wordt aangeroepen op het_serviceobject om de pizza te verwijderen. - De
RedirectToActionmethode wordt gebruikt om de gebruiker om te leiden naar deGetpagina-handler, waarmee de pagina opnieuw wordt weergegeven met de bijgewerkte lijst met pizza's.
- De
Sla het bestand op. Als u GitHub Codespaces gebruikt, wordt het bestand automatisch opgeslagen.
Test de knop Verwijderen voor een pizza. De pagina moet worden vernieuwd en de geselecteerde pizza moet worden verwijderd uit de lijst.
Gefeliciteerd! U hebt een Razor-pagina gemaakt die een lijst met pizza's weergeeft, waarmee de gebruiker nieuwe pizza's kan toevoegen en waarmee de gebruiker pizza's kan verwijderen.