Uso del controllo Slider con postback automatico (C#)

di Christian Wenz

Scarica 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 modificato il valore.

Panoramica

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 modificato il valore.

Passaggi

Per eseguire automaticamente il postback del dispositivo di scorrimento su 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. Ecco il markup necessario per questo:

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

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

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

Successivamente verrà usato un elemento 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 pubblicando indietro; sul lato server, questo evento può essere intercettato e agito su:

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

Lo spostamento del dispositivo di scorrimento attiva un postback (fare clic per visualizzare l'immagine a dimensione intera)

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

Avanti