Adding Client-Side Events To Extender Controls

In the previous articles I wrote about how to use the extender controls available in ASP.NET AJAX Control Toolkit, how to process them on the server, validate the data. It mainly dealt with a server-side part. Today, I'll show you how to add client-side events to the extender controls.

As an example, I'll use Slider again. But unlike the previous article where we processed its value on the server, we'll use its value directly on the page with JavaScript to resize an image, although it won't actually resize the picture, but it will just resize it on the page, i.e., just change the width and height attributes of the ``` tag.

Let's start, add some image, two sliders for width and height, two text boxes and two labels.

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
  <div>
    Width:<br />
    <asp:TextBox ID="txtWidth" runat="server" />
    <asp:Label ID="lblWidth" runat="server" />
    <cc1:SliderExtender
      ID="sliderWidth"
      runat="server"
      TargetControlID="txtWidth"
      BoundControlID="lblWidth"
      Minimum="100"
      Maximum="800"
    >
    </cc1:SliderExtender>
    <br />

    Height:<br />
    <asp:TextBox ID="txtHeight" runat="server" />
    <asp:Label ID="lblHeight" runat="serBver" />
    <cc1:SliderExtender
      ID="sliderHeight"
      runat="server"
      TargetControlID="txtHeight"
      BoundControlID="lblHeight"
      Minimum="100"
      Maximum="532"
    >
    </cc1:SliderExtender>
    <br />

    <asp:Image
      ID="imgPanda"
      runat="server"
      ImageUrl="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Giant_Panda_2004-03-2.jpg/800px-Giant_Panda_2004-03-2.jpg"
    />
  </div>
</form>

We want to resize the image on moving the slider, since when we move the slider handler, the actual value is being changed in the assigned TextBox, we should add the onChanged even to the TextBox.

protected void Page_Load(object sender, EventArgs e)
{
    txtWidth.Attributes.Add("onChange", "ChangeWidth()");
    txtHeight.Attributes.Add("onChange", "ChangeHeight()");
}

And add the JavaScript event handlers.

<script type="text/javascript">
    function ChangeWidth()
    {
        $get("imgPanda").width = $get("txtWidth").value;
    }

    function ChangeHeight()
    {
        $get("imgPanda").height = $get("txtHeight").value;
    }
</script>

By the way, please note the we are using the $get() shortcut here that actually invokes document.getElementById() Let's test it. The image gets really resized but only when you release the button, but not when you just move the slider handle. This can be corrected by setting the RaiseChangeOnlyOnMouseUp to false.

<cc1:SliderExtender
  ID="sliderWidth"
  runat="server"
  TargetControlID="txtWidth"
  BoundControlID="lblWidth"
  Minimum="100"
  Maximum="800"
  RaiseChangeOnlyOnMouseUp="false"
>
</cc1:SliderExtender>
<%-- some other tags--%>
<cc1:SliderExtender
  ID="sliderHeight"
  runat="server"
  TargetControlID="txtHeight"
  BoundControlID="lblHeight"
  Minimum="100"
  Maximum="532"
  RaiseChangeOnlyOnMouseUp="false"
>
</cc1:SliderExtender>

#Conclusion In this tutorial we have learnt how to add how add client-side events to the extender controls, how to handle them. We have also learnt about the RaiseChangeOnlyOnMouseUp attribute of the Slider control.

Your feedback is appretiated.