Ajout de la validation au modèle - Comment implémenter la prise en charge nécessaire pour activer la validation d’entrée

par Scott Hanselman

Il s’agit d’un tutoriel pour débutants qui présente les principes de base de ASP.NET MVC. Vous allez créer une application web simple qui lit et écrit à partir d’une base de données. Visitez le centre d’apprentissage MVC ASP.NET pour trouver d’autres ASP.NET tutoriels et exemples MVC.

Dans cette section, nous allons implémenter la prise en charge nécessaire pour activer la validation d’entrée au sein de notre application. Nous allons nous assurer que le contenu de notre base de données est toujours correct et fournir des messages d’erreur utiles aux utilisateurs finaux lorsqu’ils essaient d’entrer des données Movie qui ne sont pas valides. Nous allons commencer par ajouter une petite logique de validation à la classe Movie.

Cliquez avec le bouton droit sur le dossier Modèle et sélectionnez Ajouter une classe. Nommez votre classe Movie.

Lorsque nous avons créé le modèle d’entité movie précédemment, l’IDE a créé une classe Movie. En fait, une partie de la classe Movie peut se trouver dans un fichier et dans un autre. C’est ce qu’on appelle une classe partielle. Nous allons étendre la classe Movie à partir d’un autre fichier.

Nous allons créer une classe de film partielle qui pointe vers une « classe de copain » avec certains attributs qui donneront des indicateurs de validation au système. Nous allons marquer le titre et le prix comme étant requis, et nous insisterons également pour que le prix se trouve dans une certaine plage. Cliquez avec le bouton droit sur le dossier Modèles et sélectionnez Ajouter une classe. Nommez votre classe Movie et cliquez sur le bouton OK. Voici à quoi ressemble notre classe vidéo partielle.

using System.ComponentModel.DataAnnotations;

namespace Movies.Models
{
    [MetadataType(typeof(MovieMetadata))]
    public partial class Movie
    {
        class MovieMetadata
        {
            [Required(ErrorMessage="Titles are required")]
            public string Title { get; set; }

            [Range(5,100,ErrorMessage ="Movies cost between $5 and $100.")]
            public decimal Price { get; set; }
        }
    }
}

Re-Run votre application et essayez d’entrer un film dont le prix est supérieur à 100. Une erreur s’affiche une fois que vous avez envoyé le formulaire. L’erreur est interceptée côté serveur et se produit une fois que le formulaire est POSTed. Notez que ASP.NET les assistances HTML intégrées de MVC ont été suffisamment intelligentes pour afficher le message d’erreur et conserver les valeurs pour nous dans les éléments de zone de texte :

Cela fonctionne très bien, mais ce serait bien si nous pouvions le dire à l’utilisateur côté client, immédiatement, avant que le serveur ne soit impliqué.

Nous allons activer une validation côté client avec JavaScript.

Ajout de la validation côté client

Étant donné que notre classe Movie a déjà des attributs de validation, il nous suffit d’ajouter quelques fichiers JavaScript à notre modèle Create.aspx View et d’ajouter une ligne de code pour permettre la validation côté client.

À partir de VWD, accédez à notre dossier Views/Movie et ouvrez Create.aspx.

Ouvrez le dossier Scripts dans le Explorateur de solutions et faites glisser les trois scripts suivants vers la <balise head>.

• MicrosoftAjax.js
• MicrosoftMvcValidation.js

Vous souhaitez que ces fichiers de script apparaissent dans cet ordre.

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

Ajoutez également cette ligne unique au-dessus de Html.BeginForm :

<% Html.EnableClientValidation(); %>

Voici le code affiché dans l’IDE.

Exécutez votre application et accédez à nouveau à /Movies/Create, puis cliquez sur Créer sans entrer de données. Les messages d’erreur s’affichent immédiatement sans le flash de page que nous associons à l’envoi de données jusqu’au serveur. En effet, ASP.NET MVC valide maintenant l’entrée sur le client (à l’aide de JavaScript) et sur le serveur.

C’est beau ! Nous allons maintenant ajouter une colonne supplémentaire à la base de données.

PrécédentSuivant