Uso del Controllo Slider con postback automatico (VB)

di Christian Wenz

Scaricare il PDF

Il controllo Slider in AJAX Control Toolkit fornisce un dispositivo di scorrimento grafico che può essere controllato tramite il mouse. È possibile eseguire il postback automatico del dispositivo di scorrimento una volta che il suo valore cambia.

Informazioni generali

Il controllo Slider in AJAX Control Toolkit fornisce un dispositivo di scorrimento grafico che può essere controllato tramite il mouse. È possibile eseguire l'autopostback del dispositivo di scorrimento una volta modificato il valore.

Gradi

Per eseguire automaticamente il postback del dispositivo di scorrimento dopo una modifica, entrambe le caselle di testo richiedono l'attributo AutoPostBack="true": la casella di testo che diventerà il dispositivo di scorrimento stesso e la casella di testo che contiene la posizione del dispositivo di scorrimento. Di seguito è riportato il markup necessario per questo:

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

Il SliderExtender controllo del ASP.NET AJAX Control Toolkit assegna la funzionalità di scorrimento alle due caselle di testo:

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

In un secondo momento verrà usato un elemento di etichetta aggiuntivo per informare l'utente di un postback:

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

Infine, il ScriptManager controllo di ASP.NET AJAX carica il codice JavaScript necessario per il funzionamento di Control Toolkit:

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

Ora il dispositivo di scorrimento sta inviando nuovamente i dati; dal lato server, questo evento può essere intercettato e gestito.

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

Lo spostamento del dispositivo di scorrimento attiva un postback (clicca qui per visualizzare l'immagine a schermo intero)

Successivamente, la data di questa modifica viene scritta nell'etichetta (fare clic per visualizzare l'immagine a dimensione intera)