Exporter (0) Imprimer
Développer tout
Cet article a fait l'objet d'une traduction manuelle. Déplacez votre pointeur sur les phrases de l'article pour voir la version originale de ce texte.
Traduction
Source

Comment : implémenter la validation distante dans ASP.NET MVC

ASP.NET MVC 3 fournit un mécanisme qui peut passer un appel de serveur distant afin de valider un champ de formulaire sans publier l'intégralité du formulaire sur le serveur. Cette possibilité s'avère utile lorsqu'un champ ne peut pas être validé sur le client et qu'il peut par conséquent faire échouer la validation lorsque le formulaire est envoyé. Par exemple, de nombreux sites Web requièrent que vous vous enregistriez à l'aide d'un ID d'utilisateur unique. Pour les sites populaires, plusieurs tentatives peuvent être nécessaires pour trouver un ID d'utilisateur qui n'est pas déjà utilisé, et les données entrées par l'utilisateur ne sont pas considérées comme étant valides jusqu'à ce que tous les champs soient valides, notamment l'ID d'utilisateur. La validation distante évite à l'utilisateur de devoir envoyer le formulaire plusieurs fois avant de trouver un ID disponible.

L'illustration suivante montre un formulaire de nouvel utilisateur avec un message d'erreur qui indique que l'ID demandé n'est pas disponible. L'ID que les utilisateurs entrent est validé dès qu'ils quittent la zone de texte Nom d'utilisateur (c'est-à-dire, lorsque la zone de texte perd le focus). La validation ne requiert pas de publication (postback) complète.

Validation UID à distance

Pour illustrer la validation distante, cette rubrique indique comment implémenter un formulaire semblable à celui de l'illustration précédente. L'exemple peut servir comme un point de départ pour créer la validation distante spécifique à votre application.

Un projet de démarrage Visual Studio et un projet de solution terminé accompagnent cette rubrique : Download.

Création du projet de démarrage

  1. Créez un projet ASP.NET MVC 3 avec la syntaxe Razor en suivant les instructions de la page relative à la création d'une application MVC 3 avec Razor et JavaScript non obstructif. Vous pouvez également ouvrir le projet de démarrage d'application Web ASP.NET MVC fourni dans le téléchargement indiqué précédemment.

  2. Exécutez l'application et cliquez sur le lien Nouveau.

  3. Dans la zone de texte Nom d'utilisateur, entrez un nom d'utilisateur existant tel que « BenM ».

  4. Entrez les valeurs pour les champs restants et cliquez sur Créer.

    L'image suivante montre le message d'erreur retourné lors de l'envoi d'un nom d'utilisateur non unique.

    Créer des échecs complets

    Avec la configuration actuelle, la page exécute une publication (postback) complète sur le serveur. Sur le serveur, le nom d'utilisateur n'est pas unique, une exception est donc levée et renvoyée à Entity Framework. Le processus d'envoi de la page au serveur, de tentative de mise à jour de la base de données, d'interception d'une exception, et de retour d'un message d'erreur peut prendre un certain temps.

    ConseilConseil :

    Vous pouvez utiliser Fiddler ou Firebug pour indiquer que les erreurs de validation client sont gérées par le client et non pas envoyées au serveur.

