How to use the NumericUpDownExtender Control in asp.net website

Hi Friend, Today,we learn"How to implement the NumericUpDownExtender control in asp.net website ". The NumericUpDownExtender control enables you to add an up and down button next to the Text Box control.
These buttons are used to increment or decrement through a set of numeric values or other items such as days of week, months of the year etc. You can also use custom images in place of the up and down buttons to navigate through the specified numeric values.Here the up and down buttons are added to increase and decrease the values of the text box. The default increment and decrement are +1 and -1 respectively. If you have not installed AjaxToolkit in your visual studio, first install it from here .
There are some properties of the NumericUpDownExtender control as given below:-

TargetControlId :-This is helpful to sets the ID for the Text Box control to which you want to attach the extender control.
Refvalues :- This is helpful to sets a list of strings separated by semicolon (;)when you want to display when the UP or Down button is clicked.
Step:- It sets the steps for numeric increment and decrement .The default value is 1.
TargetButtonDownID:-It sets the Id of the custom Down Button.
TargetButtonUpID:-It sets the ID of the Custom Up button.
Service Up Path :-It sets the path of the web service that you have created to return the data for the next values.This property is not used in case of page methods.
Service Down Path :- It sets the path of the web service that you have created to return the data for the previous values .This property is not used in case of page methods.
Service Down method:- It sets the service method name that you have created within the web service to return the previous values.
Service Down method:- It sets the service method name that you have created within web service to return the next values.
Width :- It sets the combined size of Text Box control and the up and down buttons.If you use custom buttons ,then you do not need to set the width.
Tag:- It sets a custom parameter that is passed to the web service to handle user's click.
Maximum :- It sets the maximum value allowed by the extender control to navigate.
Minimum :-It sets the minimum value allowed by the extender control to navigate.

There are some steps to use NumericUpDownExtender control on asp.net website as given below:-
Step 1:- First open your visual studio --> File --> New --> Website --> Select asp.net Empty website --> Open solution Explorer --> Add a New Web form (Default.aspx) --> First drag and drop ToolkitScriptmanager control on the page from toolbox--> after that drag and drop Text Boxes on the page as shown below:-

Step 2:- Now Open Source file --> Drag and drop three NumericUpDownExtender control from toolbox --> after that set its properties as given below:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <br />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <span class="style3"><strong>How to Implement NumericUpDownExtender Control on 
        Website</strong></span>:-<br />
        <br />
        &nbsp;<span class="style1">&nbsp; </span><span class="style2">&nbsp;Select Your&nbsp; 
        Number</span>
        <asp:TextBox ID="TextBox1" runat="server" Height="40px" Width="179px"></asp:TextBox>

        &nbsp;<span class="style1">&nbsp; </span><span class="style2">&nbsp;Select Your&nbsp; 
        Day</span>
        <asp:TextBox ID="TextBox2" runat="server" Height="40px" Width="179px"></asp:TextBox>

         &nbsp;<span class="style1">&nbsp; </span><span class="style2">&nbsp;Select Your&nbsp; 
        Month</span>
        <asp:TextBox ID="TextBox3" runat="server" Height="40px" Width="179px"></asp:TextBox>
      
        <asp:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" TargetControlID="TextBox1" Width="200" 
        Step="1" Minimum="1" Maximum ="50" >
        </asp:NumericUpDownExtender>

        <asp:NumericUpDownExtender ID="NumericUpDownExtender2" runat="server" TargetControlID="TextBox2" Width="200" 
        RefValues="Monday;Tuesday;Wednesday;Thursday;Friday;Saturday;Sunday">
        </asp:NumericUpDownExtender>

        <asp:NumericUpDownExtender ID="NumericUpDownExtender3" runat="server" TargetControlID="TextBox3" Width="200"
         RefValues="January;February;March;April;May;June;July;August;September;October;November;December" >
        </asp:NumericUpDownExtender>
    
    </div>
    </form>
</body>
</html>

Step 3:- Now Run the application (Press F5) -->You can easily select your Number, day,month etc by the Up and Down arrow as shown below:-

Note:- Many of you have seen this concepts on website. You can also put this features on your website.
For More...

Download Whole Attached file
Download

How to use the NumericUpDownExtender Control in asp.net website

Subscribe through email and get Free updates in inbox

Please like and share this post with your friends...

0 comments: