创建使用Web服务后端的数值增大 /减小控件

Christian Wenz

本文档是Visual Basic 教程(转至 Visual C# 教程

相比在文本框中键入数值 ,用户会更倾向于使用数值增大/减小控件 (位于Windows 和其它操作系统中 )。默认情况下, NumericUpDown 控件每次使数值加 /减1 ,而使用 web服务会获得更大的灵活性。

« 前一篇教程 |  下一篇教程 »

概述

相比在文本框中键入数值 ,用户会更倾向于使用数值增大/减小控件 (位于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 的幂数

 

 

下一篇教程