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

por Christian Wenz

Baixar código ou baixar PDF

Em vez de permitir que um usuário digite um valor em uma caixa de seleção, um controle numérico para cima/para baixo (que existe no Windows e em outros sistemas operacionais) pode provar o mais confortável. Por padrão, o controle NumericUpDown sempre aumenta ou diminui um valor em 1, mas um serviço Web comprova mais flexibilidade.

Visão geral

Em vez de permitir que um usuário digite um valor em uma caixa de seleção, um controle numérico para cima/para baixo (que existe no Windows e em outros sistemas operacionais) pode provar o mais confortável. Por padrão, o controle de NumericUpDown sempre aumenta ou diminui um valor em 1, mas um serviço Web comprova mais flexibilidade.

Etapas

O ASP.NET AJAX Control Toolkit contém o NumericUpDown Extender, que adiciona automaticamente dois botões a uma caixa de texto: um para aumentar seu valor, um para diminuir. 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:

public int MethodName(int current, string tag) {}

O argumento current é o valor atual na caixa de texto; o atributo tag são dados de contexto adicionais que podem ser definidos como uma propriedade do extensor NumericUpDown (mas não é obrigatório).

Para este exemplo, o controle numérico para cima/para baixo só deve permitir valores que sejam 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 em dois. Aqui está o serviço 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 fim, crie uma nova página do ASP.NET. Como de costume, você precisa de um controle de ScriptManager, um controle de TextBox e um controle de NumericUpDownExtender. Para o último, você precisa fornecer as informações do serviço Web:

  • ServiceDownMethod nome do método da Web ou do método de página inoperante
  • ServiceDownPath caminho para o serviço Web com o método de serviço inoperante; omitir se você estiver usando um método de página
  • ServiceUpMethod nome do método ou da página da Web up
  • ServiceUpPath caminho para o serviço Web com o método de serviço up; omitir se você estiver usando um método de página

Aqui está a marcação completa para a 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>

Se você executar a página, observe como o valor na caixa de texto sempre é dobrado quando você clica no botão superior e é dividido quando você clica no botão inferior.

apenas números que são uma potência de 2 aparecem

Somente os números que são uma potência de 2 aparecem (clique para exibir a imagem em tamanho normal)