Crear un control NumericUpDown con un back-end de servicio web (VB)
por Christian Wenz
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:
ServiceDownMethodnombre del método web o del método de página de reducciónServiceDownPathruta de acceso al servicio web con el método de servicio de reducción; se debe omitir si usa un método de páginaServiceUpMethodnombre del método web o del método de página de incrementoServiceUpPathruta 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.
Solo aparecen números que son una potencia de 2 (haga clic para ver la imagen a tamaño completo).
