Creazione di un controllo su/giù numerico con un back-end del servizio Web (C#)
Invece di consentire a un utente di digitare un valore in una casella di controllo, un controllo numerico su/giù (esistente in Windows e altri sistemi operativi) potrebbe risultare più comodo. Per impostazione predefinita, il controllo NumericUpDown aumenta o diminuisce sempre un valore di 1, ma un servizio Web dimostra una maggiore flessibilità.
Panoramica
Invece di consentire a un utente di digitare un valore in una casella di controllo, un controllo numerico su/giù (esistente in Windows e altri sistemi operativi) potrebbe risultare più comodo. Per impostazione predefinita, il NumericUpDown controllo aumenta o diminuisce sempre un valore di 1, ma un servizio Web dimostra una maggiore flessibilità.
Passaggi
Il ASP.NET AJAX Control Toolkit contiene l'extender NumericUpDown che aggiunge automaticamente due pulsanti a una casella di testo: uno per aumentare il valore, uno per ridurlo. Tuttavia, il controllo supporta anche una chiamata al servizio Web (o chiamata al metodo di pagina). Ogni volta che si fa clic sul pulsante su o giù, il codice JavaScript si connette al server Web ed esegue un metodo in questa posizione. La firma del metodo è la seguente:
public int MethodName(int current, string tag) {}
L'argomento è il valore corrente nella casella di testo. L'attributo currenttag è dati di contesto aggiuntivi che possono essere impostati come proprietà dell'extender NumericUpDown (ma non è obbligatorio).
Per questo esempio, il controllo numerico verso l'alto/verso il basso consentirà solo valori che sono poteri di due: 1, 2, 4, 8, 16, 32, 64 e così via. Pertanto, il metodo eseguito quando l'utente vuole aumentare il valore deve raddoppiare il valore precedente; l'altro metodo deve dividere il valore per due. Di seguito è riportato il servizio Web completo:
<%@ 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;
};
}
}
Creare infine una nuova pagina ASP.NET. Come al solito, è necessario un ScriptManager controllo, un TextBox controllo e un NumericUpDownExtender controllo . Per quest'ultimo, è necessario fornire le informazioni sul servizio Web:
ServiceDownMethodnome del metodo o della pagina Web inattivoServiceDownPathpercorso del servizio Web con il metodo di servizio inattivo; omettere se si usa un metodo di paginaServiceUpMethodnome del metodo o della pagina Web upServiceUpPathpercorso del servizio Web con il metodo up service; omettere se si usa un metodo di pagina
Ecco il markup completo per la pagina:
<%@ 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>
Se si esegue la pagina, si noti che il valore nella casella di testo viene sempre raddoppiato quando si fa clic sul pulsante superiore e viene dimezzato quando si fa clic sul pulsante inferiore.
Vengono visualizzati solo i numeri con potenza 2 (fare clic per visualizzare l'immagine a dimensione intera)
