Welcome to another AJAX tutorial, today we will be demonstrating how to use the NumericUpDown extender.

We will demonstrate the Control using Visual Studio 2010 and referencing it in C# language.

The NumericUpDown Extender is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to add “up” and “down” buttons that increment and decrement the value in the TextBox. The increment and decrement can be simple +1/-1 arithmetic; they can cycle through a provided list of values.

It is extremely easy to use Visual Studio to build a new page.

Let’s start by adding a New WebForm to this project and name it NumericUpDown.aspx.

First we will add a ScriptManager to the webform.

To build our Webform we are going to need some Textboxes, 3 of them to be exact.

Go ahead and add 3 of them to Webform, you can leave the default name if you wish.

Next we will add the NumericUpDown extender to each of our textboxes.

Our first TextBox will show a numeric value you can change, lets set a minimum of 1 and a maximum of 7 for this example. You can set these properties in the source code or in the solution explorer.

Our second Textbox will display the months of the year, you will want to set this under the RefValues and add the months manually for example “January,”February” etc etc.

Our third Textbox will show a vote of sorts and 2 images for thumbs up or down, but you may use your own set of images. Set the properties under the TargetButtonDownID=”image1″ or whatever the name of your image is.

Don’t forget to set target controls. If you need to reference the Target control, then look below at the markup, for example TargetControlID=”TextBox4″

The markup of the page will look like:

Here is a Screen Shot of what the program should look like if you followed our AJAX Tutorial

Download Source Files