Partager via


Utilisation du contrôle Slider avec publication automatique (VB)

par Christian Wenz

Télécharger le PDF

Le contrôle Slider dans ajax Control Toolkit fournit un curseur graphique qui peut être contrôlé à l’aide de la souris. Il est possible d’effectuer le postpostback automatique du curseur une fois que sa valeur change.

Vue d’ensemble

Le contrôle Slider dans ajax Control Toolkit fournit un curseur graphique qui peut être contrôlé à l’aide de la souris. Il est possible d’effectuer le postpostback automatique du curseur une fois que sa valeur change.

Étapes

Pour que le curseur soit automatiquement posté en cas de modification, les deux zones de texte ont besoin de l’attribut AutoPostBack="true": La zone de texte qui deviendra le curseur lui-même et la zone de texte qui contient la position du curseur. Voici le balisage requis pour cela :

<asp:TextBox ID="Slider1" runat="server" AutoPostBack="true" />
<asp:TextBox ID="SliderValue" runat="server" AutoPostBack="true" />

Le SliderExtender contrôle du ASP.NET AJAX Control Toolkit affecte la fonctionnalité de curseur aux deux zones de texte :

<ajaxToolkit:SliderExtender ID="se1" runat="server"
 TargetControlId="Slider1" BoundControlID="SliderValue" />

Un élément label supplémentaire sera utilisé ultérieurement pour informer l’utilisateur d’une publication :

<asp:Label ID="LastUpdate" runat="server" />

Enfin, le ScriptManager contrôle de ASP.NET AJAX charge le Code JavaScript requis pour que control Toolkit fonctionne :

<asp:ScriptManager ID="asm" runat="server" />

Maintenant, le curseur est en cours de publication ; côté serveur, cet événement peut être intercepté et traité :

<script runat="server">
 Sub Page_Load()
 If Page.IsPostBack Then
 LastUpdate.Text = "Last update: " & DateTime.Now.ToLongTimeString()
 End If
 End Sub
</script>

Le déplacement du curseur déclenche une publication

Le déplacement du curseur déclenche une publication (cliquer pour afficher l’image en taille réelle)

Ensuite, la date de cette modification est écrite dans l’étiquette

Ensuite, la date de cette modification est écrite dans l’étiquette (cliquez pour afficher l’image en taille réelle)