Criação um controle numérico para cima/para baixo com um back-end de serviço Web (VB)
por Christian Wenz
Em vez de permitir que um usuário digite um valor em uma caixa de marcar, um controle numérico para cima/para baixo (que existe no Windows e em outros sistemas operacionais) pode ser mais confortável. Por padrão, o controle NumericUpDown sempre aumenta ou diminui um valor em 1, mas um serviço Web prova mais flexibilidade.
Visão geral
Em vez de permitir que um usuário digite um valor em uma caixa de marcar, um controle numérico para cima/para baixo (que existe no Windows e em outros sistemas operacionais) pode ser mais confortável. Por padrão, o NumericUpDown
controle sempre aumenta ou diminui um valor em 1, mas um serviço Web prova mais flexibilidade.
Etapas
O ASP.NET Kit de Ferramentas de Controle AJAX contém o NumericUpDown
extensor que adiciona automaticamente dois botões a uma caixa de texto: um para aumentar seu valor, um para reduzi-lo. No entanto, o controle também dá suporte a uma chamada de serviço Web (ou chamada de método de página). Sempre que o botão para cima ou para baixo é clicado, o código JavaScript se conecta ao servidor Web e executa um método lá. A assinatura do método é a seguinte:
Function MethodName(ByVal current As Integer, ByVal tag As String) As Integer
O current
argumento é o valor atual na caixa de texto; o tag
atributo são dados de contexto adicionais que podem ser definidos como uma propriedade do NumericUpDown
extensor (mas não é necessário).
Para este exemplo, o controle numérico para cima/para baixo só deve permitir valores que são potências de dois: 1, 2, 4, 8, 16, 32, 64 e assim por diante. Portanto, o método executado quando o usuário deseja aumentar o valor deve dobrar o valor antigo; o outro método deve dividir o valor por dois. Portanto, aqui está o serviço 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 fim, crie uma nova página de ASP.NET. Como de costume, você precisa de um ScriptManager
controle, um TextBox
controle e um NumericUpDownExtender
controle. Para este último, você precisa fornecer as informações do serviço Web:
ServiceDownMethod
nome do método da Web inativo ou do método de páginaServiceDownPath
caminho para o serviço Web com o método de serviço inativo; omita se você estiver usando um método de páginaServiceUpMethod
nome do método web up ou do método de páginaServiceUpPath
caminho para o serviço Web com o método de serviço up; omita se você estiver usando um método de página
Aqui está a marcação completa para a 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>
Se você executar a página, observe como o valor na caixa de texto sempre dobra quando você clica no botão superior e é reduzido pela metade quando você clica no botão inferior.
Somente números que têm uma potência de 2 são exibidos (clique para exibir a imagem em tamanho real)