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

  • Artigo

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:

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

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ó 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="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 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 ou do método de página para baixo
  • 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="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 é duplo quando você clica no botão superior e é reduzido pela metade ao clicar 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 são exibidos (Clique para exibir a imagem em tamanho real)

Próximo