Usar el control Slider con postback automático (C#)

por Christian Wenz

Descargar PDF

El control Slider del Kit de herramientas de control de AJAX proporciona un control deslizante gráfico que se puede controlar mediante el mouse. Es posible realizar la repostura (autopostback) del control deslizante una vez que cambia su valor.

Información general

El control Slider del Kit de herramientas de control de AJAX proporciona un control deslizante gráfico que se puede controlar mediante el mouse. Es posible realizar la repostura (autopostback) del control deslizante una vez que cambia su valor.

Pasos

Para hacer que el control deslizante haga postback automático sobre un cambio, ambos cuadros de texto necesitan el atributo AutoPostBack="true": el cuadro de texto que se convertirá en el propio control deslizante y el cuadro de texto que contiene la posición del control deslizante. Este es el marcado necesario para eso:

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

El control SliderExtender del Kit de herramientas de control de AJAX para ASP.NET asigna la funcionalidad de control deslizante a los dos cuadros de texto:

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

Posteriormente, se usará un elemento de etiqueta adicional para informar al usuario de una devolución (postback):

<asp:Label ID="LastUpdate" runat="server" />

Por último, el control ScriptManager de AJAX para ASP.NET carga el JavaScript necesario para que el Kit de herramientas de control funcione:

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

Ahora el control deslizante está haciendo postback; en el lado servidor, este evento puede detectarse y actuarse sobre él:

<script runat="server">
 void Page_Load()
 {
 if (Page.IsPostBack)
 {
 LastUpdate.Text = "Last update: " + DateTime.Now.ToLongTimeString();
 }
 }
</script>

Mover el control deslizante desencadena un postback (haga clic para ver la imagen a tamaño completo).

Después, la fecha de este cambio se escribe en la etiqueta (haga clic para ver la imagen a tamaño completo).

Siguiente