Compartir a través de


Uso del Control deslizante con postback automático (VB)

por Christian Wenz

Descargar PDF

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 realizar el AutoPostback del control deslizante una vez que cambia su valor.

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 realizar el AutoPostback del control deslizante una vez que cambia su valor.

Pasos

Para que el control deslizante haga postback (devolución) 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 objeto visual SliderExtender del ASP.NET AJAX Control Toolkit 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 un postback:

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

Por último, el objeto visual ScriptManager de ASP.NET AJAX carga el JavaScript necesario para que el Control Toolkit funcione:

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

Ahora el control deslizante está haciendo postback. Desde el servidor, este evento puede detectarse y actuar sobre:

<script runat="server">
 Sub Page_Load()
 If Page.IsPostBack Then
 LastUpdate.Text = "Last update: " & DateTime.Now.ToLongTimeString()
 End If
 End Sub
</script>

Moving the slider triggers a postback

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

Afterwards, the date of this change is written in the label

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