ASP.NET AJAX Control Toolkit Extenders: Processing And Validation

In the previous article I told you about ASP.NET AJAX Control Toolkit, I explained its purpose, listed the available controls and showed an example. However, I think some things should be explained a bit more detailed. Today I'm going to talk about the extenders controls, I already mentioned them in the previous article, but I can repeat. An extender is a control that is a based on an ASP.NET web control, but provides an additional client-side functionality. Slider is a good example of an extender, in looks like a real sliding control in desktop applications, but in fact it just extends the TextBox control. So, its value is actually stored in the TextBox that is linked with a slider by the TargetControlID attribute, thus when processing a form you should look for the value in the TextBox. Example:

Default.aspx

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
  <div>
    <%--The TextBox that contains the Slider value--%>
    <asp:TextBox ID="txtSlider" runat="server" />
    <asp:Label ID="lblSlider" runat="server" />

    <cc1:SliderExtender
      ID="SliderExtender1"
      runat="server"
      TargetControlID="txtSlider"
      BoundControlID="lblSlider"
    >
    </cc1:SliderExtender>

    <asp:Button
      ID="btnSubmit"
      runat="server"
      Text="Submit"
      onclick="btnSubmit_Click"
    />
  </div>
</form>

Default.aspx.cs

protected void btnSubmit_Click(object sender, EventArgs e)
{
    //We use TextBoxID.Text to access the Slider value
    Response.Write(txtSlider.Text);
}

The next important thing is validation. Although many extenders do help users to enter a correct value (i.e. sliders, numeric up-downs, mask edits, filtered text boxes), we still need to validate the input, because if JavaScript, for some reasons, is disabled, users will see a plain text box instead of a fancy control or some people can try to hack your application by putting incorrect values into the form. So, there is nothing difficult, just use plain ASP.NET validators. If the value should fall between 1 and 10, then add a RangeValidator and RequiredValidator to check if the value isn't empty.

<%--The TextBox that contains the Slider value--%>
<asp:TextBox ID="txtSlider" runat="server" />
<asp:Label ID="lblSlider" runat="server" />

<%-- The validator that checks the value range --%>
<asp:RequiredFieldValidator
  runat="server"
  ControlToValidate="txtSlider"
  ErrorMessage="The value shouldn't be empty"
  Display="Dynamic"
/>
<%-- The validator that checks whether the value is empty --%>
<asp:RangeValidator
  runat="server"
  ControlToValidate="txtSlider"
  Type="Integer"
  MinimumValue="1"
  MaximumValue="10"
  ErrorMessage="The value should be between 1 and 10"
  Display="Dynamic"
/>

<cc1:SliderExtender
  ID="SliderExtender1"
  runat="server"
  TargetControlID="txtSlider"
  BoundControlID="lblSlider"
  Minimum="1"
  Maximum="10"
>
</cc1:SliderExtender>