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,在浏览器里浏览效果。

效果图如下：