NumericUpDown 示例

请尝试在右侧的输入框中输入一个整数值,并用其旁边的向上或者向下按钮改变其中的值。 它可以通过按钮在 1 和 7 之间变化:

请选择你最喜欢的月份:

当你点击向上或者向下的按钮,输入框中将产生一个高于或者低于其中值的,0 到 1000 的随机数。 其随机数的产生来自 Web Service,在这里利用了 NumericUpDown 进行了 Web Service 交换:

请用右侧的图标按钮增加或减少输入框中的数字:




[尚未提交]

 NumericUpDown 概述

NumericUpDown 是一个可以使得 ASP.Net TextBox 控件具有可控制其中值的“向上”和“向下”按钮的 ASP.Net AJAX 控件。

以最简单的方式,“向上”按钮将使得 TextBox 中的值加一,“向下”按钮将使得 TextBox 中的值减一。 而 NumericUpDown 同样具有可以指定其“增长”和“减少”动作的方式,包括:

  • 提供一系列的数值,例如上面的月份,使得其在这些数值中进行变化
  • 从 Web Service 中获得“向上”或者“向下”的值
除此之外,开发人员还可以指定两个个性化的图片表示其“向上”和“向下”按钮


 NumericUpDown 属性

NumericUpDown 控件属性将被初始化如下面的示例代码所示,斜体属性为可选属性

<ajaxToolkit:NumericUpDownExtender ID="NUD1" runat="server"
    TargetControlID="TextBox1" 
    Width="100"
    RefValues="January;February;March;April"
    TargetButtonDownID="Button1"
    TargetButtonUpID="Button2"
    ServiceDownPath="WebService1.asmx"
    ServiceDownMethod="PrevValue"
    ServiceUpPath="WebService1.asmx"
    ServiceUpMethod="NextValue"
    Tag="1" />
  • TargetControlID - 需要被扩展的 TextBox 控件 ID
  • Width - 出现的“向上”和“向下”按钮的值,最小值是 25,当采用自定义按钮方式的时候,该属性无效
  • RefValues - 一系列可提供给“增长”和“减少”动作的数值,以分号 (;) 对每一个数值进行分割
  • Step - 当采用于简单的数字方式时,每一次点击“向上”或“向下”按钮时,增加或者减少的值,默认值是 1
  • TargetButtonDownID/TargetButtonUpID - 自定义的“向上”或“向下”按钮的控件 ID
  • ServiceDownPath/ServiceUpPath - “增长”或者“减少”的 Web Service 路径, 当调用的 Web Service 方法为页面方法时,可以将这个属性设为空,另外 Web Service 类定义的时候,必须增加一个 System.Web.Script.Services.ScriptService 属性修饰。
  • ServiceDownMethod/ServiceUpMethod - “增长”或者“减少”的 Web Service 方法名, 如果是本页面上的 Web Service 方法,必须增加一个 WebMethodAttribute 属性修饰。同时需要按照下面的格式定义方法签名:
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public int NextValue(int current, string tag) { ... }
    注意
    你可以替换方法名称为任意你所需要的方法名,但是该方法的签名,包括返回值和参数必须完全保持一致。
  • Tag - 一个可以自定义的传递给 Web Service 的参数
  • Minimum - 允许的最小值,这里有一个目前版本尚未实现的问题,就是如果页面用户在其中输入了一个规定范围内的值的时候, 该输入将被允许,但是当用户点击“向上”或者“向下”按钮的时候,其值将会重新被规划于需要的范围。
  • Maximum - 允许的最大值

 NumericUpDown 存在的问题

在 Safari 浏览器中,“向上”和“向下”按钮产生的视觉效果不是太好,不过我们可以采用自定义的按钮来代替这个问题。


 相关问题

尚未纪录和本示例相关的问题,你可以直接在这里添加本示例的相关问题


登录本站,提出问题。一分钟注册

 Internet 相关资源

登录本站,添加新的资源。一分钟注册


Copyright © 2007 AJAXASP.NET.CN 保留所有权利. 赞助本站