Using the Slider Control With Auto-Postback (C#)
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.
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.
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:
<asp:TextBox ID="Slider1" runat="server" AutoPostBack="true" />
<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:
<ajaxToolkit:SliderExtender ID="se1" runat="server"
TargetControlId="Slider1" BoundControlID="SliderValue" />
An additional label element will later be used to inform the user of a postback:
<asp:Label ID="LastUpdate" runat="server" />
Finally, the ScriptManager
control of ASP.NET AJAX loads the required JavaScript for the Control Toolkit to work:
<asp:ScriptManager ID="asm" runat="server" />
Now the slider is posting back; on the server-side, this event may be caught and acted upon:
<script runat="server">
void Page_Load()
{
if (Page.IsPostBack)
{
LastUpdate.Text = "Last update: " + DateTime.Now.ToLongTimeString();
}
}
</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)