Dans ce tutoriel, nous allons voir comment créer un CustomValidator avec validation Serveur et Client en ASP.Net MVC 3.

Le CustomValidator vérifiera que la valeur saisie est égale à ‘Test’.

Le validateur

Tout d’abord créer un dossier Validations dans votre solution et ajoutez-y le fichier suivant: MyValidatorAttribute.cs.

Notre nouvelle classe héritera de ValidationAttribute et IClientValidatable.

Note: La validation client utilise les nouvelles normes de validation HTML5, les noms doivent donc être en minuscule.

?View Code CSHARP
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
 
namespace MvcApplication3.Validations
{
    public class MyValidatorAttribute : ValidationAttribute, IClientValidatable
    {
        /// <summary>
        /// Propriété publique contenant la chaîne de Caractère à comparer
        /// </summary>
        public string StringToCompare { get; set; }
 
        /// <summary>
        /// Constructeur
        /// </summary>
        public MyValidatorAttribute()
        {
 
        }
 
        /// <summary>
        /// Validation serveur
        /// </summary>
        /// <param name="value">Valeur à comparer</param>
        /// <returns>Un booléen contenant le résultat de la comparaison de Value et StringToCompare</returns>
        public override bool IsValid(object value)
        {
            return (string)value == this.StringToCompare;
        }
 
        /// <summary>
        /// Client Validation
        /// </summary>
        /// <param name="metadata">The model metadata</param>
        /// <param name="context">The controller context</param>
        /// <returns></returns>
        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            var rule = new ModelClientValidationRule()
                           {
                               ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()), 
                               ValidationType = "myvalidator"
                           };
            rule.ValidationParameters.Add("stringtocompare", this.StringToCompare);
 
            yield return rule;
        }
    }
}

Le Modèle

Un modèle ultra basique a été créé pour ce tutoriel. Vous pourrez noter que ASP.Net MVC enlève automatiquement Attribute du nom du validateur qui a été créé précédemment.

?View Code CSHARP
using System.ComponentModel.DataAnnotations;
using MvcApplication3.Validations;
 
namespace MvcApplication3.Models
{
    public class ExampleModel
    {
        /// <summary>
        /// Propriété contenant le nom de l'utilisateur
        /// </summary>
        [Required]
        [Display(Name = "User name")]
        [MyValidator(StringToCompare = "test")]
        public string UserName { get; set; }
    }
}

Le Contrôleur

Pareil ici, le contrôleur est ultra simple, il retourne la vue en Get et valide le modèle en Post.

?View Code CSHARP
using System.Web.Mvc;
using MvcApplication3.Models;
 
namespace MvcApplication3.Controllers
{
    public class ExampleController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }
 
        [HttpPost]
        public ActionResult Index(ExampleModel exampleModel)
        {
            //Validation du modèle
            if (ModelState.IsValid)
            {
                Response.Redirect("Index");
            }
            return View();
        }
    }
}

Le Script

Le script vérifiera que la valeur saisie est égale à StringToCompare.

?View Code JAVASCRIPT
//Méthode de validation
$.validator.addMethod('myvalidator',
    function (value, element, parameters) {
        var stringtocompare = parameters['stringtocompare'];
        return value == stringtocompare;
    }
);
 
//Déclaration des paramètres de validation discrète par Jquery
$.validator.unobtrusive.adapters.add('myvalidator', ['stringtocompare'], function (options) {
        options.rules['myvalidator'] = {
            stringtocompare: options.params['stringtocompare']
        };
        options.messages['myvalidator'] = options.message;
});

Configuration

Pour activer la validation par le client sur toute l’application, il faut ajouter les paramètres suivants dans la web.config:

?View Code CONFIG
    <appSettings>
        <add key="ClientValidationEnabled" value="true"/>
        <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    </appSettings>

La vue

La vue permettra de saisir le nom de l’utilisateur. Une fois le texte rentré, le validateur coté client entrera en action et affichera un message d’erreur si le nom de l’utilisateur est différent de test.

Dans le cas ou le javascript aurait été désactivé côté client, la validation coté serveur se fera.

?View Code RAZOR
@model MvcApplication3.Models.ExampleModel
 
@{
    ViewBag.Title = "Index";
}
 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MyValidator.js")" type="text/javascript"></script>
 
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>ExampleModel</legend>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserName)
            @Html.ValidationMessageFor(model => model.UserName)
        </div>
 
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

Conclusion

Dans ce tutoriel, nous avons vu comment créer un CustomValidator avec validation Serveur et Client en ASP.Net MVC 3.

On pourrait aussi imaginer une validation via un webservice hébergé en interne, ainsi on aurait une méthode unique de validation, peut-être le sujet d’un autre article.

Mes sources

Pour cet article, je me suis aidé des sources suivantes:

Be Sociable, Share!