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

por Christian Wenz

Baixar PDF

O controle deslizante no Kit de Ferramentas de Controle AJAX 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 Kit de Ferramentas de Controle AJAX 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 de ASP.NET AJAX e o Kit de Ferramentas de Controle, o ScriptManager controle deve ser colocado em qualquer lugar na página (mas dentro do <form> elemento ):

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

Em seguida, adicione dois TextBox controles à página. Um será transformado em um controle deslizante gráfico e o outro manterá 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 SliderExtender controle do ASP.NET Kit de Ferramentas de Controle AJAX 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, SliderExtendero atributo deve TargetControlID ser definido como a ID da primeira caixa de texto; o BoundControlID atributo 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 associaçã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 lá dentro.

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