Analyse du code de validation

  1. Dans le projet, ouvrez le fichier Mvc3RemoteVal\Models\UserModel et analysez-en le contenu.

    Les attributs StringLengthAttribute, RequiredAttribute et RegularExpressionAttribute fournissent à la fois la validation côté client et côté serveur pour le modèle utilisateur. Pour plus d'informations, consultez Comment : valider des données de modèle à l'aide d'attributs DataAnnotations.

  2. Analysez le fichier Mvc3RemoteVal\Views\Shared\_Layout.

    La section HTML head inclut des éléments de script qui font référence aux scripts jQuery requis pour la validation côté client à l'aide d'attributs dans l'espace de noms System.ComponentModel.DataAnnotations. Les références au script pointent vers sur le Réseau de distribution de contenu (CDN) Microsoft Ajax. En tirant parti du CDN Microsoft Ajax, vous pouvez améliorer considérablement la performance de vos applications Ajax. Le contenu du CDN Microsoft Ajax est mis en cache sur des serveurs qui sont répartis à travers le monde. En outre, le CDN Microsoft Ajax permet aux navigateurs de réutiliser des fichiers JavaScript mis en cache pour les sites Web qui se trouvent dans des domaines différents. Le CDN Microsoft Ajax prend en charge le protocole SSL (https://) au cas où vous deviez traiter une page Web qui utilise le protocole SSL.

  3. Ouvrez le fichier Mvc3RemoteVal\Web.config.

    L'élément appSettings contient les clés suivantes pour permettre la validation client et la validation JavaScript non obstructive.

    <appSettings>
        <add key="ClientValidationEnabled" value="true" />
        <add key="UnobtrusiveJavaScriptEnabled" value="true" />
      </appSettings>
    

    Vous pouvez également activer ou désactiver ces paramètres en appelant ClientValidationEnabled et EnableUnobtrusiveJavaScript(Boolean). Si ces lignes de code sont présentes dans le fichier Global.asax, elles activent ou désactivent la validation JavaScript non obstructive et la validation client pour toute l'application. Si le code s'affiche dans un contrôleur ou un affichage, la validation client et la validation JavaScript non obstructives sont activées uniquement pour l'action actuelle.

    RemarqueRemarque :

    Puisqu'aucun script JavaScript n'est émis lorsque vous utilisez la validation client non obstructive, si vous oubliez d'inclure les scripts de validation, aucune erreur ne s'affiche lors du chargement de la page. La seule conséquence est que les valeurs de formulaire ne sont pas validées dans le navigateur.

  4. Éventuellement, désactivez le script client dans votre navigateur, réexécutez la page, et entrez des données qui enfreignent les contraintes de validation.

    Lorsque vous quittez le champ qui contient les données non valides, aucune erreur de validation ne s'affiche car le script est désactivé. Étant donné qu'ASP.NET MVC utilise du code JavaScript non obstructif, aucune erreur de script côté client ne s'affiche. Toutefois, la validation côté serveur est exécutée lorsque vous envoyez le formulaire. (Nous vous conseillons de tester votre application Web avec un navigateur pour lequel le script est désactivé.)

Cette section explique comment ajouter la validation distante pour vérifier que le nom d'utilisateur entré est unique. Si le nom d'utilisateur n'est pas unique, le serveur suggère un nom d'utilisateur unique.

