Controlli ASP.NET: verificaBox, Pulsante di opzione, ElencoBox, Casella di testo, Etichetta
Giacobbe Lee
Aggiunta di controlli ASP.Net ai moduli Web
ASP.Net ha la possibilità di aggiungere controlli a un modulo, come caselle di testo ed etichette.
Diamo un'occhiata agli altri controlli disponibili per i moduli Web e vediamo alcune delle loro proprietà comuni.
Nel nostro esempio creeremo un modulo che avrà le seguenti funzionalità.
- La possibilità per l'utente di inserire il proprio nome.
- Un'opzione per scegliere la città in cui risiede l'utente
- La possibilità per l'utente di inserire un'opzione per il genere.
- 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 di Designer,
- Fare 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 nostri controlli uno per uno
Controllo etichetta
Il controllo etichetta viene utilizzato per visualizzare un testo o un messaggio all'utente sul modulo. Il controllo etichetta viene normalmente utilizzato insieme ad altri controlli. Esempi comuni sono quelli in cui un'etichetta viene aggiunta insieme al controllo casella di testo. L'etichetta fornisce un'indicazione all'utente su cosa ci si aspetta che venga inserito nella casella di testo. Vediamo come possiamo implementarlo con un esempio mostrato di seguito. Utilizzeremo un'etichetta chiamata "nome". Questa verrà utilizzata insieme ai controlli casella di testo, che verranno aggiunti nella sezione successiva.
Passo 1) Il primo passo consiste nel trascinare il controllo "etichetta" dalla casella degli strumenti al Web Form, come mostrato di seguito.
Passo 2) Dopo aver aggiunto l'etichetta, seguire i passaggi seguenti.
- Vai alla finestra delle proprietà facendo clic con il pulsante destro del mouse sul controllo etichetta
- Scegli l'opzione del menu Proprietà
Passo 3) Dalla finestra delle proprietà, modificare il nome della proprietà Text 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, vedrai 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 della casella di testo sul Web Form dalla casella degli strumenti come mostrato di seguito
Di seguito è riportato l'aspetto che avrebbe nel progettista dei moduli una volta che il controllo Textbox è sul modulo
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 Textbox e
- Scegli quindi le proprietà
- Modificare 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 della casella di riepilogo sul Web Form dalla casella degli strumenti come mostrato di seguito
Passo 2) Una volta trascinata la casella di riepilogo nel modulo, apparirà un menu laterale separato. In questo menu, seleziona il menu 'Modifica elementi'.
Passo 3) Verrà ora visualizzata una finestra di dialogo nella quale sarà possibile aggiungere gli elementi dell'elenco alla casella di riepilogo.
- Fare clic sul pulsante Aggiungi per aggiungere un elemento all'elenco.
- Assegna un nome al valore del testo dell'elemento dell'elenco: nel nostro caso Mumbai. Ripeti i passaggi 1 e 2 per aggiungere voci all'elenco per Mangalore e Hyderabad.
- Fai clic sul pulsante OK
Passo 4) Vai alla finestra delle proprietà e modifica il valore della proprietà ID del controllo in lstLocation.
Una volta apportate le modifiche di cui sopra, vedrai il seguente output
Produzione:-
Dall'output si può vedere chiaramente che le Listbox sono state aggiunte 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 è trascinare il controllo 'radiobutton' sul Web Form dalla casella degli strumenti. (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, vedrai il seguente output
Produzione:-
Dall'output, puoi vedere chiaramente che il pulsante di opzione è stato aggiunto al modulo
casella di controllo
Una casella di controllo viene utilizzata per fornire un elenco di opzioni in cui l'utente può scegliere più scelte. Vediamo come possiamo implementarlo con un esempio mostrato di seguito. Aggiungeremo 2 caselle di controllo ai nostri moduli Web. Queste caselle di controllo forniranno un'opzione all'utente se desidera imparare C# o ASP.Net.
Passo 1) Il primo passaggio consiste nel trascinare il controllo della casella di controllo sul Web Form dalla casella degli strumenti come mostrato di seguito
Passo 2) Dopo aver aggiunto le caselle di controllo, modificare la proprietà id della casella di controllo in 'chkASP'.
- 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'.
- Cambia la proprietà ID della casella di controllo in 'chkASP'
- Cambia la proprietà ID della casella di controllo in chkC
Una volta apportate le modifiche di cui sopra, vedrai il seguente output
Produzione:-
Dall'output si può vedere chiaramente 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 pulsante "Invia". Questo verrà utilizzato per inviare tutte le informazioni sul modulo.
Passo 1) Il primo passaggio consiste nel trascinare il controllo del pulsante sul Web Form 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, vedrai 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:-
- La riga di codice soprastante fa la cosa più semplice. Prende il valore del controllo della casella di testo Name e lo invia al client tramite l'oggetto Response. Quindi, se vuoi inserire la stringa "Guru99" nella casella di testo name, il valore di txtName. Un testo sarebbe 'Guru99'.
- La riga di codice successiva prende il valore selezionato della casella di riepilogo tramite la proprietà 'lstLocation.SelectedItem.text'. Quindi scrive questo valore tramite il metodo Response.Write nel client.
- Infine, rendiamo invisibili tutti i controlli sul modulo. Se non lo facciamo, tutti i controlli più i nostri valori di risposta verranno visualizzati insieme. Normalmente, quando una persona inserisce tutte le informazioni nel modulo come nome, posizione, sesso, ecc. La pagina successiva mostrata all'utente dovrebbe contenere solo le informazioni che non sono state inserite. L'utente non desidera visualizzare nuovamente i controlli Nome, Sesso e Posizione. Ma ASP.Net non lo sa e quindi, per impostazione predefinita, mostrerà nuovamente tutti i controlli quando l'utente fa clic sul pulsante Invia. Pertanto, dobbiamo scrivere codice per garantire che tutti i controlli siano nascosti in modo che l'utente veda solo l'output desiderato.
Una volta apportate le modifiche di cui sopra, vedrai il seguente output
Produzione:-
Nella schermata Output, eseguire i seguenti passaggi
- Inserisci il nome Guru99 nella casella di testo del nome
- Scegli una posizione nella casella di riepilogo di Bangalore
- Fare clic sul pulsante Invia
Una volta fatto questo, vedrai "Guru99" e la posizione "Bangalore" verrà visualizzata sulla pagina.
Sintesi
- In ASP.Netè possibile aggiungere controlli standard a un modulo, quali etichette, caselle di testo, caselle di riepilogo, ecc.
- Ad ogni controllo può essere associato un evento. L'evento più comune è l'evento clic sul pulsante. Viene utilizzato quando è necessario inviare informazioni al server web.
