AJAX ControlToolkit学习日志-NumericUpDownExtender(18)

         NumericUpDownExtender控件与TextBox控件联合用于增加或减少TextBox中的Value值。

下面看一个示例：

1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程，命名为NumericUpDownExtender1。

2)在页面上拖放4个TextBox控件和4个NumericUpDownExtender控件，并进行一些设置。

代码如下：

 1             Enter a numeric value and use 
 2              < br  />
 3             the up and down buttons to increment/decrement  &nbsp;   &nbsp;   &nbsp; < asp:TextBox  ID ="TextBox1"
 4                 runat ="server" ></ asp:TextBox >
 5              < br  />
 6              < br  />
 7             Choose your favorite month  &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
 8              &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
 9              < asp:TextBox  ID ="TextBox2"  runat ="server" ></ asp:TextBox >< br  />
10              < br  />
11             Let the web service pick a random number
12              < br  />
13             between 0 and 1000 that is higher/lower
14              < br  />
15             than the displayed value  &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
16              &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
17              &nbsp;
18              < asp:TextBox  ID ="TextBox3"  runat ="server" ></ asp:TextBox >< br  />
19              < br  />
20             Use the arrow images to increment/decrement  &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
21              &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
22              &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;&nbsp;
23              < br  />
24             the value  &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
25              &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
26              &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
27              < asp:TextBox  ID ="TextBox4"  runat ="server"  Height ="1px" ></ asp:TextBox >
28              < asp:ImageButton  ID ="ImageButton2"  runat ="server"  Width ="15px"  Height ="15px"  ImageUrl ="~/up.gif"   />
29              &nbsp;
30              < br  />
31              &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
32              &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
33              &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
34              &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
35              &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;   &nbsp;
36              < asp:ImageButton  ID ="ImageButton1"  runat ="server"  Width ="15px"  Height ="15px"  ImageUrl ="~/down.gif"   />< br  />
37              < cc1:NumericUpDownExtender  ID ="NumericUpDownExtender1"  TargetControlID ="TextBox1"  Width ="150"    runat ="server" >
38              </ cc1:NumericUpDownExtender >
39              < cc1:NumericUpDownExtender  ID ="NumericUpDownExtender2"  TargetControlID ="TextBox2"  Width ="150"  RefValues ="January;February;March;April;May;June;July;August;September;October;November;December"  runat ="server" >
40              </ cc1:NumericUpDownExtender >
41              < cc1:NumericUpDownExtender  ID ="NumericUpDownExtender3"  TargetControlID ="TextBox3"  Width ="150"  ServiceUpPath ="WebService1.asmx"  ServiceUpMethod ="NextNumber"  ServiceDownPath ="WebService1.asmx"  ServiceDownMethod ="PreNumber"  runat ="server" >
42              </ cc1:NumericUpDownExtender >
43              < cc1:NumericUpDownExtender  ID ="NumericUpDownExtender4"  TargetControlID ="TextBox4"  Width ="150"  TargetButtonUpID ="ImageButton2"  TargetButtonDownID ="ImageButton1"  runat ="server" >
44              </ cc1:NumericUpDownExtender >

属性说明：

      TargetControlID：该控件的目标作用控件。
      Width：该控件加上目标TextBox控件的宽度，要是不设定将看不到TextBox控件。
      RefValues：该控件中使用的一个字符串列，用于在TextBox中递增递减。
      ServiceUpPath：调用增加值的web方法时的路径。
      ServiceDownPath：调用减少值的web方法时的路径。
      ServiceUpMethod：调用增加值的web方法。
      ServiceDownMethod：调用减少值的web方法。
      TargetButtonUpID：自定义的增加值的控件按钮。
      TargetButtonDownID：自定义的减少值的控件按钮。

3)在工程中添加一个web服务，在类名前加上

[System.Web.Script.Services.ScriptService()]

方法代码如下：

 1         [WebMethod]
 2          public   int  NextNumber( int  current,  string  tag)
 3          {
 4            Random r1 = new Random();
 5            return r1.Next(Math.Min(Math.Max(0,current), 1000), 1001);
 6        }
 7
 8         [WebMethod]
 9          public   int  PreNumber( int  current,  string  tag)
10          {
11            Random r2 = new Random();
12            return r2.Next(0, Math.Min(Math.Max(0,current), 1000));
13        }

4)按下CTRL+F5,在浏览器里浏览效果。

效果图如下：