Atteint de JavaScriptite Aiguë [Cyril Durand]

Utiliser le controle slider des Ajax Toolkit

Un des contrôles que j'apprécie particulièrement dans le projet Ajax Control Toolkit et le slider ce contrôle non présent en HTML est souvent utile dans des applications web.

Un slider ? ca ressemble à quoi cette bête là ? 

Un slider ressemble à ça :

Comment je fais pour avoir un slider dans mes pages web ?

C'est trés simple, presque trop même ! Le slider est un extender c'est à dire qu'il étend un contrôle déjà existant, dans notre cas il se greffe à une textbox. Si vous avez dans une application existante une textbox qui doit récuperer un nombre entre deux valeurs il est extremement simple de le convertir en slider.

Prenons un exemple concrêt avec une textbox qui prend l'âge d'une personne avec bien sur le RangeValidator et RequiredFieldValidator qui vont bien.

   <asp:Label ID="LabelAge" runat="server" AssociatedControlID="TextBoxAge" Text="Votre age :" /> <asp:TextBox ID="TextBoxAge" runat="server" />
   <asp:RangeValidator ID="RangeValidatorAge" ControlToValidate="TextBoxAge" runat="server" ErrorMessage="*" MinimumValue="0" MaximumValue="120" Type="Integer"  />
   <asp:RequiredFieldValidator ID="RequiredFieldValidatorAge" ControlToValidate="TextBoxAge" runat="server" ErrorMessage="*" />

Pour convertir ce textbox en Slider il suffit de rajouter ces quelques lignes :

    <ajaxToolkit:SliderExtender ID="SliderExtenderAge" runat="server"
                                BehaviorID="SliderAge"
                                TargetControlID="TextBoxAge"
                                Orientation="Horizontal"
                                EnableHandleAnimation="true"
                                />

Votre page ressemble alors à ça :

Non vous n'avez rien loupé ! il suffit de si peu de ligne pour arriver à un tel résultat ! Il manque quand même une chose primordial dans notre exemple : l'affichage de la valeur du slider, rien de bien compliqué il suffit de rajouter un label dans la page est de renseigner la propriété BoundControlID :

    <ajaxToolkit:SliderExtender ID="SliderExtenderAge" runat="server"
                                BehaviorID="SliderAge"
                                TargetControlID="TextBoxAge"
                                BoundControlID="TextBoxAge_BoundControl"
                                Orientation="Horizontal"
                                EnableHandleAnimation="true"
                                />

Je vous l'avez dit que c'était simple ... Si vous vous abonnez à l'événement textchanged du textbox celui ci sera déclenché non pas à chaque fois que le textbox change de valeur mais lorsqu'on relâche la souris du curseur du slider, donc pas de soucis de ce côté là.

Vous pouvez également rajouter un "step" à votre slider si vous voulez séléctionner seulement de 10 en 10 par exemple, pour cela on utilise la propriété Steps. Vous voulez positionner le contrôle verticalement (de haut en bas) ? pas de soucis il suffit de modifier la propriété Orientation à Vertical.

Niveau sécurité, ca dit quoi ?

Mais revenons plus haut, vous avez vu que j'ai associé mon textBox à deux validators pour m'assurer que la valeur du textbox soit correcte, maintenant qu'on utilise un slider il n'est plus possible de rentrer des valeurs invalides, alors ces deux validators sont-ils toujours utiles ? Absolument ! Ce n'est pas parce qu'on effectue une validation côté client qu'il ne faut pas valider les valeurs côté serveur, un simple outil comme Fiddler permet de rejouer une requête HTTP libre à vous de la modifier et de mettre ce que l'on veut dans notre textbox.

J'aime JavaScript ! Je peux le faire sans utiliser ASP.net ?

Ce contrôle est sympathique mais peut-ont l'utiliser en JavaScript pur, sans même utiliser ASP.net ? bien sur que oui !

Il vous faut tout d'abord inclure quelques fichiers JavaScript : MicrosoftAjax.js, Common.js, Timer.js, Blocking.js, DragDropScripts.js, BaseScripts.js, animations.js, SliderBehavior.js. Puis il vous faut une textbox dans la page HTML :

    <input type="text" id="slider" value="20" />

Vous êtes alors prêt pour convertir cette textbox en slider :

    $create(AjaxControlToolkit.SliderBehavior, {
        'EnableHandleAnimation' : true,
        'id' : 'slider1',
        'Orientation' : 1,
        'Maximum' : 100,
        'Minimum' : 0,
        'RaiseChangeOnlyOnMouseUp' : false}, null, null, $get('slider'));

C'est tout ! Vous voyez que les différentes propriétés correspondent aux différentes propriété du contrôle ASP.net, une nouvelle propriété a quand même fait son apparition : RaiseChangeOnlyOnMouseUp que je définis à false (true par défaut), cette propriété déclenche l'événement textChanged à chaque fois que la textbox change pas seulement lorsqu'on relâche la souris.

Il nous est donc possible de nous abonner à l'evenement change du slider :

    $addHandler($get('slider'), 'change', function(e){
            // ici votre code sur le onchange du slider 
            // pour obtenir la valeur : e.target.value;
        }); 

Ce contrôle est vraiment simple à utiliser non ? alors n'hésitez pas à l'utiliser si vous avez une textbox qui se transformerais bien en slider.