Using the Slider Control With Auto-Postback (VB)
The Slider control in the AJAX Control Toolkit provides a graphical slider that can be controlled using the mouse. It is possible to make the slider autopostback once its value changes.
Overview
The Slider control in the AJAX Control Toolkit provides a graphical slider that can be controlled using the mouse. It is possible to make the slider autopostback once its value changes.
Steps
In order to make the slider automatically postback upon a change, both text boxes need the attribute AutoPostBack="true": The text box that will become the slider itself, and the text box that holds the slider’s position. Here is the required markup for that:
[!code-aspxMain]
1: <asp:TextBox ID="Slider1" runat="server" AutoPostBack="true" />
2: <asp:TextBox ID="SliderValue" runat="server" AutoPostBack="true" />
The SliderExtender control from the ASP.NET AJAX Control Toolkit assigns the slider functionality to the two text boxes:
[!code-aspxMain]
1: <ajaxToolkit:SliderExtender ID="se1" runat="server"
2: TargetControlId="Slider1" BoundControlID="SliderValue" />
An additional label element will later be used to inform the user of a postback:
[!code-aspxMain]
1: <asp:Label ID="LastUpdate" runat="server" />
Finally, the ScriptManager control of ASP.NET AJAX loads the required JavaScript for the Control Toolkit to work:
[!code-aspxMain]
1: <asp:ScriptManager ID="asm" runat="server" />
Now the slider is posting back; on the server-side, this event may be caught and acted upon:
[!code-aspxMain]
1: <script runat="server">
2: Sub Page_Load()
3: If Page.IsPostBack Then
4: LastUpdate.Text = "Last update: " & DateTime.Now.ToLongTimeString()
5: End If
6: End Sub
7: </script>
Moving the slider triggers a postback (Click to view full-size image)
Afterwards, the date of this change is written in the label (Click to view full-size image)
)
|
|