使用 Web 服務後端建立數值向上/向下控制項 (VB)

作者 :一個是一個

下載 PDF

除了讓使用者在核取方塊中輸入值,Windows 和其他作業系統上存在的數值向上/向下控制項 (可能更熟悉) 。 根據預設,NumericUpDown 控制項一律會增加或減少值 1,但 Web 服務證明更具彈性。

概觀

除了讓使用者在核取方塊中輸入值,Windows 和其他作業系統上存在的數值向上/向下控制項 (可能更熟悉) 。 根據預設, NumericUpDown 控制項一律會增加或減少值 1,但 Web 服務會證明更具彈性。

步驟

ASP.NET AJAX 控制項工具組包含 NumericUpDown 擴充項,會自動將兩個按鈕新增至文字方塊:一個用於增加其值,一個用於減少它。 不過,控制項也支援 web 服務呼叫 (或頁面方法呼叫) 。 只要按一下向上或向下按鈕,JavaScript 程式碼就會連線到網頁伺服器,並在該處執行方法。 方法簽章如下:

Function MethodName(ByVal current As Integer, ByVal tag As String) As Integer

current 變數是文字方塊中目前的值; tag 屬性是可設定為 NumericUpDown 擴充項屬性的其他內容資料 (,但不需要) 。

在此範例中,數值向上/向下控制項只能允許兩個乘冪的值: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 網頁。 一如往常,您需要控制項 ScriptManagerTextBox 控制項和 NumericUpDownExtender 控制項。 針對後者,您必須提供 Web 服務資訊:

  • ServiceDownMethod 向下網頁方法或頁面方法的名稱
  • ServiceDownPath 使用向下服務方法的 Web 服務路徑;如果您使用 page 方法,請省略
  • ServiceUpMethod up Web 方法或頁面方法的名稱
  • ServiceUpPath 使用 up 服務方法的 Web 服務路徑;如果您使用 page 方法,請省略

以下是頁面的完整標記:

<%@ 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 的數位才會出現

只有值為 2 的數位會出現 (按一下即可檢視完整大小的影像)