Controale ASP.NET: VerificațiBox, RadioButton, ListăBox

Adăugarea controalelor ASP.Net la formularele web

ASP.Net are capacitatea de a adăuga controale la un formular, cum ar fi casete de text și etichete.

Să analizăm celelalte controale disponibile pentru formularele Web și să vedem câteva dintre proprietățile lor comune.

În exemplul nostru, vom crea un formular care va avea următoarea funcționalitate.

1. Capacitatea utilizatorului de a-și introduce numele.
2. O opțiune pentru a alege orașul în care locuiește utilizatorul.
3. Capacitatea utilizatorului de a introduce o opțiune pentru sex.
4. O opțiune de a alege un curs pe care utilizatorul dorește să-l învețe. Vor exista alegeri pentru ambele C# și ASP.Net.

Să ne uităm la fiecare control în detaliu. Să le adăugăm pentru a construi formularul cu funcționalitatea menționată mai sus.

Pas 1) Primul pas este să deschideți Forms Designer pentru formularul web Demo. Odată ce faceți acest lucru, veți putea trage comenzile din caseta de instrumente în Formular web.

Pentru a deschide formularul web Designer:

• Faceți clic dreapta pe fișierul Demo.aspx din Exploratorul de soluții și
• Alegeți opțiunea de meniu View Designer.

Odată ce ați efectuat pasul de mai sus, veți putea vedea Designerul de formulare așa cum se arată mai jos.

Acum să începem să adăugăm controalele noastre unul câte unul.

Controlul etichetei

Controlul etichetei este utilizat pentru a afișa un text sau un mesaj utilizatorului în formular. Controlul etichetei este utilizat în mod normal împreună cu alte controale. Un exemplu comun este atunci când o etichetă este adăugată împreună cu controlul casetei de text. Eticheta oferă o indicație utilizatorului cu privire la ceea ce se așteaptă să fie completat în caseta de text. Să vedem cum putem implementa acest lucru cu un exemplu prezentat mai jos. Vom folosi o etichetă numită „nume”. Aceasta va fi utilizată împreună cu controalele casetei de text, care vor fi adăugate în secțiunea ulterioară.

Pas 1) Primul pas este să trageți controlul „etichetă” în formularul web din caseta de instrumente, așa cum se arată mai jos.

Pas 2) Odată ce eticheta a fost adăugată, urmați pașii următori.

1. Accesați fereastra de proprietăți făcând clic dreapta pe controlul etichetei.
2. Alegeți opțiunea de meniu Proprietăți.

Pas 3) Din fereastra de proprietăți, modificați valoarea proprietății Text la Nume.

În mod similar, modificați și valoarea proprietății ID a controlului la lblName. Prin specificarea unui ID semnificativ pentru controale, devine mai ușor să le accesați în timpul fazei de codare. Acest lucru este prezentat mai jos.

După ce faceți modificările de mai sus, veți vedea următorul rezultat.

Ieșire: -

Veți vedea că eticheta Nume apare pe Formularul Web.

Casetă de text

O casetă de text este utilizată pentru a permite unui utilizator să introducă un text în aplicația de formular web. Să vedem cum putem implementa acest lucru cu un exemplu prezentat mai jos. Vom adăuga o casetă text în formular în care utilizatorul își poate introduce numele.

Pas 1) Primul pas este să trageți controlul casetă de text în formularul web din caseta de instrumente, așa cum se arată mai jos.

Mai jos este cum ar arăta acest lucru în designerul de formulare odată ce controlul Textbox este în formular.

Pas 2) Odată ce Textbox a fost adăugată, trebuie să modificați proprietatea ID.

• Accesați fereastra de proprietăți făcând clic dreapta pe controlul Textbox și
• Alegeți Proprietăți, apoi
• Schimbați proprietatea ID a casetei de text la txtName.

Odată ce faceți modificările de mai sus, vedeți următoarea ieșire.

