Freigeben über

Erstellen eines numerischen Up/Down-Steuerelements mit einem Webdienst-Back-End (VB)

von Christian Wenz

PDF herunterladen

Anstatt es einem Benutzer zu erlauben, einen Wert in ein Kontrollkästchen einzugeben, könnte sich ein numerisches Steuerelement nach oben/unten (das unter Windows und anderen Betriebssystemen vorhanden ist) als komfortabler erweisen. Standardmäßig erhöht oder verringert das NumericUpDown-Steuerelement immer einen Wert um 1, aber ein Webdienst beweist mehr Flexibilität.

Übersicht

Anstatt es einem Benutzer zu erlauben, einen Wert in ein Kontrollkästchen einzugeben, könnte sich ein numerisches Steuerelement nach oben/unten (das unter Windows und anderen Betriebssystemen vorhanden ist) als komfortabler erweisen. Standardmäßig erhöht oder verringert das NumericUpDown Steuerelement immer einen Wert um 1, aber ein Webdienst beweist mehr Flexibilität.

Schritte

Das ASP.NET AJAX Control Toolkit enthält den NumericUpDown Extender, der automatisch zwei Schaltflächen zu einem Textfeld hinzufügt: eine zum Erhöhen des Werts, eine zum Verringern. Das Steuerelement unterstützt jedoch auch einen Webdienstaufruf (oder Seitenmethodenaufruf). Wenn auf die Schaltfläche nach oben oder unten geklickt wird, stellt der JavaScript-Code eine Verbindung mit dem Webserver und führt dort eine Methode aus. Die Methodensignatur ist die folgende:

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

Das current Argument ist der aktuelle Wert im Textfeld. Das tag Attribut ist zusätzliche Kontextdaten, die als Eigenschaft des NumericUpDown Extenders festgelegt werden können (aber nicht erforderlich).

Für diese Stichprobe darf die numerische Aufwärts-/Abwärtssteuerung nur Werte zulassen, die Mächte von zwei sind: 1, 2, 4, 8, 16, 32, 64 usw. Daher muss die Methode, die ausgeführt wird, wenn der Benutzer den Wert erhöhen möchte, den alten Wert verdoppeln; Die andere Methode muss den Wert durch zwei dividieren. Hier ist also der vollständige Webdienst:

<%@ 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

Erstellen Sie schließlich eine neue ASP.NET Seite. Wie üblich benötigen Sie ein ScriptManager Steuerelement, ein TextBox Steuerelement und ein NumericUpDownExtender Steuerelement. Für letztere müssen Sie die Webdienstinformationen angeben:

  • ServiceDownMethod Name der Down-Webmethode oder Pagemethode
  • ServiceDownPath Pfad zum Webdienst mit der Down-Service-Methode; Weglassen, wenn Sie eine Seitenmethode verwenden
  • ServiceUpMethod Name der up-Webmethode oder Seitenmethode
  • ServiceUpPath Pfad zum Webdienst mit der Up-Service-Methode; Weglassen, wenn Sie eine Seitenmethode verwenden

Hier sehen Sie das vollständige Markup für die Seite:

<%@ 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>

Wenn Sie die Seite ausführen, beachten Sie, wie der Wert im Textfeld immer verdoppelt wird, wenn Sie auf die obere Schaltfläche klicken, und wird halbiert, wenn Sie auf die untere Schaltfläche klicken.

Nur Zahlen, die eine Potenz von 2 darstellen, werden angezeigt

Nur Zahlen, die eine Potenz von 2 aufweisen, werden angezeigt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Zurück

  • Last updated on