Condividi tramite

Creazione di un controllo numerico su/giù con un back-end del servizio Web (C#)

di Christian Wenz

Scaricare il PDF

Invece di consentire a un utente di digitare un valore in una casella di controllo, un controllo di aumento/riduzione numerico (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 maggiore flessibilità.

Informazioni generali

Invece di consentire a un utente di digitare un valore in una casella di controllo, un controllo di aumento/riduzione numerico (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 maggiore flessibilità.

Gradi

Il ASP.NET AJAX Control Toolkit contiene l'extender NumericUpDown che aggiunge automaticamente due pulsanti a una casella di testo: uno per aumentarne il valore, uno per ridurlo. Tuttavia, il controllo supporta anche una chiamata al servizio Web (o una 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 current è il valore corrente nella casella di testo; l'attributo tag è un dato di contesto aggiuntivo che può essere impostato come proprietà dell'estensore NumericUpDown (ma non è obbligatorio).

Per questo esempio, il controllo numerico verso l'alto/giù consentirà solo valori di due potenze: 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. Ecco quindi 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 di ASP.NET. Come di consueto, è necessario un ScriptManager controllo, un TextBox controllo e un NumericUpDownExtender controllo . Per quest'ultimo, è necessario fornire le informazioni sul servizio Web:

  • ServiceDownMethod nome del metodo o della pagina Web inattivo
  • ServiceDownPath percorso del servizio Web con il metodo per disattivare il servizio; omettere se si usa un metodo di pagina
  • ServiceUpMethod nome del metodo o della pagina Web up
  • ServiceUpPath percorso 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 raddoppia sempre quando si fa clic sul pulsante superiore e viene dimezzato quando si fa clic sul pulsante inferiore.

Vengono visualizzati solo i numeri che sono una potenza di 2

Vengono visualizzati solo i numeri con potenza 2 (fare clic per visualizzare l'immagine a dimensione intera)

Avanti

  • Last updated on