Ieșire: -

Caseta cu listă

O casetă Listă este utilizată pentru a prezenta o listă de articole în formularul Web. Să vedem cum putem implementa acest lucru cu un exemplu prezentat mai jos. Vom adăuga o casetă listă în formular pentru a stoca unele locații ale orașului.

Pas 1) Primul pas este să trageți controlul casetei listă în formularul Web din caseta de instrumente, așa cum se arată mai jos.

Pas 2) După ce trageți caseta listă în formular, va apărea un meniu lateral separat. În acest meniu, alegeți meniul „Editare elemente”.

Pas 3) Acum vi se va prezenta o casetă de dialog în care puteți adăuga elementele din listă în caseta de listă.

1. Faceți clic pe butonul Adăugare pentru a adăuga un element din listă.
2. Dați un nume pentru valoarea text a elementului din listă – în cazul nostru, Mumbai. Repetați pașii 1 și 2 pentru a adăuga elemente din listă pentru Mangalore și Hyderabad.
3. Faceți clic pe butonul OK.

Pas 4) Accesați fereastra de proprietăți și modificați valoarea proprietății ID a controlului în lstLocation.

După ce faceți modificările de mai sus, veți vedea următorul rezultat.

Ieșire: -

Din rezultat, puteți vedea clar că Listbox-ul a fost adăugat la formular.

RadioButon

Un buton radio este folosit pentru a prezenta o listă de articole dintre care utilizatorul poate alege unul. Să vedem cum putem implementa acest lucru cu un exemplu prezentat mai jos. Vom adăuga un buton radio pentru o opțiune masculin/femeie.

Pas 1) Primul pas este să trageți controlul „buton radio” din caseta de instrumente pe formularul web (vezi imaginea de mai jos). Asigurați-vă că adăugați 2 butoane radio, unul pentru opțiunea „Masculin” și celălalt pentru „Feminin”.

Pas 2) Odată ce butonul Radio a fost adăugat, modificați proprietatea „text”.

• Accesați fereastra de proprietăți făcând clic pe „Controlul butonului radio”.
• Schimbați proprietatea text a butonului Radio la „Bărbat”.
• Repetați același pas pentru a-l schimba în „Feminin”.
• De asemenea, modificați proprietățile ID ale controalelor respective în rdMale și rdFemale.

După ce faceți modificările de mai sus, veți vedea următorul rezultat.

Ieșire: -

Din rezultat, puteți vedea clar că butonul radio a fost adăugat la formular.

Checkbox

O casetă de selectare este utilizată pentru a oferi o listă de opțiuni în care utilizatorul poate alege mai multe variante. Să vedem cum putem implementa acest lucru cu un exemplu prezentat mai jos. Vom adăuga 2 casete de selectare la formularele noastre web. Aceste casete de selectare vor oferi utilizatorului o opțiune dacă dorește să învețe. C# sau ASP.Net.

Pas 1) Primul pas este să trageți controlul casetei de selectare în formularul web din caseta de instrumente, așa cum se arată mai jos.

Pas 2) După ce casetele de selectare au fost adăugate, modificați proprietatea ID-ului casetei de selectare.

• Accesați fereastra de proprietăți făcând clic pe controlul Casetă de selectare.
• Schimbați proprietățile ID ale controalelor respective la „chkC” și „chkASP”.

De asemenea, modificați proprietatea text a controlului Checkbox la „C#”. Faceți același lucru pentru celălalt control Checkbox și schimbați-l în „ASP.Net”.

1. Schimbați proprietatea ID a casetei de selectare la „chkASP”.

2. Schimbați proprietatea ID a casetei de selectare la chkC.

După ce faceți modificările de mai sus, veți vedea următorul rezultat.

Ieșire: -

Din rezultat, puteți vedea clar că casetele de selectare au fost adăugate în formular.

Buton

