概述
相比在文本框中键入数值 ,用户会更倾向于使用数值增大/减小控件 (位于Windows 和其它操作系统中 )。默认情况下,NumericUpDown 控件每次使数值加 /减1 ,而使用 web服务会获得更大的灵活性。
步骤
ASP.NET AJAX Control Toolkit 中包含一个 NumericUpDown 扩展器,该扩展器会自动向一个文本框添加两个按钮:一个用于增加数值,另一个用于减少数值。而该控件还支持web服务调用(或页面方法调用)。无论单击哪个按钮, JavaScript 代码都会连接到web服务器,并在web服务器上执行一个方法。方法签名如下所示:
Function MethodName(ByVal current As Integer, ByVal tag As String) As Integer
current 参数是在文本框中显示的当前值 ;tag属性是额外的上下文数据 ,可以设置为NumericUpDown 扩展器的属性
(但该属性不是必需的属性 )。
对于本示例,数值增大 /减小控件仅允许使用2的幂数值,如: 1、 2、 4、 8、 16、 32、 64 等。
因此,当用户希望增加数值时,执行的方法必须使原数值加倍;而减少数值时使用的方法必须使原数值减半。
以下是完整的web服务标记:
<%@ WebService Language="VB" Class="NumericUpDown1" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
<System.Web.Script.Services.ScriptService()> _
Public Class NumericUpDown1
Inherits System.Web.Services.WebService
<WebMethod()> _
Function Up(ByVal current As Integer, ByVal tag As String) As Integer
If current <= 536870912 Then
Return current * 2
Else
Return current
End If
End Function
<WebMethod()> _
Function Down(ByVal current As Integer, ByVal tag As String) As Integer
If current >= 2 Then
Return CInt(current / 2)
Else
Return current
End If
End Function
End Class
最后 ,创建一个新的ASP.NET 页面。同样 ,我们需要一个ScriptManager 控件、一个TextBox控件和一个NumericUpDownExtender 控件。
对于最后一种控件,我们必须提供以下web服务信息:
- ServiceDownMethod — 使数值减小的 web 方法或页面方法的名称。
- ServiceDownPath — 到 web 服务的路径 , 该 web 服务使用使数值减小的服务方法 ; 如果使用页面方法 , 则忽略此项。
- ServiceUpMethod — 使数值增大的 web 方法或页面方法的名称。
- ServiceUpPath — 到 web 服务的路径 , 该 web 服务使用使数值增大的服务方法 ; 如果使用页面方法 , 则忽略此项。
以下是该页面的完整的标记:
<%@ Page Language="VB" %>
<!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 id="Head1" runat="server">
<title>Control Toolkit</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="asm" runat="server" />
<div>
How many MB do you want? <asp:TextBox ID="TextBox1" Text="32"
runat="server" />
<ajaxToolkit:NumericUpDownExtender ID="nud" runat="server"
TargetControlID="TextBox1" Width="100"
ServiceUpPath="NumericUpDown1.vb.asmx"
ServiceDownPath="NumericUpDown1.vb.asmx"
ServiceUpMethod="Up" ServiceDownMethod="Down" />
</div>
</form>
</body>
</html>
如果运行该页 ,我们会注意到 :在单击上面的按钮时 ,文本框中的数值加倍 ;单击下面的按钮时 ,文本框中的数值减半。
只显示 2 的幂数
下一篇教程 |