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

  • Artículo

por Christian Wenz

Descargar PDF

En lugar de hacer que un usuario escriba un valor en una casilla, un control NumericUpDown (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 hacer que un usuario escriba un valor en una casilla, un control NumericUpDown (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

ASP.NET AJAX Control Toolkit 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:

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

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 NumericUpDown 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="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

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 de servicio de incremento; se debe omitir si usa un método de página

Este es el marcado completo de la página:

<%@ 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 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).

Anterior