Controlli ASP.NET: verificaBox, Pulsante di opzione, ElencoBox

Aggiunta di controlli ASP.Net ai moduli Web

ASP.Net offre la possibilità di aggiungere controlli a un modulo, come caselle di testo ed etichette.

Esaminiamo gli altri controlli disponibili per i moduli Web e analizziamo alcune delle loro proprietà comuni.

Nel nostro esempio creeremo un modulo che avrà le seguenti funzionalità.

1. La possibilità per l'utente di inserire il proprio nome.
2. Un'opzione per scegliere la città in cui risiede l'utente.
3. La possibilità per l'utente di inserire un'opzione per il genere.
4. Un'opzione per scegliere un corso che l'utente desidera imparare. Ci saranno delle scelte per entrambi C# e ASP.Net.

Esaminiamo ciascun controllo in dettaglio. Aggiungiamoli per creare il modulo con la funzionalità sopra menzionata.

Passo 1) Il primo passo è aprire Forms Designer per il modulo web Demo. Una volta fatto questo, sarai in grado di trascinare i controlli dalla casella degli strumenti al Modulo Web.

Per aprire il modulo web del progettista:

• Fai clic con il pulsante destro del mouse sul file Demo.aspx in Esplora soluzioni e
• Scegli l'opzione di menu Visualizza Designer.

Una volta eseguito il passaggio precedente, sarai in grado di vedere il tuo Form Designer come mostrato di seguito.

Ora iniziamo ad aggiungere i controlli uno alla volta.

Controllo etichetta

Il controllo Label viene utilizzato per visualizzare un testo o un messaggio all'utente sul modulo. Il controllo Label viene normalmente utilizzato insieme ad altri controlli. Un esempio comune è l'aggiunta di un'etichetta insieme al controllo TextBox. L'etichetta fornisce all'utente un'indicazione su cosa deve inserire nella casella di testo. Vediamo come implementarlo con l'esempio mostrato di seguito. Useremo un'etichetta chiamata "nome". Questa verrà utilizzata insieme ai controlli TextBox, che verranno aggiunti nella sezione successiva.

Passo 1) Il primo passaggio consiste nel trascinare il controllo "etichetta" sul modulo Web dalla casella degli strumenti, come mostrato di seguito.

Passo 2) Dopo aver aggiunto l'etichetta, seguire i passaggi seguenti.

1. Accedete alla finestra delle proprietà facendo clic con il pulsante destro del mouse sul controllo dell'etichetta.
2. Seleziona l'opzione di menu Proprietà.

Passo 3) Dalla finestra delle proprietà, modifica il valore della proprietà Testo in Nome.

Allo stesso modo, modificare anche il valore della proprietà ID del controllo in lblName. Specificando un ID significativo ai controlli, diventa più semplice accedervi durante la fase di codifica. Questo è mostrato di seguito.

Una volta apportate le modifiche di cui sopra, visualizzerai il seguente output.

Produzione:-

Vedrai che l'etichetta Nome appare nel modulo Web.

Casella di testo

Una casella di testo è utilizzata per consentire a un utente di immettere del testo nell'applicazione del modulo Web. Vediamo come possiamo implementare questo con un esempio mostrato di seguito. Aggiungeremo una casella di testo al modulo in cui l'utente può immettere il suo nome.

Passo 1) Il primo passaggio consiste nel trascinare il controllo casella di testo sul modulo Web dalla casella degli strumenti, come mostrato di seguito.

Di seguito è riportato l'aspetto che avrebbe il controllo Textbox nella finestra di progettazione dei moduli.

Passo 2) Dopo aver aggiunto la casella di testo, è necessario modificare la proprietà ID.

• Vai alla finestra delle proprietà facendo clic con il pulsante destro del mouse sul controllo Casella di testo e
• Seleziona Proprietà, quindi
• Modifica la proprietà ID della casella di testo in txtName.

Dopo aver apportato le modifiche sopra indicate, verrà visualizzato il seguente output.

Produzione:-

Casella di riepilogo

Una Listbox viene utilizzata per mostrare un elenco di elementi sul modulo Web. Vediamo come possiamo implementarlo con un esempio mostrato di seguito. Aggiungeremo una list box al modulo per memorizzare alcune posizioni di città.

