Exercice : Ajouter un formulaire de création de pizza

• 10 minutes

Dans cette unité, vous allez terminer la page Pizza List en ajoutant un formulaire pour créer des pizzas. Vous allez également ajouter des gestionnaires de pages pour gérer les envois de formulaire et la suppression de pizzas.

Ajouter un formulaire pour créer des pizzas

Vous allez commencer par ajouter des propriétés à la classe PizzaListModel pour représenter l’entrée de l’utilisateur. Ensuite, vous ajouterez également le gestionnaire de pages approprié.

1. Ouvrez Pages\PizzaList.cshtml.cs et ajoutez la propriété suivante à la classe PizzaListModel :

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

   Dans le code précédent :

   • Une propriété nommée NewPizza est ajoutée à la classe PizzaListModel.
     • NewPizza est un objet Pizza.
   • L’attribut BindProperty est appliqué à la propriété NewPizza.
     • L’attribut BindProperty lie la propriété NewPizza à la page Razor. Quand une requête HTTP POST est effectuée, la propriété NewPizza est remplie avec l’entrée de l’utilisateur.
   • La propriété NewPizza est initialisée à default!.
     • Le mot clé default! est utilisé pour initialiser la propriété NewPizza sur null. Cela évite au compilateur de générer un avertissement à propos de la propriété NewPizza non initialisée.

2. Ajoutez maintenant le gestionnaire de pages pour HTTP POST. Dans le même fichier, ajoutez la méthode suivante à la classe PizzaListModel :

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

   Dans le code précédent :

   • La propriété ModelState.IsValid détermine si l’entrée de l’utilisateur est valide.
     • Les règles de validation sont déduites de certains attributs (comme Required et Range) de la classe Pizza dans Models\Pizza.cs.
     • Si l’entrée de l’utilisateur n’est pas valide, la méthode Page est appelée pour un nouveau rendu de la page.
   • La propriété NewPizza ajoute une nouvelle pizza à l’objet _service.
   • La méthode RedirectToAction redirige l’utilisateur vers le gestionnaire de page Get, qui recommence le rendu de la page avec la liste mise à jour des pizzas.

3. Enregistrez le fichier . Si vous utilisez GitHub Codespaces, le fichier s’enregistre automatiquement.

4. Revenez dans le terminal où s’exécute dotnet watch et appuyez sur Ctrl+R pour recharger l’application.

Maintenant qu’il y a un gestionnaire de pages pour gérer les envois de formulaire, vous allez ajouter le formulaire à la page Razor.

1. Ouvrez Pages\PizzaList.cshtml et remplacez <!-- New Pizza form will go here --> par le code suivant :

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

   Dans le code précédent :

   • L’attribut asp-validation-summary affiche les erreurs de validation pour l’ensemble du modèle.
   • Chaque champ de formulaire (éléments <input> et <select>) et <label> sont liés à la propriété NewPizza par l’attribut asp-for.
   • L’attribut asp-validation-for affiche les erreurs de validation pour chaque champ de formulaire.
   • La méthode @Html.DisplayNameFor affiche le nom complet de la propriété IsGlutenFree. Il s’agit d’une méthode d’assistance Razor utilisée pour afficher le nom complet d’une propriété. Cette conception d’étiquette garantit que la case est cochée lorsque l’utilisateur clique sur l’étiquette.
   • Un bouton d’envoi Create est ajouté au formulaire pour publier les données du formulaire sur le serveur. Au moment de l’exécution, lorsque l’utilisateur sélectionne ce bouton Créer , le navigateur envoie le formulaire sous forme de requête HTTP POST au serveur.

2. En bas de la page, ajoutez le code suivant :

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

   Cela injecte les scripts de validation côté client dans la page. Les scripts de validation côté client sont utilisés pour valider l’entrée de l’utilisateur avant l’envoi du formulaire au serveur.

3. Enregistrez le fichier . Dans le navigateur, la page Pizza List s’actualise avec le formulaire de création. Si vous utilisez GitHub Codespaces, le fichier s’enregistre automatiquement, mais vous devez actualiser manuellement l’onglet du navigateur.

   

4. Entrez une nouvelle pizza, puis sélectionnez le bouton Create (Créer). La page doit s’actualiser et afficher la nouvelle pizza dans la liste.

Ajouter un gestionnaire de pages pour supprimer des pizzas

Il y a un dernier élément à ajouter à la page Pizza List : un gestionnaire de pages pour supprimer des pizzas. Les boutons permettant de supprimer des pizzas se trouvent déjà dans la page, mais ils n’ont aucune action pour le moment.

1. Revenez dans Pages\PizzaList.cshtml.cs, puis ajoutez la méthode suivante à la classe PizzaListModel :

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

   Dans le code précédent :

   • La méthode OnPostDelete est appelée quand l’utilisateur clique sur le bouton Delete (Supprimer) pour supprimer une pizza.
     • La page sait qu’elle doit utiliser cette méthode, car l’attribut asp-page-handler sur le bouton Delete dans Pages\PizzaList.cshtml est défini sur Delete.
   • Le paramètre id identifie la pizza à supprimer.
     • Le paramètre id est lié à la valeur de route id dans l’URL. Cela s’effectue avec l’attribut asp-route-id sur le bouton Delete dans Pages\PizzaList.cshtml.
   • La méthode DeletePizza est appelée sur l’objet _service pour supprimer la pizza.
   • La méthode RedirectToAction redirige l’utilisateur vers le gestionnaire de page Get, qui recommence le rendu de la page avec la liste mise à jour des pizzas.

2. Enregistrez le fichier . Si vous utilisez GitHub Codespaces, le fichier s’enregistre automatiquement.

3. Testez le bouton Delete pour une pizza. La page doit s’actualiser et la pizza sélectionnée est normalement supprimée de la liste.

Félicitations ! Vous avez réussi à créer une page Razor qui affiche une liste de pizzas, permet à l'utilisateur d'ajouter de nouvelles pizzas et de supprimer des pizzas.

Vérifiez vos connaissances