Configuration de la validation distante sur le serveur

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier Controllers, puis cliquez sur Ajouter et sur Contrôleur.

  2. Donnez un nom, tel que ValidationController, au contrôleur. Vous pouvez ajouter cette méthode d'action à n'importe quel contrôleur, tel que le contrôleur Home. Toutefois, nous vous recommandons de placer la validation dans son propre contrôleur afin de diviser les problèmes et de simplifier les tests.

  3. Remplacez le contenu de la classe du contrôleur de validation par le code suivant :

    using System;
    using System.Globalization;
    using System.Web.Mvc;
    using System.Web.UI;
    using Mvc3RemoteVal.Models;
    
    namespace Mvc3RemoteVal.Controllers {
        [OutputCache(Location = OutputCacheLocation.None, NoStore = true)]
        public class ValidationController : Controller {
    
            IUserDB _repository;
    #if  InMemDB
              public ValidationController() : this(InMemoryDB.Instance) { }
    #else
            public ValidationController() : this(new EF_UserRepository()) { }
    #endif
    
    
            public ValidationController(IUserDB repository) {
                _repository = repository;
            }
    
            public JsonResult IsUID_Available(string Username) {
    
                if (!_repository.UserExists(Username))
                    return Json(true, JsonRequestBehavior.AllowGet);
    
                string suggestedUID = String.Format(CultureInfo.InvariantCulture,
                    "{0} is not available.", Username);
    
                for (int i = 1; i < 100; i++) {
                    string altCandidate = Username + i.ToString();
                    if (!_repository.UserExists(altCandidate)) {
                        suggestedUID = String.Format(CultureInfo.InvariantCulture,
                       "{0} is not available. Try {1}.", Username, altCandidate);
                        break;
                    }
                }
                return Json(suggestedUID, JsonRequestBehavior.AllowGet);
            }
    
        }
    }
    

    Le code contient un constructeur qui initialise le contrôleur de validation avec un paramètre d'interface de référentiel de données. Le constructeur ressemble au constructeur du contrôleur Home dans sa façon d'initialiser le référentiel de données. Si vous souhaitez utiliser un magasin de données différent, vous pouvez modifier les propriétés du projet afin que la constante de compilation InMemDB ne soit pas définie. Dans cet cas, Entity Framework et une base de données SQL Server sont utilisées comme référentiel de données. Les tests unitaires inclus dans le projet téléchargeable utilisent le magasin de données en mémoire.

    L'attribut OutputCacheAttribute est obligatoire pour empêcher ASP.NET MVC de mettre en cache les résultats des méthodes de validation.

    La méthode IsUID_Available vérifie que le nom d'utilisateur proposé est unique. Si le nom d'utilisateur envoyé est unique, la méthode retourne true au format JSON. Si le nom d'utilisateur envoyé est déjà pris, la méthode essaie de trouver un nom unique en ajoutant un entier au nom envoyé. Si un nom unique est trouvé, la méthode retourne le nom suggéré au format JSON. Toute réponse autre que true est considérée comme étant false, le client affiche donc le message retourné comme un message d'erreur semblable à « BenM n'est pas disponible. Essayez BenM1 ».

  4. Ouvrez le fichier Models\UserModel et ajoutez l'attribut RemoteAttribute à la propriété de nom d'utilisateur dans le modèle de création d'un utilisateur. L'exemple suivant montre le code terminé.

    public class CreateUserModel : EditUserModel {
        [Required]
        [StringLength(6, MinimumLength = 3)]
        [Remote("IsUID_Available", "Validation")]
        [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed.")]
        [Editable(true)]
        public override string UserName { get; set; }
    }
    

    L'attribut RemoteAttribute dans l'exemple prend le nom de la méthode d'action IsUID_Available et le nom du contrôleur où les validations sont effectuées.

    La classe RemoteAttribute crée une chaîne qui représente l'URL à utiliser pour appeler la validation basée sur serveur. L'infrastructure ASP.NET MVC envoie ensuite la demande GET encodée en JSON de l'URL. Dans cet exemple, si l'utilisateur entre « BenM » dans la zone de texte Nom d'utilisateur, le client demande l'URL suivante :

    /Validation/IsUID_Available?UserName=BenM

De cette section, vous allez tester l'application et analyser le code HTML envoyé par l'affichage Create.

Test de la validation distante

  1. Démarrez l'application et cliquez sur le lien Nouveau.

  2. Dans le champ d'entrée de nom d'utilisateur, entrez « BenM » et appuyez sur la touche Tab.

    L'erreur de validation suivante est affichée en rouge : « BenM n'est pas disponible. Essayez BenM1. » L'ID que les utilisateurs entrent est validé dès qu'ils quittent la zone de texte Nom d'utilisateur (c'est-à-dire, lorsque la zone de texte perd le focus). La validation ne requiert pas de publication (postback) complète.

  3. Éventuellement, utilisez un outil comme Fiddler ou Firebug pour surveiller l'appel de validation IsUID_Available au serveur. L'image suivante montre la demande et la réponse du serveur Web à l'appel de validation IsUID_Available dans Fiddler.

    Outil Fiddler
    RemarqueRemarque :

    Dans Internet Explorer version 8 et versions antérieures, vous devez ajouter un point à localhost dans l'URL de demande pour que le proxy Fiddler capture le trafic HTTP. Vous pouvez également utiliser http://ipv4.fiddler ou http://nomordinateur/ au lieu de localhost dans l'URL.

  4. Analysez la source HTML affichée par le navigateur pour l'affichage Create.

    L'élément input pour le champ de nom d'utilisateur contient des attributs HTML5 data-val-*. (La partie -val correspond à la validation.) Ces attributs compatibles avec HTML5 décrivent les validateurs à joindre aux champs input et fournissent la validation jQuery non obstructive. Les attributs non obstructifs sont au format data-val-rule="Error Message", où rule est la règle de validation (par exemple obligatoire, longueur de chaîne minimale et longueur de chaîne maximale). Si un message d'erreur est fourni dans l'attribut, il est affiché comme valeur pour l'attribut data-val-rule. L'attribut RegularExpressionAttribute appliqué au modèle utilisateur associé à la méthode EditorForModel(HtmlHelper, Object) dans l'affichage Create entraîne la génération des attributs client non obstructifs HTML5 et valeurs d'attribut suivants :

    
       data-val-regex="White space is not allowed." 
       data-val-regex-pattern="(\S)+" 
    

    Le message d'erreur « Un espace blanc n'est pas autorisé » provient du message d'erreur de l'attribut RegularExpressionAttribute appliqué à la propriété de nom d'utilisateur du modèle utilisateur.

    L'attribut RemoteAttribute utilisé dans le modèle utilisateur entraîne la génération des attributs de validation client non obstructifs et valeurs d'attribut suivants :

    data-val-remote="&amp;#39;UserName&amp;#39; is invalid." data-val-remote-additionalfields="*.UserName" data-val-remote-url="/Validation/IsUID_Available"
    

    La séquence &amp;#39;UserName&amp;#39; est encodée en HTML et représente « Nom d'utilisateur ». La valeur d'attribut data-val-remote contient le message d'erreur par défaut (« « Nom d'utilisateur » n'est pas valide »). UserName est un espace réservé pour le nom d'utilisateur réel envoyé. La valeur d'attribut data-val-remote-additionalfields spécifie le champ ou la propriété à valider. La valeur d'attribut data-val-remote-url spécifie la méthode d'action qui valide le champ.

Ajouts de la communauté

AJOUTER
Afficher:
© 2015 Microsoft