Création d’un contrôle Haut/bas numérique avec un backend de service web (C#)
par Christian Wenz
Au lieu de permettre à un utilisateur de 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) pourrait s’avérer plus confortable. Par défaut, le contrôle NumericUpDown augmente ou diminue toujours une valeur de 1, mais un service web s’avère plus flexible.
Vue d’ensemble
Au lieu de permettre à un utilisateur de 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) pourrait s’avérer plus confortable. Par défaut, le NumericUpDown contrôle augmente ou diminue toujours une valeur de 1, mais un service web s’avère plus flexible.
Étapes
Le ASP.NET AJAX Control Toolkit contient l’extension 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 appel de méthode de page). Chaque fois que vous cliquez 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 :
public int MethodName(int current, string tag) {}
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="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;
};
}
}
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 :
ServiceDownMethodnom de la méthode web down ou de la méthode de pageServiceDownPathchemin d’accès au service web avec la méthode de service down ; omettre si vous utilisez une méthode pageServiceUpMethodnom de la méthode web up ou de la méthode de pageServiceUpPathchemin 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="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, notez que la valeur de la zone de texte double toujours lorsque vous cliquez sur le bouton supérieur et est réduite de moitié lorsque vous cliquez sur le bouton inférieur.
Seuls les nombres qui ont une puissance de 2 s’affichent (Cliquez pour afficher l’image en taille réelle)
