Övning – Lägg till nytt pizzaformulär

I den här lektionen avslutar du sidan Pizzalista genom att lägga till ett formulär för att skapa nya pizzor. Du lägger också till sidhanterare för att hantera inskickandet av formulär och borttagning av pizzor.

Lägga till ett formulär för att skapa nya pizzor

Vi börjar med att lägga till egenskaper i PizzaListModel klassen för att representera användarens indata. Du lägger också till lämplig sidhanterare.

1. Öppna Pages\PizzaList.cshtml.cs och lägg till följande egenskap i PizzaListModel klassen:

   [BindProperty]
   public Pizza NewPizza { get; set; } = default!;
   

   I koden ovan:

   • En egenskap med namnet NewPizza läggs till i PizzaListModel klassen.
     • NewPizza är ett Pizza objekt.
   • Attributet BindProperty tillämpas på egenskapen NewPizza .
     • Attributet BindProperty används för att binda NewPizza egenskapen till Razor-sidan. När en HTTP POST-begäran görs NewPizza fylls egenskapen i med användarens indata.
   • Egenskapen NewPizza initieras till default!.
     • Nyckelordet default! används för att initiera egenskapen NewPizza till null. Detta förhindrar att kompilatorn genererar en varning om att NewPizza egenskapen är onitialiserad.

2. Lägg nu till sidhanteraren för HTTP POST. Lägg till följande metod i PizzaListModel klassen i samma fil:

   public IActionResult OnPost()
   {
       if (!ModelState.IsValid || NewPizza == null)
       {
           return Page();
       }
   
       _service.AddPizza(NewPizza);
   
       return RedirectToAction("Get");
   }
   

   I koden ovan:

   • Egenskapen ModelState.IsValid används för att avgöra om användarens indata är giltiga.
     • Verifieringsreglerna härleds från attribut (till exempel Required och Range) på Pizza klassen i Models\Pizza.cs.
     • Om användarens indata är ogiltiga Page anropas metoden för att åter återge sidan.
   • Egenskapen NewPizza används för att lägga till en ny pizza i _service objektet.
   • Metoden RedirectToAction används för att omdirigera användaren till Get sidhanteraren, som återger sidan med den uppdaterade listan över pizzor.

3. Spara filen. Om du använder GitHub Codespaces sparas filen automatiskt.

4. Återvänd till den terminal som kör dotnet watch och tryck Ctrl+R för att ladda om appen.

Nu när det finns en sidhanterare som hanterar formuläröverföringen ska vi lägga till formuläret på Razor-sidan.

1. Öppna Pages\PizzaList.cshtml och ersätt <!-- New Pizza form will go here --> med följande kod:

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

   I koden ovan:

   • Attributet asp-validation-summary används för att visa valideringsfel för hela modellen.
   • Varje formulärfält (<input> och <select> element) och var och en <label> är bunden till motsvarande NewPizza egenskap med hjälp av attributet asp-for .
   • Attributet asp-validation-for används för att visa eventuella verifieringsfel för varje formulärfält.
   • Metoden @Html.DisplayNameFor används för att visa visningsnamnet för IsGlutenFree egenskapen. Det här är en hjälpmetod för Razor som används för att visa det visade namnet för en egenskap. Om du gör etiketten på det här sättet ser du till att kryssrutan är markerad när användaren klickar på etiketten.
   • En skicka-knapp med etiketten Create läggs till i formuläret för att publicera formulärdata på servern. När användaren väljer knappen Skapa skickar webbläsaren formuläret som en HTTP POST-begäran till servern när användaren väljer knappen Skapa .

2. Lägg till följande kod längst ned på sidan:

   @section Scripts {
   <partial name="_ValidationScriptsPartial" />
   }
   

   Detta matar in valideringsskripten på klientsidan till sidan. Valideringsskripten på klientsidan används för att verifiera användarens indata innan formuläret skickas till servern.

3. Spara filen. I webbläsaren uppdateras sidan Pizzalista med det nya formuläret. Om du använder GitHub Codespaces sparas filen automatiskt, men du måste uppdatera webbläsarfliken manuellt.

   

4. Ange en ny pizza och välj knappen Skapa . Sidan bör uppdatera och visa den nya pizzan i listan.

Lägga till en sidhanterare för att ta bort pizzor

Det finns en sista del att lägga till på sidan Pizzalista: en sidhanterare för att ta bort pizzor. Knapparna för att ta bort pizzor finns redan på sidan, men de gör ingenting ännu.

1. Lägg tillbaka i Pages\PizzaList.cshtml.cs, till följande metod till PizzaListModel-klassen.

   public IActionResult OnPostDelete(int id)
   {
       _service.DeletePizza(id);
   
       return RedirectToAction("Get");
   }
   

   I koden ovan:

   • Metoden OnPostDelete anropas när användaren klickar på knappen Ta bort för en pizza.
     • Sidan vet att använda denna metod eftersom knappen asp-page-handler i Pages\PizzaList.cshtml har attributet inställt på Delete.
   • Parametern id används för att identifiera pizzan som ska tas bort.
     • Parametern id är bunden till id vägvärdet i URL:en. Detta görs med asp-route-id attributet på knappen Ta bort i Pages\PizzaList.cshtml.
   • Metoden DeletePizza anropas på _service objektet för att ta bort pizzan.
   • Metoden RedirectToAction används för att omdirigera användaren till Get sidhanteraren, som återger sidan med den uppdaterade listan över pizzor.

2. Spara filen. Om du använder GitHub Codespaces sparas filen automatiskt.

3. Testa knappen Ta bort för en pizza. Sidan bör uppdateras och den valda pizzan ska tas bort från listan.

Grattis! Du har skapat en Razor-sida som visar en lista över pizzor, tillåter användaren att lägga till nya pizzor och även tillåter användaren att ta bort pizzor.