Développement d’une application de gestion de contacts avec asp. Net mvc (C#)
télécharger 48.08 Kb.
|
Haut du formulaireDéveloppement d’une application de gestion de contacts avec ASP.NET MVC (C#)Etape #3 – Ajout de la validation de formulairesDans cette série de tutoriaux, nous allons construire de bout en bout une application complète de gestion de contacts. Cette application vous permettra de stocker les informations – noms, numéro de téléphone et adresses emails – pour une liste de personnes. Nous allons construire cette application à travers plusieurs étapes. Chacune d’entres elles allant enrichir notre application MVC. Le but de cette construction par étape est de vous permettre de comprendre la raison derrière chaque changement.
Développer une application de gestion de contacts avec ASP.NET MVC (C#)Lire et télécharger les tutoriels : http://msdn.microsoft.com/fr-fr/asp.net/dd627541.aspx Dans cette étapeDans cette 3ème étape dans la fabrication de notre application Contact Manager, nous allons ajouter une logique simple de validation de formulaires. Nous souhaitons éviter de laisser les utilisateurs soumettre un nouveau contact sans rentrer d’abord des valeurs dans les champs obligatoires. Nous souhaitons également valider la bonne constitution des numéros de téléphone et des adresses emails proposés (Figure 1).  Figure 01: Un formulaire avec une logique de validation en place Dans cette étape, nous allons ajouter la logique de validation directement au sein des actions contrôleurs. En général, cela n’est pas la méthode recommandée pour ajouter une forme de validation dans une application ASP.NET MVC. Une meilleure approche serait de mettre en place une logique de validation applicative dans une couche de service séparée. Justement, dans l’étape suivante, nous nous occuperons de revoir l’architecture de notre application pour faciliter les opérations de maintenance. Par ailleurs, toujours afin de rester pour l’instant assez simple, nous allons écrire l’ensemble du code de validation à la main. Au lieu de l’écrire nous-mêmes, on pourrait envisager de bénéficier d’un framework de validation. Par exemple, on peut utiliser Microsoft Entreprise Library Validation Application Block (VAB) pour implémenter la logique de validation au sein d’ASP.NET MVC. Pour en savoir davantage sur Validation Application Block, rendez-vous ici : http://msdn.microsoft.com/en-us/library/dd203099.aspx Ajout de validations à la vue de créationCommençons par ajouter de la logique de validation à la vue de création de contacts. Heureusement, comme nous avons généré la vue avec Visual Studio, elle contient déjà toute la logique nécessaire à l’affichage de messages de validation au niveau de l’interface graphique. La vue de création est présentée dans le Listing 1. Listing 1 – \Views\Contact\Create.aspx <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage <%= Html.ValidationSummary() %> <% using (Html.BeginForm()) {%> <% } %> Noter l’appel à la méthode Html.ValidationSummary() juste au dessus du formulaire HTML. S’il y a la moindre erreur de validation levée, alors cette méthode affiche l’ensemble des messages dans une liste à puce. Notez également l’appel à la méthode Html.ValidationMessage() qui apparaît prêt de chaque champs du formulaire. La méthode ValidationMessage() affiche un message particulier d’erreur de validation. Dans le cas du Listing 1, une étoile est affichée lorsqu’une erreur de validation est rencontrée. Pour terminer, la méthode Html.TextBox() génère automatiquement une feuille de style CSS lorsqu’il y a une erreur de validation associée à la propriété affichée. Html.TextBox() génère une classe appelée input-validation-error. Lorsque vous créez une nouvelle application ASP.NET MVC, une feuille de style appelée Site.css est créée automatiquement dans le répertoire Content. Cette feuille de style contient les définitions suivantes pour les classes CSS liées à l’apparence des messages d’erreur de validation : .field-validation-error { color: #ff0000; } .input-validation-error { border: 1px solid #ff0000; background-color: #ffeeee; } .validation-summary-errors { font-weight: bold; color: #ff0000; } La classe field-validation-error est utilisée pour contrôler l’apparence de ce qui est produit par la méthode Html.ValidationMessage(). La classe The input-validation-error est utilisée pour contrôler le style de la zone de saisie de texte rendue par la méthode Html.TextBox(). Enfin, la classe validation-summary-errors est utilisée pour contrôler le style de la liste non ordonnée rendue par la méthode the Html.ValidationSummary(). Vous pouvez modifier les classes de la feuille de style décrite dans cette section pour personnaliser l’apparence des messages d’erreur de validation. Ajout d’une logique de validation à l’action de créationJusqu’à présent, la vue de création n’a jamais affiché de message d’erreur de validation car nous n’avons pas écrit la logique pour générer ces messages. Pour afficher des messages d’erreur de validation, vous devez d’abord les ajouter à l’objet ModelState. La méthode UpdateModel() ajoute automatiquement des messages d’erreur à l’objet ModelState s’il y a une erreur simple d’assignation d’une valeur du formulaire vers une propriété. Par exemple, si vous essayez d’affecter la chaîne « pomme » vers une propriété DateAnniversaire de type DateTime alors la méthode UpdateModel() sera appelée pour ajouter une erreur à ModelState. La version modifiée de la méthode Create() dans le Listing 2 contient une nouvelle section qui s’occupe de valider les propriétés de l’objet Contact fourni avant de tenter de l’insérer dans la base de données. Listing 2 – Controllers\ContactController.cs (création avec validation) // // POST: /Contact/Create [AcceptVerbs(HttpVerbs.Post)] public ActionResult Create([Bind(Exclude = "Id")] Contact contactToCreate) { // Validation logic if (contactToCreate.FirstName.Trim().Length == 0) ModelState.AddModelError("FirstName", "First name is required."); if (contactToCreate.LastName.Trim().Length == 0) ModelState.AddModelError("LastName", "Last name is required."); if (contactToCreate.Phone.Length > 0 && !Regex.IsMatch(contactToCreate.Phone, @"((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}")) ModelState.AddModelError("Phone", "Invalid phone number."); if (contactToCreate.Email.Length > 0 && !Regex.IsMatch(contactToCreate.Email, @"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$")) ModelState.AddModelError("Email", "Invalid email address."); if (!ModelState.IsValid) return View(); // Database logic try { _entities.AddToContactSet(contactToCreate); _entities.SaveChanges(); return RedirectToAction("Index"); } catch { return View(); } } La section de validation applique 4 règles distinctes:
Lorsqu’il y a une violation de l’une des règles de validation, un message d’erreur est alors ajouté à l’objet ModelState à l’aide de la method AddModelError(). Lorsque vous ajoutez un message à l’objet ModelState, vous devez fournir le nom d’une propriété ainsi qu’un texte contenant votre message d’erreur. Ce message est alors affiché dans la vue via les 2 méthodes Html.ValidationSummary() et Html.ValidationMessage() présentées précédemment. Après que les règles de validation soient exécutées, la propriété IsValid de l’objet ModelState est vérifiée. La valeur booléenne est positionnée à faux lorsque la moindre erreur de validation fut ajoutée à l’objet ModelState. Ainsi, si la validation a échouée, le formulaire de création est affiché à nouveau avec les messages d’erreur correspondant. Les expressions régulières pour valider le numéro de téléphone et les adresses emails viennent de la bibliothèque suivante: http://regexlib.com Ajout d’une logique de validation dans l’action d’éditionL’action d’édition met à jour un contact. L’action Edit() a besoin d’effectuer exactement la même validation que l’action Create(). Plutôt que de dupliquer le même code de validation, mieux vaut factoriser cette partie de code de manière à ce que chacune des 2 actions Create() et Edit() appelle la même méthode de validation. La classe du contrôleur Contact modifiée se trouve dans le Listing 3. Cette classe dispose d’une nouvelle méthode nommée ValidateContact() appelée au sein de chacune des 2 actions. Listing 3 – Controllers\ContactController.cs using System.Linq; using System.Text.RegularExpressions; using System.Web.Mvc; using ContactManager.Models; namespace ContactManager.Controllers { public class ContactController : Controller { private ContactManagerDBEntities _entities = new ContactManagerDBEntities(); protected void ValidateContact(Contact contactToValidate) { if (contactToValidate.FirstName.Trim().Length == 0) ModelState.AddModelError("FirstName", "First name is required."); if (contactToValidate.LastName.Trim().Length == 0) ModelState.AddModelError("LastName", "Last name is required."); if (contactToValidate.Phone.Length > 0 && !Regex.IsMatch(contactToValidate.Phone, @"((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}")) ModelState.AddModelError("Phone", "Invalid phone number."); if (contactToValidate.Email.Length > 0 && !Regex.IsMatch(contactToValidate.Email, @"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$")) ModelState.AddModelError("Email", "Invalid email address."); } public ActionResult Index() { return View(_entities.ContactSet.ToList()); } public ActionResult Create() { return View(); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Create([Bind(Exclude = "Id")] Contact contactToCreate) { // Validation logic ValidateContact(contactToCreate); if (!ModelState.IsValid) return View(); // Database logic try { _entities.AddToContactSet(contactToCreate); _entities.SaveChanges(); return RedirectToAction("Index"); } catch { return View(); } } public ActionResult Edit(int id) { var contactToEdit = (from c in _entities.ContactSet where c.Id == id select c).FirstOrDefault(); return View(contactToEdit); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Edit(Contact contactToEdit) { ValidateContact(contactToEdit); if (!ModelState.IsValid) return View(); try { var originalContact = (from c in _entities.ContactSet where c.Id == contactToEdit.Id select c).FirstOrDefault(); _entities.ApplyPropertyChanges(originalContact.EntityKey.EntitySetName, contactToEdit); _entities.SaveChanges(); return RedirectToAction("Index"); } catch { return View(); } } public ActionResult Delete(int id) { var contactToDelete = (from c in _entities.ContactSet where c.Id == id select c).FirstOrDefault(); return View(contactToDelete); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Delete(Contact contactToDelete) { try { var originalContact = (from c in _entities.ContactSet where c.Id == contactToDelete.Id select c).FirstOrDefault(); _entities.DeleteObject(originalContact); _entities.SaveChanges(); return RedirectToAction("Index"); } catch { return View(); } } } } RésuméDans cette étape, nous avons ajouté une forme basique de validation de formulaires à notre application de gestion de contacts. Notre logique de validation permet d’éviter aux utilisateurs de soumettre de nouveaux contacts ou d’éditer des contacts existant sans préciser de valeur aux propriétés prénom et nom. De plus, l’utilisateur doit obligatoirement soumettre des numéros de téléphone et adresse email un tant soit peu valides. Nous avons ajouté cette logique de validation de la manière la plus simple qui soit. Cependant, mélanger une logique de validation avec la logique même du contrôleur pourra créer des problèmes de maintenance à long terme. Dans la prochaine étape, nous allons revoir l’architecture de notre logique de validation et de notre logique d’accès aux données pour les sortir de nos contrôleurs. Nous allons ainsi bénéficier de plusieurs principes d’architecture logicielle pour créer une application plus facile à maintenir et plus découpée. Développer une application de gestion de contacts avec ASP.NET MVC (C#)Lire et télécharger les tutoriels : http://msdn.microsoft.com/fr-fr/asp.net/dd627541.aspx Bas du formulaire |
similaire:
 |  | ||
| | ||
| «responsive design» et bénéficie d’une architecture complètement revisitée. De cette façon, les utilisateurs ios et Android ont une... | | «responsive design» et bénéficie d’une architecture complètement revisitée. De cette façon, les utilisateurs ios et Android ont une... |
| ... | | |
| «Internet apporte un ‘plus’ à toutes les entreprises et le secteur de l’industrie représente un important potentiel de développement... | |