Partager via

Création d’un contrôle Haut/bas numérique avec un backend de service web (VB)

  • Article

par Christian Wenz

Télécharger le PDF

Au lieu de laisser un utilisateur taper une valeur dans une zone de case activée, un contrôle numérique haut/bas (qui existe sur Windows et d’autres systèmes d’exploitation) peut s’avérer plus confortable. Par défaut, le contrôle NumericUpDown augmente ou diminue toujours une valeur de 1, mais un service web prouve plus de flexibilité.

Vue d’ensemble

Au lieu de laisser un utilisateur taper une valeur dans une zone de case activée, un contrôle numérique haut/bas (qui existe sur Windows et d’autres systèmes d’exploitation) peut s’avérer plus confortable. Par défaut, le NumericUpDown contrôle augmente ou diminue toujours une valeur de 1, mais un service web fait preuve d’une plus grande flexibilité.

Étapes

Le ASP.NET AJAX Control Toolkit contient l’extendeur NumericUpDown qui ajoute automatiquement deux boutons à une zone de texte : un pour augmenter sa valeur, un pour la diminuer. Toutefois, le contrôle prend également en charge un appel de service web (ou un appel de méthode de page). Chaque fois que l’utilisateur clique sur le bouton haut ou bas, le code JavaScript se connecte au serveur web et y exécute une méthode. La signature de méthode est la suivante :

Function MethodName(ByVal current As Integer, ByVal tag As String) As Integer

L’argument current est la valeur actuelle dans la zone de texte ; l’attribut est des tag données de contexte supplémentaires qui peuvent être définies en tant que propriété de l’extendeur NumericUpDown (mais n’est pas obligatoire).

Pour cet exemple, le contrôle numérique haut/bas n’autorise que les valeurs qui sont des puissances de deux : 1, 2, 4, 8, 16, 32, 64, etc. Par conséquent, la méthode exécutée lorsque l’utilisateur souhaite augmenter la valeur doit doubler l’ancienne valeur ; l’autre méthode doit diviser la valeur par deux. Voici donc le service web complet :

<%@ WebService Language="VB" Class="NumericUpDown1" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
<System.Web.Script.Services.ScriptService()> _
Public Class NumericUpDown1
 Inherits System.Web.Services.WebService
 <WebMethod()> _
 Function Up(ByVal current As Integer, ByVal tag As String) As Integer
 If current <= 536870912 Then
 Return current * 2
 Else
 Return current
 End If
 End Function
 <WebMethod()> _
 Function Down(ByVal current As Integer, ByVal tag As String) As Integer
 If current >= 2 Then
 Return CInt(current / 2)
 Else
 Return current
 End If
 End Function
End Class

Enfin, créez une page ASP.NET. Comme d’habitude, vous avez besoin d’un ScriptManager contrôle, d’un TextBox contrôle et d’un NumericUpDownExtender contrôle. Pour ce dernier, vous devez fournir les informations du service web :

  • ServiceDownMethod nom de la méthode web down ou de la méthode de page
  • ServiceDownPath chemin d’accès au service web avec la méthode de service down ; omettre si vous utilisez une méthode page
  • ServiceUpMethod nom de la méthode web up ou de la méthode de page
  • ServiceUpPath chemin d’accès au service web avec la méthode de service up ; omettre si vous utilisez une méthode page

Voici le balisage complet de la page :

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title>Control Toolkit</title>
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 How many MB do you want? <asp:TextBox ID="TextBox1" Text="32" runat="server" />
 <ajaxToolkit:NumericUpDownExtender ID="nud" runat="server"
 TargetControlID="TextBox1" Width="100"
 ServiceUpPath="NumericUpDown1.vb.asmx" ServiceDownPath="NumericUpDown1.vb.asmx"
 ServiceUpMethod="Up" ServiceDownMethod="Down" />
 </div>
 </form>
</body>
</html>

Si vous exécutez la page, notez que la valeur de la zone de texte double toujours lorsque vous cliquez sur le bouton supérieur et est divisée par deux lorsque vous cliquez sur le bouton inférieur.

Seuls les nombres d’une puissance de 2 apparaissent

Seuls les nombres d’une puissance de 2 apparaissent (cliquez pour afficher l’image en taille réelle)

Précédent