Crear un control NumericUpDown con un back-end de servicio web (C#)
por Christian Wenz
En lugar de permitir que un usuario escriba un valor en una casilla, un control numérico de arriba y abajo (que existe en Windows y otros sistemas operativos) podría resultar más cómodo. De forma predeterminada, el control NumericUpDown siempre aumenta o disminuye un valor en 1, pero un servicio web demuestra más flexibilidad.
Información general
En lugar de permitir que un usuario escriba un valor en una casilla, un control numérico de arriba y abajo (que existe en Windows y otros sistemas operativos) podría resultar más cómodo. De forma predeterminada, el control NumericUpDown
siempre aumenta o disminuye un valor en 1, pero un servicio web demuestra más flexibilidad.
Pasos
El kit de herramientas de control de AJAX de ASP.NET contiene el control extensor NumericUpDown
que agrega automáticamente dos botones a un cuadro de texto: uno para aumentar su valor y otro para reducirlo. Sin embargo, el control también admite una llamada de servicio web (o llamada de método de página). Cada vez que se hace clic en el botón hacia arriba o hacia abajo, el código de JavaScript se conecta al servidor web y ejecuta un método allí. La firma del método es la siguiente:
public int MethodName(int current, string tag) {}
El argumento current
es el valor actual del cuadro de texto; el atributo tag
son datos de contexto adicionales que se pueden establecer como una propiedad del control extensor NumericUpDown
(pero no es obligatorio).
En este ejemplo, el control numérico arriba/abajo solo permitirá valores que sean potencias de dos: 1, 2, 4, 8, 16, 32, 64, etc. Por lo tanto, el método ejecutado cuando el usuario desea aumentar el valor debe duplicar el valor anterior; el otro método debe dividir el valor por dos. Por lo tanto, este es el servicio web completo:
<%@ 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;
};
}
}
Por último, cree una nueva página ASP.NET. Como de costumbre, necesita un control ScriptManager
, un control TextBox
y un control NumericUpDownExtender
. Para este último, debe proporcionar la información del servicio web:
ServiceDownMethod
nombre del método web o del método de página de reducciónServiceDownPath
ruta de acceso al servicio web con el método de servicio de reducción; se debe omitir si usa un método de páginaServiceUpMethod
nombre del método web o del método de página de incrementoServiceUpPath
ruta de acceso al servicio web con el método up service; omitir si usa un método de página
Este es el marcado completo de la página:
<%@ 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 ejecuta la página, observe cómo el valor del cuadro de texto siempre se duplica al hacer clic en el botón superior y se reduce a la mitad al hacer clic en el botón inferior.
Solo aparecen números que son una potencia de 2 (haga clic para ver la imagen a tamaño completo)