Passo 1) Il primo passaggio consiste nel trascinare il controllo casella di riepilogo sul modulo Web dalla casella degli strumenti, come mostrato di seguito.

Passo 2) Una volta trascinata la casella di riepilogo sul modulo, apparirà un menu laterale separato. In questo menu, seleziona la voce "Modifica elementi".

Passo 3) Verrà ora visualizzata una finestra di dialogo nella quale sarà possibile aggiungere gli elementi dell'elenco alla casella di riepilogo.

1. Fare clic sul pulsante Aggiungi per aggiungere un elemento all'elenco.
2. Assegna un nome al valore testuale dell'elemento dell'elenco – nel nostro caso, Mumbai. Ripeti i passaggi 1 e 2 per aggiungere gli elementi dell'elenco relativi a Mangalore e Hyderabad.
3. Clicca sul pulsante OK.

Passo 4) Accedere alla finestra delle proprietà e modificare il valore della proprietà ID del controllo in lstLocation.

Una volta apportate le modifiche di cui sopra, visualizzerai il seguente output.

Produzione:-

Dall'output si può chiaramente vedere che la Listbox è stata aggiunta al modulo.

RadioButton

Un pulsante di opzione viene utilizzato per mostrare un elenco di elementi da cui l'utente può sceglierne uno. Vediamo come possiamo implementarlo con un esempio mostrato di seguito. Aggiungeremo un pulsante di opzione per un'opzione maschio/femmina.

Passo 1) Il primo passo consiste nel trascinare il controllo "radiobutton" dal riquadro degli strumenti al modulo Web (vedi immagine sotto). Assicurati di aggiungere 2 pulsanti radio, uno per l'opzione "Maschio" e l'altro per "Femmina".

Passo 2) Una volta aggiunto il Radiobutton, modifica la proprietà 'text'.

• Vai alla finestra delle proprietà facendo clic sul "controllo pulsante di opzione".
• Cambia la proprietà del testo del pulsante di opzione in "Maschio".
• Ripeti lo stesso passaggio per cambiarlo in "Femmina".
• Inoltre, modifica le proprietà ID dei rispettivi controlli in rdMale e rdFemale.

Una volta apportate le modifiche di cui sopra, visualizzerai il seguente output.

Produzione:-

Dall'output si può chiaramente vedere che il pulsante radio è stato aggiunto al modulo.

casella di controllo

Una casella di controllo viene utilizzata per fornire un elenco di opzioni tra cui l'utente può scegliere più opzioni. Vediamo come implementarlo con un esempio mostrato di seguito. Aggiungeremo 2 caselle di controllo ai nostri moduli Web. Queste caselle di controllo forniranno all'utente un'opzione per decidere se vuole imparare C# o ASP.Net.

Passo 1) Il primo passaggio consiste nel trascinare il controllo casella di controllo sul modulo Web dalla casella degli strumenti, come mostrato di seguito.

Passo 2) Una volta aggiunte le caselle di controllo, modificare la proprietà ID della casella di controllo.

• Accedere alla finestra delle proprietà facendo clic sul controllo Casella di controllo.
• Modificare le proprietà ID dei rispettivi controlli in "chkC" e "chkASP".

Inoltre, cambia la proprietà text del controllo Checkbox in 'C#'. Fai lo stesso per l'altro controllo Checkbox e cambialo in 'ASP.Net'.

1. Modifica la proprietà ID della casella di controllo in 'chkASP'.

2. Modifica la proprietà ID della casella di controllo in chkC.

Una volta apportate le modifiche di cui sopra, visualizzerai il seguente output.

Produzione:-

Dall'output si può chiaramente vedere che le caselle di controllo sono state aggiunte al modulo.

Pulsante

Un pulsante viene utilizzato per consentire all'utente di fare clic su un pulsante che avvierà quindi l'elaborazione del modulo. Vediamo come possiamo implementarlo con il nostro esempio attuale, come mostrato di seguito. Aggiungeremo un semplice pulsante chiamato "Invia". Questo verrà utilizzato per inviare tutte le informazioni del modulo.

