How to use NumericUpDownExtender in asp.net ajax

NumericUpDownExtender in asp.net ajax
NumericUpDownExtender is an asp.net ajax control toolkit's extender control. NumericUpDownExtender control can be extend and attached to an asp.net TextBox server control. target textbox control add a Up and a Down button that increment and decrement the value in the textbox. the increment and decrement can be simple +1/-1 arithmetic.

NumericUpDownExtender control have the following properties those are TargetControlID, TargetButtonUpID, TargetButtonDownID, Width, RefValues, Step, Minimum, Maximum, Tag, ServiceUpPath, ServiceUpMethod, ServiceDownPath and ServiceDownMethod.

NumericUpDownExtender control's TargetControlID property specify the TextBox server control which we want to extend as a NumericUpDown control. Width property set the combined size of TextBox and Up/Down buttons. Width property minimum value is 25.

Minimum property set the minimum allowed value for the extender control and Maximum property set the maximum allowed value. Step property get or set a number that specifies the step value used for simple numeric incrementing and decrementing.

RefValues property get or set a string which contains a list of strings separated by semicolons to be used as an enumeration. this property allow us to cycle through a provided list of values such as the months of the year.

TargetButtonUpID and TargetButtonDownID properties allow us to use custom images instead of default Up and Down button graphics.

ServiceUpPath, ServiceUpMethod, ServiceDownPath, ServiceDownMethod and Tag properties allow us to integrate a NumericUpDownExtender control with Web service.

NumericUpDownExtender control's have the following methods those are initialize(), dipose(), raiseCurrentChanged(Sys.EventArgs), readValue() and setCurrentToTextBox(value).

NumericUpDownExtender control's raiseCurrentChanged(Sys.EventArgs) method raises the currentChanged event. a Sys.EventArgs object represent event arguments for the currentChanged event. readValue() method allow us to read the value of associated textbox. setCurrentToTextBox(value) method set the associated textbox value.

NumericUpDownExtender control provide an event named currentChanged(handler). it allow us to add or remove an event handler for the currentChanged event. the Parameter used here is a function representing the event handler.
UsingNumericUpDownExtender.aspx

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html>

<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        int number =Convert.ToInt32(TextBox1.Text);
        Image1.Width = 50 * number;
    }    
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>How to use NumericUpDownExtender in asp.net ajax</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DodgerBlue; font-style:italic;">Ajax Control Toolkit Example: Using NumericUpDownExtender</h2>
        <hr width="600" align="left" color="LightBlue" />
        <asp:ScriptManager 
            ID="ScriptManager1"
            runat="server"
            >
        </asp:ScriptManager>
        <cc1:NumericUpDownExtender 
            ID="NumericUpDownExtender1"
            runat="server"
            TargetControlID="TextBox1"
            Minimum="1"
            Maximum="25"
            Width="100"
            >
        </cc1:NumericUpDownExtender>
        <asp:Label 
            ID="Label1" 
            runat="server" 
            Text="Multiply original Image Size"
            Font-Bold="true"
            ForeColor="Crimson"
            >
        </asp:Label>
        <asp:TextBox 
            ID="TextBox1"
            runat="server"
            Font-Bold="true"
            ForeColor="Crimson"
            BackColor="LightGoldenrodYellow"
            >
        </asp:TextBox>
        <asp:Button 
            ID="Button1"
            runat="server"
            Text="Resize Image"
            Font-Bold="true"
            OnClick="Button1_Click"
            ForeColor="Crimson"
            Height="30"
            />
        <br /><br />                        
        <asp:Image 
            ID="Image1"
            runat="server"
            ImageUrl="~/Images/RedTree.jpg"
            Width="50"
            />            
    </div>
    </form>
</body>
</html>
Related asp.net ajax examples