Compartir a través de


Crear un control NumericUpDown con un back-end de servicio web (C#)

por Christian Wenz

Descargar PDF

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ón
  • ServiceDownPath 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ágina
  • ServiceUpMethod nombre del método web o del método de página de incremento
  • ServiceUpPath 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.

Only numbers that are a power of 2 appear

Solo aparecen números que son una potencia de 2 (haga clic para ver la imagen a tamaño completo)