Passo 1) Il primo passaggio consiste nel trascinare il controllo pulsante sul modulo Web dalla casella degli strumenti, come mostrato di seguito.

Passo 2) Una volta aggiunto il pulsante, vai alla finestra delle proprietà facendo clic sul controllo del pulsante. Modificare la proprietà del testo del controllo pulsante su Invia. Inoltre, modifica la proprietà ID del pulsante in "btnSubmit".

Una volta apportate le modifiche di cui sopra, visualizzerai il seguente output.

Produzione:-

Dall'output puoi vedere chiaramente che il pulsante è stato aggiunto al modulo.

Gestore eventi in ASP.Net

Quando lavori con un modulo Web, puoi aggiungere eventi ai controlli. Un evento è qualcosa che accade quando viene eseguita un'azione. Probabilmente l'azione più comune è fare clic su un pulsante in un modulo.

Nei moduli Web è possibile aggiungere codice al file aspx.cs corrispondente. Questo codice può essere utilizzato per eseguire determinate azioni quando viene premuto un pulsante sul modulo. Questo è generalmente l'evento più comune nei Web Form. Vediamo come possiamo raggiungere questo obiettivo.

Lo renderemo semplice. Basta aggiungere un evento al controllo pulsante per visualizzare il nome immesso dall'utente. Seguiamo i passaggi seguenti per raggiungere questo obiettivo.

Passo 1) Per prima cosa devi fare doppio clic sul pulsante nel Web Form. Questo farà apparire il codice evento per il pulsante in Visual Studio.

L'evento btnSubmit_Click viene aggiunto automaticamente da Visual Studio quando si fa doppio clic sul pulsante nella finestra di progettazione dei moduli Web.

Passo 2) Aggiungiamo ora il codice all'evento submit per visualizzare il valore della casella di testo name e la posizione scelta dall'utente.

protected void btnSubmit_Click(object sender, EventArgs e)
{
	Response.Write(txtName.Text + "<br/>");

	Response.Write(lstLocation.SelectedItem.Text + "<br/>");

	lblName.Visible = false;
	txtName.Visible = false;
	lstLocation.Visible = false;
	chkC.Visible = false;
	chkASP.Visible = false;
	rdFemale.Visible = false;
	btnSubmit.Visible = false;
}

Code Spiegazione:-

1. La riga di codice sopra riportata fa la cosa più semplice. Prende il valore del controllo della casella di testo Nome e lo invia al client tramite l'oggetto Risposta. Quindi, se vuoi inserire la stringa "Guru99” nella casella di testo del nome, il valore di txtName.Text sarebbe 'Guru99 '.
2. La riga di codice successiva acquisisce il valore selezionato dalla listbox tramite la proprietà 'lstLocation.SelectedItem.Text'. Quindi, scrive questo valore al client tramite il metodo Response.Write.
3. Infine, rendiamo invisibili tutti i controlli del modulo. Se non lo facessimo, tutti i controlli e i valori di risposta verrebbero visualizzati insieme. Normalmente, quando un utente inserisce tutte le informazioni nel modulo, come nome, posizione, sesso, ecc., la pagina successiva dovrebbe mostrare solo le informazioni non inserite. L'utente non vuole visualizzare nuovamente i campi relativi a nome, sesso e posizione. Tuttavia, ASP.Net non lo sa e, di conseguenza, per impostazione predefinita, mostrerà nuovamente tutti i controlli quando l'utente fa clic sul pulsante Invia. Pertanto, dobbiamo scrivere del codice per garantire che tutti i controlli siano nascosti, in modo che l'utente visualizzi solo l'output desiderato.

Una volta apportate le modifiche di cui sopra, visualizzerai il seguente output.

Produzione:-

Nella schermata Output, eseguire i seguenti passaggi:

1. Dai il nome di Guru99 nella casella di testo del nome.
2. Seleziona una località dall'elenco a discesa di Bangalore.
3. Fai clic sul pulsante Invia.

Una volta fatto ciò, vedrai 'Guru99' e la località 'Bangalore' visualizzata sulla pagina.

DOMANDE FREQUENTI