Using the Slider Control With Auto-Postback

Christian Wenz

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>

Next Tutorial