Associação de Dados do controle deslizante (C#)

por Christian Wenz

Baixar código ou baixar PDF

O controle deslizante no AJAX Control Toolkit fornece um controle deslizante gráfico que pode ser controlado usando o mouse. É possível associar a posição atual do controle deslizante a outro controle ASP.NET.

Visão geral

O controle deslizante no AJAX Control Toolkit fornece um controle deslizante gráfico que pode ser controlado usando o mouse. É possível associar a posição atual do controle deslizante a outro controle ASP.NET.

Etapas

Para ativar a funcionalidade do ASP.NET AJAX e do kit de ferramentas de controle, o controle de ScriptManager deve ser colocado em qualquer lugar na página (mas dentro do elemento <form>):

<asp:ScriptManager ID="asm" runat="server" />

Em seguida, adicione dois controles de TextBox à página. Uma será transformada em um controle deslizante gráfico e a outra terá a posição do controle deslizante.

<asp:TextBox ID="Slider1" runat="server" />
<asp:TextBox ID="SliderValue" runat="server" />

A próxima etapa já é a etapa final. O controle de SliderExtender do ASP.NET AJAX Control Toolkit faz um controle deslizante da primeira caixa de texto e atualiza automaticamente a segunda caixa de texto quando a posição do controle deslizante é alterada. Para que isso funcione, o atributo TargetControlID do SliderExtenderdeve ser definido como a ID da primeira caixa de texto; o atributo BoundControlID deve ser definido como a ID da segunda caixa de texto.

<ajaxToolkit:SliderExtender ID="se1" runat="server" TargetControlID="Slider1"
 BoundControlID="SliderValue" />

Como você pode ver no navegador, a vinculação de dados funciona em ambas as direções: inserir um novo valor na caixa de texto atualiza a posição do controle deslizante. Se você fizer a segunda caixa de texto somente leitura, poderá adicionar uma proteção fraca ao campo de texto para que seja mais difícil para o usuário atualizar manualmente o valor ali.

o controle deslizante de e a caixa de texto estão em sincronia

O controle deslizante e a caixa de texto estão em sincronia (clique para exibir a imagem em tamanho normal)