Using the Slider Control With Auto-Postback (C#)

by Christian Wenz

Download PDF

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:

<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

Moving the slider triggers a postback (Click to view full-size image)

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

Afterwards, the date of this change is written in the label (Click to view full-size image)