Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

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.  

Posted: jeudi 23 novembre 2006 02:28 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

khamlon a dit :

après test de la derniere partie de ton post (ie. le slider sans asp.net) dans un gadget, il lève quelques erreur (dans le fichier common.js et sliderbehavior.js notemmant), a part inclure les .js ci dessus il y a d'autres choses a faire ?

# novembre 23, 2006 14:02

cyril a dit :

Je pense que le problème que tu rencontres vient du fait que Atlas charge pleins de choses avant la fin du chargement de la page ce qui permet d'améliorer la vitesse de chargement.

Mais certains fichiers JavaScript nécessite que la page soit chargé c'est surement pour ca que tu as une erreur.

Voici comment je fais :

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   <title>Untitled Page</title>

   <link href="../css/Slider.css" type="text/css" rel="stylesheet" />

   <script type="text/javascript" src="Microsoft.Web.Extensions/1.0.61025.0/Microsoft.Web.Resources.ScriptLibrary.MicrosoftAjax.debug.js"></script>

   <script type="text/javascript"><![CDATA[

       Sys.Application.queueScriptReference('/AjaxToolkit/Common.js');

       Sys.Application.queueScriptReference('/AjaxToolkit/Timer.js');

       Sys.Application.queueScriptReference('/AjaxToolkit/Blocking.js');

       Sys.Application.queueScriptReference('/AjaxToolkit/DragDropScripts.js');

       Sys.Application.queueScriptReference('/AjaxToolkit/BaseScripts.js');

       Sys.Application.queueScriptReference('/AjaxToolkit/animations.js');

       Sys.Application.queueScriptReference('/AjaxToolkit/SliderBehavior.js');

       Sys.Application.add_init(function(){

           $create(AjaxControlToolkit.SliderBehavior, {

               'EnableHandleAnimation' : true,

               'id' : 'slider1',

               'Orientation' : 1,

               'Maximum' : 100,

               'Minimum' : 0,

               'RaiseChangeOnlyOnMouseUp' : false}, null, null, $get('slider'));

       });

   ]]></script>

</head>

<body>

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

</body>

# novembre 23, 2006 14:53

khamlon a dit :

effectivement je n'ai plus les erreurs au chargement...hormis une erreur de syntax apparement dans le $create ... je vais essayé de creuser ca

# novembre 23, 2006 15:44

cyril a dit :

erf il manque un }); pour finir le json.

       Sys.Application.add_init(function(){

           $create(AjaxControlToolkit.SliderBehavior, {

               'EnableHandleAnimation' : true,

               'id' : 'slider1',

               'Orientation' : 1,

               'Maximum' : 100,

               'Minimum' : 0,

               'RaiseChangeOnlyOnMouseUp' : false}, null, null, $get('slider'));

           });

       });

# novembre 23, 2006 15:57

khamlon a dit :

non je ne crois pas il y a une { ouverte au début de la fonction, une dans le $create (fermé apres le raisechangeonlyonmouseup) donc a la fin il n'y as besoin que d'une accolade ca ne vient pas de la (je l'ai testé en rajoutant les accolades : même problèmes

# novembre 23, 2006 16:14
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01