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

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

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

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="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;
 };
 }
}

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="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>

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)

Dalej