Traduction▲
Cet article est la traduction la plus fidèle possible de l'article original : Creating a Numeric Up/Down Control with a Web Service Backend
Présentation▲
Plutôt que de laisser l'utilisateur saisir une valeur dans une case, un contrôle NumericUpDown (qui existe sur Windows et les autres systèmes d'exploitation) pourrait se révéler plus confortable. Par défaut, le contrôle NumericUpDown incrémente ou décrémente toujours la valeur de 1, mais un service Web se révélera plus flexible.
Étapes▲
L'ASP.NET AJAX Control Toolkit contient l'extenseur NumericUpDown qui ajoute automatiquement deux boutons à une textbox: un pour incrémenter sa valeur, l'autre pour la décrémenter. Cependant, le contrôle gère également un appel à un service Web (ou à une méthode de Page). Lorsque le bouton plus ou moins est cliqué, le code JavaScript se connecte au server web et y exécute une méthode. La signature de la méthode est la suivante :
public int MethodName(int current, string tag) {}Le paramètre current est la valeur courante dans la textbox; le paramètre tag est une donnée contextuelle supplémentaire qui peut être définie comme une propriété supplémentaire de l'extenseur NumericUpDown (mais qui n'est pas obligatoire). Pour cet exemple, le contrôle NumericUpDown devra uniquement autoriser des valeurs qui sont des puissances de 2 : 1, 2, 4, 8, 16, 32, 64, etc. Dès lors, la méthode exécutée lorsque l'utilisateur veut incrémenter la valeur doit doubler la valeur précédente; l'autre méthode doit la diviser par deux. Voici le service Web complet :
<%@ WebService Language="C#" Class="NumericUpDown1" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[System.Web.Script.Services.ScriptService]
public class NumericUpDown1 : System.Web.Services.WebService {
[WebMethod]
public int Up(int current, string tag){
if (current <= 536870912){
return current * 2;
} else {
return current;
}
}
[WebMethod]
public int Down(int current, string tag){
if (current >= 2){
return (int)(current / 2);
} else {
return current;
};
}
}Pour finir, créez une nouvelle page ASP.NET. Comme d'habitude, vous avez besoin d'un contrôle ScriptManager, un contrôle TextBox et un contrôle NumericUpDownExtender. Pour le dernier, vous devez fournir les informations du service web :
- ServiceDownMethod : Nom de la méthode « décrémenter » du service ou de la page ;
- ServiceDownPath : Chemin vers le service web contenant la méthode « décrémenter »; Ne rien mettre s'il s'agit d'une méthode de page ;
- ServiceUpMethod : Nom de la méthode « incrémenter » du service ou de la page ;
- ServiceUpPath : Chemin vers le service web contenant la méthode « incrémenter »; Ne rien mettre s'il s'agit d'une méthode de page.
Voici le code de la page :
<%@ Page Language="C#" %>
<!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.cs.asmx"
ServiceDownPath="NumericUpDown1.cs.asmx" ServiceUpMethod="Up" ServiceDownMethod="Down" />
</div>
</form>
</body>
</html>Si vous exécutez la page, vous remarquerez que la valeur contenue dans la textbox double à chaque fois que vous cliquez sur le bouton « incrémenter », et est divisée en deux lorsque vous cliquez sur le bouton « décrémenter ».
