Share via

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

  • 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:

public int MethodName(int current, string tag) {}

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 aber nicht erforderlich).

Für dieses Beispiel darf die numerische Auf-/Ab-Steuerung nur Werte zulassen, die zwei Kräfte 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 teilen. Hier ist also der vollständige Webdienst:

<%@ WebService Language="C#" Class="NumericUpDown1" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[System.Web.Script.Services.ScriptService]
public class NumericUpDown1 : System.Web.Services.WebService
{
 [WebMethod]
 public int Up(int current, string tag)
 {
 if (current <= 536870912)
 {
 return current * 2;
 }
 else
 {
 return current;
 }
 }
 [WebMethod]
 public int Down(int current, string tag)
 {
 if (current >= 2)
 {
 return (int)(current / 2);
 }
 else
 {
 return current;
 };
 }
}

Erstellen Sie abschließend eine neue ASP.NET Seite. 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-Web- oder Seitenmethode
  • ServiceDownPath Pfad zum Webdienst mit der Down-Dienstmethode; Weglassen, wenn Sie eine Seitenmethode verwenden
  • ServiceUpMethod Name der Up-Web- oder Seitenmethode
  • 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="C#" %>
<!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.cs.asmx" 
 ServiceDownPath="NumericUpDown1.cs.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.

Es werden nur Zahlen angezeigt, die eine Leistung von 2 aufweisen.

Es werden nur Zahlen angezeigt, die eine Leistung von 2 aufweisen (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nächste