Enlace de datos del control deslizante (C#)
por Christian Wenz
El objeto visual del control deslizante del AJAX Control Toolkit proporciona un control deslizante gráfico que se puede controlar mediante el mouse. Es posible enlazar la posición actual del control deslizante a otro control de ASP.NET.
Información general
El objeto visual del control deslizante del AJAX Control Toolkit proporciona un control deslizante gráfico que se puede controlar mediante el mouse. Es posible enlazar la posición actual del control deslizante a otro control de ASP.NET.
Pasos
Para activar la funcionalidad de AJAX ASP.NET y el Control Toolkit, el control ScriptManager
debe colocarse en cualquier parte de la página (pero dentro del elemento <form>
):
<asp:ScriptManager ID="asm" runat="server" />
A continuación, agregue dos controles TextBox
a la página. Uno se transformará en un control deslizante gráfico y el otro contendrá la posición del control deslizante.
<asp:TextBox ID="Slider1" runat="server" />
<asp:TextBox ID="SliderValue" runat="server" />
El siguiente paso ya es el paso final. El control SliderExtender
del AJAX Control Toolkit de ASP.NET hace que un control deslizante salga del primer cuadro de texto y actualice automáticamente el segundo cuadro de texto cuando cambia la posición del control deslizante. Para que funcione, el atributo TargetControlID
de SliderExtender
debe establecerse en el identificador del primer cuadro de texto; el atributo BoundControlID
debe establecerse en el identificador del segundo cuadro de texto.
<ajaxToolkit:SliderExtender ID="se1" runat="server" TargetControlID="Slider1"
BoundControlID="SliderValue" />
Como puede ver en el explorador, el enlace de datos funciona en ambas direcciones: escribir un nuevo valor en el cuadro de texto actualiza la posición del control deslizante. Si hace que el segundo cuadro de texto sea de solo lectura, puede agregar una protección débil al campo de texto para que sea más difícil que el usuario actualice manualmente el valor allí.
El control deslizante y el cuadro de texto están sincronizados (Haga clic para ver la imagen a tamaño completo)