Tworzenie kontrolki Numeric Up/Down z zapleczem usługi internetowej (C#)
Autor: Christian Wenz
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 stronyServiceUpMethod
nazwa metody internetowej lub metody stronyServiceUpPath
ś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 o mocy 2 (kliknij, aby wyświetlić obraz w pełnym rozmiarze)