Tworzenie kontrolki Numeric Up/Down z zapleczem usługi internetowej (VB)

  • Artykuł

Autor: Christian Wenz

Pobierz plik PDF

Zamiast pozwolić użytkownikowi na wpisanie wartości w pole wyboru, kontrolka liczbowa w górę/w dół (która istnieje w systemie Windows i innych systemach operacyjnych) może okazać się bardziej wygodna. Domyślnie kontrolka NumericUpDown zawsze zwiększa lub zmniejsza wartość o 1, ale usługa internetowa okazuje się bardziej elastyczna.

Omówienie

Zamiast pozwolić użytkownikowi na wpisanie wartości w pole wyboru, kontrolka liczbowa w górę/w dół (która istnieje w systemie Windows i innych systemach operacyjnych) może okazać się bardziej wygodna. Domyślnie kontrolka NumericUpDown zawsze zwiększa lub zmniejsza wartość o 1, ale usługa internetowa okazuje się bardziej elastyczna.

Kroki

Zestaw ASP.NET AJAX Control Toolkit zawiera NumericUpDown rozszerzenie, które automatycznie dodaje dwa przyciski do pola tekstowego: jeden do zwiększenia jego wartości, jeden do zmniejszenia. Jednak kontrolka obsługuje również wywołanie usługi internetowej (lub wywołanie metody strony). Za każdym razem, gdy przycisk w górę lub w dół jest klikany, kod JavaScript łączy się z serwerem internetowym i wykonuje tam metodę. Sygnatura metody jest następująca:

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

Argument current jest bieżącą wartością w polu tekstowym; tag atrybut jest dodatkowymi danymi kontekstowym, które można ustawić jako właściwość NumericUpDown rozszerzenia (ale nie jest to wymagane).

W przypadku tej próbki kontrola liczbowa w górę/w dół zezwala tylko na wartości, które są uprawnieniami dwóch: 1, 2, 4, 8, 16, 32, 64 itd. W związku z tym metoda wykonywana, gdy użytkownik chce zwiększyć wartość, musi podwoić starą wartość; druga metoda musi podzielić wartość na dwie. Oto kompletna usługa internetowa:

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

Na koniec utwórz nową stronę ASP.NET. Jak zwykle potrzebujesz kontrolki ScriptManager , kontrolki TextBox i kontrolki NumericUpDownExtender . W przypadku tych ostatnich należy podać informacje o usłudze internetowej:

  • ServiceDownMethod nazwa metody lub metody strony w dół
  • ServiceDownPath ścieżka do usługi internetowej z metodą down service; pomijanie, jeśli używasz metody strony
  • ServiceUpMethod nazwa metody internetowej lub metody strony
  • ServiceUpPath ścieżka do usługi internetowej z metodą up service; pomijanie, jeśli używasz metody strony

Oto pełna adiustacja dla strony:

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

Jeśli uruchomisz stronę, zwróć uwagę, że wartość w polu tekstowym zawsze się podwaja po kliknięciu górnego przycisku i jest zmniejszana o połowę po kliknięciu dolnego przycisku.

Wyświetlane są tylko liczby, które mają moc 2

Wyświetlane są tylko liczby o mocy 2 (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Poprzednie