Freigeben über

Erstellen einen numerischen UpAndDown-Steuerelements mit einem Webdienst-Back-End (VB)

  • Artikel

von Christian Wenz

PDF herunterladen

Anstatt einen Benutzer einen Wert in ein Kontrollkästchen eingeben zu lassen, könnte sich ein numerisches Auf-/Ab-Steuerelement (das unter Windows und anderen Betriebssystemen vorhanden ist) als komfortabler erweisen. Standardmäßig erhöht oder verringert das NumericUpDown-Steuerelement einen Wert immer um 1, aber ein Webdienst erweist sich als flexibler.

Überblick

Anstatt einen Benutzer einen Wert in ein Kontrollkästchen eingeben zu lassen, könnte sich ein numerisches Auf-/Ab-Steuerelement (das unter Windows und anderen Betriebssystemen vorhanden ist) als komfortabler erweisen. Standardmäßig erhöht oder verringert das NumericUpDown Steuerelement einen Wert immer um 1, aber ein Webdienst erweist sich als flexibler.

Schritte

Das ASP.NET AJAX Control Toolkit enthält den Extender, der NumericUpDown einem Textfeld automatisch zwei Schaltflächen hinzufügt: eine zum Erhöhen des Werts, eine zum Verringern des Werts. 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 her 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 sind zusätzliche Kontextdaten, die als Eigenschaft des NumericUpDown Extenders festgelegt werden können (ist jedoch nicht erforderlich).

Für dieses Beispiel darf das numerische Auf-/Ab-Steuerelement nur Werte zulassen, die zwei Potenzen aufweisen: 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 sehen Sie also den vollständigen 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 seite ASP.NET. Wie üblich benötigen Sie ein ScriptManager -Steuerelement, ein TextBox -Steuerelement und ein NumericUpDownExtender -Steuerelement. Für letzteres müssen Sie die Webdienstinformationen angeben:

  • ServiceDownMethod Name der down-Webmethode oder Seitenmethode
  • ServiceDownPath Pfad zum Webdienst mit der Down-Service-Methode; Weglassen, wenn Sie eine Seitenmethode verwenden
  • ServiceUpMethod Name der Up-Web-Methode oder Page-Methode
  • ServiceUpPath Pfad zum Webdienst mit der up-Dienstmethode; 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, dass der Wert im Textfeld immer verdoppelt wird, wenn Sie auf die obere Schaltfläche klicken, und beim Klicken auf die untere Schaltfläche halbiert wird.

Nur Zahlen mit einer Potenz von 2 werden angezeigt.

Nur Zahlen mit einer Potenz von 2 werden angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Zurück