Un buton este folosit pentru a permite utilizatorului să facă clic pe un buton, care ar începe apoi procesarea formularului. Să vedem cum putem implementa acest lucru cu exemplul nostru actual, așa cum se arată mai jos. Vom adăuga un buton simplu numit butonul „Trimite”. Acesta va fi folosit pentru a trimite toate informațiile din formular.

Pas 1) Primul pas este să trageți controlul butonului pe formularul Web din caseta de instrumente, așa cum se arată mai jos.

Pas 2) Odată ce butonul a fost adăugat, accesați fereastra de proprietăți făcând clic pe butonul de control. Schimbați proprietatea text a controlului butonului la Trimitere. De asemenea, modificați proprietatea ID a butonului la „btnSubmit”.

După ce faceți modificările de mai sus, veți vedea următorul rezultat.

Ieșire: -

Din rezultat, puteți vedea clar că butonul a fost adăugat în formular.

Manipulator de evenimente în ASP.Net

Când lucrați cu un formular web, puteți adăuga evenimente la comenzi. Un eveniment este ceva care se întâmplă atunci când se realizează o acțiune. Probabil cea mai comună acțiune este apăsarea unui buton dintr-un formular.

În formularele web, puteți adăuga cod la fișierul aspx.cs corespunzător. Acest cod poate fi folosit pentru a efectua anumite acțiuni atunci când un buton este apăsat pe formular. Acesta este, în general, cel mai frecvent eveniment din Web Forms. Să vedem cum putem realiza asta.

Vom face acest lucru simplu. Doar adăugați un eveniment la controlul butonului pentru a afișa numele introdus de utilizator. Să urmăm pașii de mai jos pentru a realiza acest lucru.

Pas 1) Mai întâi trebuie să faceți dublu clic pe butonul de pe formularul web. Aceasta va afișa codul evenimentului pentru butonul din Visual Studio.

Evenimentul btnSubmit_Click este adăugat automat de Visual Studio atunci când faceți dublu clic pe buton în designerul de formulare web.

Pas 2) Să adăugăm acum cod la evenimentul de trimitere pentru a afișa valoarea casetei de text cu nume și locația aleasă de utilizator.

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 Explicaţie:-

1. Linia de cod de mai sus face cel mai simplu lucru. Preia valoarea controlului textbox Name și o trimite clientului prin intermediul obiectului Response. Deci, dacă doriți să introduceți șirul „Guru99” în caseta de text nume, valoarea lui txtName.Text ar fi 'Guru99'.
2. Următoarea linie de cod preia valoarea selectată din listbox prin intermediul proprietății „lstLocation.SelectedItem.Text”. Apoi scrie această valoare prin metoda Response.Write înapoi la client.
3. În cele din urmă, facem toate controalele din formular invizibile. Dacă nu facem acest lucru, toate controalele plus valorile noastre de răspuns vor fi afișate împreună. În mod normal, atunci când o persoană introduce toate informațiile în formular, cum ar fi Numele, locația, Sexul etc., următoarea pagină afișată utilizatorului ar trebui să conțină doar informațiile care nu au fost introduse. Utilizatorul nu dorește să vadă din nou controalele Nume, Sex și Locație. Dar ASP.Net nu știe acest lucru și, prin urmare, în mod implicit, va afișa din nou toate controalele atunci când utilizatorul face clic pe butonul Trimite. Prin urmare, trebuie să scriem cod pentru a ne asigura că toate controalele sunt ascunse, astfel încât utilizatorul să vadă doar rezultatul dorit.

După ce faceți modificările de mai sus, veți vedea următorul rezultat.

Ieșire: -

În ecranul Output, efectuați următorii pași:

1. Dați un nume de Guru99 în caseta de text pentru nume.
2. Alegeți o locație din lista din Bangalore.
3. Faceți clic pe butonul Trimiteți.

După ce faci asta, vei vedeaGuru99' și locația „Bangalore” afișate pe pagină.

Întrebări frecvente