Compartilhar via

Criação um controle numérico para cima/para baixo com um back-end de serviço Web (VB)

por Christian Wenz

Baixar PDF

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ágina
  • ServiceDownPath caminho para o serviço Web com o método de serviço inativo; omita se você estiver usando um método de página
  • ServiceUpMethod nome do método web up ou do método de página
  • ServiceUpPath 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 são uma potência de 2 aparecem

Somente números que têm uma potência de 2 são exibidos (clique para exibir a imagem em tamanho real)

Anterior

  • Last updated on