How to use NumericUpDownExtender in asp.net ajax

NumericUpDownExtender in asp.net ajax

The NumericUpDownExtender control allows you to put some up/down indicators next to a TextBox control that enable the end-user to control a selection more easily.

A simple example of this is illustrated:

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

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>NumericUpDownExtender Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server"
         TargetControlID="TextBox1" Width="150" Maximum="10" Minimum="1">
        </cc1:NumericUpDownExtender>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

The NumericUpDownExtender control here extends the TextBox control on the page. When using the NumericUpDownExtender control, you have to specify the width of the control with the Width property. Otherwise, you see only the up and down arrow keys and not the textbox area. In this case, the Width property is set to 150 (pixels). The Maximum and Minimum properties are used to provide the range that is used by the up and down indicators.

With a Maximum value setting of 10 and a Minimum value of 1, the only range in the control will be 1 through 10. Running this page provides the results shown below:

NumericUpDownExtender example

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

TargetControlID

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

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

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

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

ServiceUpPath, ServiceUpMethod, ServiceDownPath, ServiceDownMethod and Tag

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

NumericUpDownExtender control’s have the following methods: 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.

Using NumericUpDownExtender.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>

NumericUpDownExtender

NumericUpDownExtender2