NumericUpDown:用上下箭头调整TextBox中的值

NumericUpDown扩展器控件可以将某个TextBox模拟成NumericUpDown控件，即在该TextBox的右边添加一对上下箭头按钮，点击其中的某个按钮可以相应地增加或减少TextBox中的值。
示例运行效果：

图(1)

图(2)

图(3)

NumericUpDown.asmx代码示例：

using  System;
using  System.Web;
using  System.Collections;
using  System.Web.Services;
using  System.Web.Services.Protocols;


/**/ /// <summary>
/// NumericUpDown 的摘要说明
/// </summary>
[WebService(Namespace  =   " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public   class  NumericUpDown : System.Web.Services.WebService  ... {

    [WebMethod]
    public int NextValue(int current, string tag) ...{
        return new Random().Next(Math.Min(1000, Math.Max(0, current)), 1001);
    }

    [WebMethod]
    public int PrevValue(int current, string tag) ...{
        return new Random().Next(0, Math.Min(1000, Math.Max(0, current)));
    }
    
}

NumericUpDownDemo.aspx代码示例：

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

<! 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 > NumericUpDown Demo </ title >
     < link  href ="stylesheet.css"  rel ="stylesheet"  type ="text/css"   />
</ head >
< body >
     < form  id ="NumericUpDownForm"  runat ="server" >
         < asp:ScriptManager  ID ="sm"  runat ="server"   />
         < div  class ="demoheading" > 用上下箭头调整TextBox中的值 </ div >
         < asp:UpdatePanel  ID ="up"  runat ="server" >
             < ContentTemplate >
                 < table >
                     < tr >
                         < td > Enter a numeric value and use the up and down
                            buttons to increment/decrement </ td >
                         < td >< asp:TextBox  ID ="tbNumber"  runat ="server"  Text ="3"  Width ="120"  style ="text-align:center;"   /></ td >
                     </ tr >
                     < tr >
                         < td > Choose your favorite month </ td >
                         < td >< asp:TextBox  ID ="tbMonth"  runat ="server"  Text ="June"  Width ="120"  style ="text-align:center;"   /></ td >
                     </ tr >
                     < tr >
                         < td > Let the web service pick a random number between 0 and 1000
                            that is higher/lower than the displayed value </ td >
                         < td >< asp:TextBox  ID ="tbRandomNumber"  runat ="server"  Text ="500"  Width ="120"  style ="text-align:center;"   /></ td >
                     </ tr >
                     < tr >
                         < td > Use the arrow images to increment/decrement the value </ td >
                         < td >
                             < asp:TextBox  ID ="tbImage"  runat ="server"  Text ="0"  Width ="60"  style ="text-align:center;"   />
                             < asp:ImageButton  ID ="ibDown"  runat ="server"  
                                ImageUrl ="images/down.gif"  AlternateText ="Down"  Width ="15"  Height ="15"   />
                             < asp:ImageButton  ID ="ibUp"  runat ="server"  
                                ImageUrl ="images/Up.gif"  AlternateText ="Up"  Width ="15"  Height ="15"   />
                         </ td >
                     </ tr >
                 </ table >
                 < br  />
                 < asp:Button  ID ="btnSubmit"  runat ="server"  Text ="Submit"  OnClick ="btnSubmit_Click"   />
                 < br  />< br  />
                 < asp:Label  ID ="lblResult"  runat ="server"  Text ="[No response provided yet]"   />
                
                 < ajaxToolkit:NumericUpDownExtender  ID ="nue1"  runat ="server"  
                    TargetControlID ="tbNumber"
                    Width ="120"  
                    RefValues =""
                    ServiceDownMethod =""
                    ServiceUpMethod =""
                    TargetButtonDownID =""
                    TargetButtonUpID =""   />
                
                 < ajaxToolkit:NumericUpDownExtender  ID ="nue2"  runat ="server"  
                    TargetControlID ="tbMonth"
                    Width ="120"
                    RefValues ="January;February;March;April;May;Jue;July;August;September;October;November;December"  
                    ServiceDownMethod =""
                    ServiceUpMethod =""
                    TargetButtonDownID =""
                    TargetButtonUpID =""   />
                
                 < ajaxToolkit:NumericUpDownExtender  ID ="nue3"  runat ="server"  
                    TargetControlID ="tbRandomNumber"
                    Tag =""
                    Width ="120"
                    ServiceUpPath ="numericupdown.asmx"
                    ServiceDownPath ="numericupdown.asmx"
                    ServiceUpMethod ="NextValue"
                    ServiceDownMethod ="PrevValue"
                    RefValues =""
                    TargetButtonDownID =""
                    TargetButtonUpID =""   />
                
                 < ajaxToolkit:NumericUpDownExtender  ID ="nue4"  runat ="server"  
                    TargetControlID ="tbImage"
                    Width ="80"
                    TargetButtonDownID ="ibDown"
                    TargetButtonUpID ="ibUp"
                    RefValues =""
                    ServiceDownMethod =""
                    ServiceUpMethod =""   />
                 <!--
                    TargetControlID：该扩展器目标TextBox控件的ID，即将要被“升级”模拟为NumericUpDown的TextBox的ID
                    Width：扩展后的目标TextBox控件加上默认的上下箭头的总宽度。即模拟出的NumericUpDown控件的宽度，单位为像素(px)
                    RefValues：由分号(;)作为分隔符的一个列表，将被NumericUpDown控件枚举并依次显示到其中
                    TargetButtonDownID：自定义的向上(即增加)按钮的ID
                    TargetButtonUpID：自定义的向下(即减少)按钮的ID
                    ServiceDownPath：用来取得该NumericUpDown的下一个值的Web Service的URL
                    ServiceDownMethod：ServiceDownPath所指定的Web Service中某个Web Method名称，或页面中某个Page Method的名称，
                                       用来取得NumericUpDown的下一个值
                    ServiceUpPath：用来取得该NumericUpDown的上一个值的Web Service的URL
                    ServiceUpMethod：ServiceUpPath所指定的Web Service中某个Web Method名称，或页面中某个Page Method的名称，
                                     用来取得NumericUpDown的上一个值
                    Tag：传递给ServiceDownMethod或ServiceUpMethod所指定的Web Method的参数，可用于传递给服务器当前的上下文信息
                 -->
                
             </ ContentTemplate >
         </ asp:UpdatePanel >
     </ form >
</ body >
</ html >

NumericUpDownDemo.aspx.cs代码示例：

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public   partial   class  Chapter09_NumericUpDownDemo : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{

    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    ...{
        lblResult.Text = string.Format("Value: <b>{0}</b><br />Month: <b>{1}</b><br />Random Value: <b>{2}</b><br />Value: <b>{3}</b>",
            tbNumber.Text, tbMonth.Text, tbRandomNumber.Text, tbImage.Text);
    }
}