.net Core Mvc Form Example

INFLUENCESMAG.ORG

5 min read

·

Jun 03, 2024

26

Share

Créer un Formulaire avec ASP.NET Core MVC

Cet article vous guide à travers la création d'un formulaire simple avec ASP.NET Core MVC. Nous allons utiliser un exemple de formulaire de contact pour illustrer les concepts clés.

Configuration de l'application ASP.NET Core

1. Créer un nouveau projet ASP.NET Core MVC:

   • Ouvrez Visual Studio et sélectionnez "Créer un projet".
   • Choisissez "Application Web ASP.NET Core" et cliquez sur "Suivant".
   • Sélectionnez "Application Web MVC" et cliquez sur "Créer".

2. Créer un modèle:

   • Créez un nouveau dossier nommé "Models" dans votre projet.
   • Ajoutez une nouvelle classe nommée "Contact" dans le dossier "Models".
   • Définissez les propriétés du modèle :

   public class Contact
   {
       public string Nom { get; set; }
       public string Email { get; set; }
       public string Message { get; set; }
   }
   

Création du formulaire

1. Créer une vue :

   • Dans le dossier "Views", créez un nouveau dossier nommé "Home".
   • Créez un nouveau fichier de vue nommé "Contact.cshtml" dans le dossier "Home".
   • Ajoutez le code HTML suivant dans "Contact.cshtml" :

   @model Contact
   
   Contact
   
   
       
   
           
           
           
       
   
       
   
           
           
           
       
   
       
   
           
           
           
       
   
       Envoyer
   
   

Traitement du formulaire

1. Créer un contrôleur :

   • Créez un nouveau contrôleur nommé "HomeController" dans le dossier "Controllers".
   • Ajoutez une nouvelle action nommée "Contact" dans le contrôleur "HomeController".
   • Définissez le code pour traiter les données du formulaire :

   public class HomeController : Controller
   {
       [HttpPost]
       public IActionResult Contact(Contact contact)
       {
           // Valider les données du formulaire
           if (ModelState.IsValid)
           {
               // Traiter le formulaire (envoyer un email, enregistrer en base de données, etc.)
               // ...
   
               // Rediriger vers une page de succès
               return RedirectToAction("Index");
           }
   
           // Afficher le formulaire avec les erreurs de validation
           return View(contact);
       }
   }
   

Exécuter l'application

1. Exécutez l'application ASP.NET Core.
2. Accédez à la page "/Home/Contact" dans votre navigateur.
3. Remplissez le formulaire et cliquez sur "Envoyer".

Points clés

• @model: Définissez le modèle de données utilisé dans la vue.
• asp-for: Utilisez cette directive pour lier les champs du formulaire aux propriétés du modèle.
• asp-action: Indique l'action du contrôleur à exécuter lorsque le formulaire est soumis.
• asp-validation-for: Affiche les erreurs de validation pour les champs du formulaire.
• ModelState.IsValid: Vérifiez la validité des données du formulaire avant de les traiter.

Conclusion

Cet exemple de base vous montre comment créer un formulaire simple et le traiter avec ASP.NET Core MVC. Vous pouvez étendre ce code pour créer des formulaires plus complexes en ajoutant des fonctionnalités supplémentaires telles que la validation personnalisée, la soumission asynchrone et l'intégration avec des services externes.