Controale ASP.NET: VerificațiBox, RadioButton, ListăBox, Casetă text, Etichetă
Jacob Lee
Adăugarea controalelor ASP.Net la formularele web
ASP.Net are capacitatea de a adăuga controale la un formular, cum ar fi casetele de text și etichetele.
Să ne uităm la 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.
- Capacitatea utilizatorului de a-și introduce numele.
- O opțiune de a alege orașul în care locuiește utilizatorul
- Capacitatea utilizatorului de a introduce o opțiune pentru sex.
- 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 Solution Explorer ș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 una câte una
Controlul etichetei
Controlul de etichetă 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. Exemplele obișnuite sunt în care o etichetă este adăugată împreună cu controlul casetei de text. Eticheta oferă utilizatorului o indicație despre ceea ce se așteaptă să completeze în caseta de text. Să vedem cum putem implementa acest lucru cu un exemplu prezentat mai jos. Vom folosi o etichetă numită „nume”. Acesta va fi folosit î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ă” pe 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.
- Accesați fereastra de proprietăți făcând clic dreapta pe controlul etichetei
- Alegeți opțiunea de meniu Proprietăți
Pas 3) Din fereastra de proprietăți, schimbați numele proprietății Text în 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.
Odată ce faceți modificările de mai sus, veți vedea următoarea ieșire
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 casetei 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 pe 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
- Atunci alegeți proprietăți
- Schimbați proprietatea id a casetei de text în 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 cu listă pe formularul web din caseta de instrumente, așa cum se arată mai jos
Pas 2) După ce glisați caseta cu listă în formular, va apărea un meniu lateral separat. În acest meniu alegeți meniul „Editați 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ă.
- Faceți clic pe butonul Adăugare pentru a adăuga un element din listă.
- 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.
- Faceți clic pe butonul OK
Pas 4) Accesați fereastra de proprietăți și modificați valoarea proprietății ID a controlului în lstLocație.
Odată ce faceți modificările de mai sus, veți vedea următoarea ieșire
Ieșire: -
Din rezultat, puteți vedea clar că Listbox-urile au fost adăugate în 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” în formularul web din caseta de instrumente. (vezi imaginea de mai jos). Asigurați-vă că adăugați 2 butoane radio, unul pentru opțiunea „Bărbat” și celălalt pentru „Femeie”.
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 „Feme”.
- De asemenea, modificați proprietățile ID ale controalelor respective în rdMale și rdFemale.
Odată ce faceți modificările de mai sus, veți vedea următoarea ieșire
Ieșire: -
Din rezultat, puteți vedea clar că butonul radio a fost adăugat în formular
Checkbox
O casetă de selectare este utilizată pentru a oferi o listă de opțiuni în care utilizatorul poate alege mai multe opțiuni. 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) Odată ce casetele de selectare au fost adăugate, modificați proprietatea id-ului casetei de selectare la „chkASP”.
- 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”.
- Schimbați proprietatea ID a casetei de selectare la „chkASP”
- Schimbați proprietatea ID a casetei de selectare la chkC
Odată ce faceți modificările de mai sus, veți vedea următoarea ieșire
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 butonul de control 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”.
Odată ce faceți modificările de mai sus, veți vedea următoarea ieșire
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 butonul din 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:-
- 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. Un text ar fi „Guru99'.
- Următoarea linie de cod preia valoarea selectată a casetei de listă prin proprietatea „lstLocation.SelectedItem.text”. Apoi scrie această valoare prin metoda Response.Write înapoi către client.
- În cele din urmă, facem ca toate controalele din formular să fie 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 din formular, cum ar fi Numele, locația, sexul etc. Următoarea pagină este afișată utilizatorului ar trebui să aibă doar informațiile care nu au fost introduse. Utilizatorul nu dorește să vadă din nou comenzile Nume, Sex, 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 Trimitere. Prin urmare, trebuie să scriem cod pentru a ne asigura că toate controalele sunt ascunse, astfel încât utilizatorul să vadă doar rezultatul dorit.
Când faceți modificările de mai sus, veți vedea următoarea ieșire
Ieșire: -
În ecranul Ieșire, efectuați următorii pași
- Dați un nume de Guru99 în caseta de text pentru nume
- Alegeți o locație în caseta de listă din Bangalore
- Faceți clic pe butonul Trimiteți
După ce faci asta, vei vedeaGuru99' și locația „Bangalore” este afișată pe pagină.
Rezumat
- In ASP.Net, puteți adăuga controale standard la un formular, cum ar fi etichete, casete text, casete cu listă etc.
- Fiecare control poate avea asociat un eveniment. Cel mai frecvent eveniment este evenimentul clic pe buton. Acesta este utilizat atunci când informațiile trebuie trimise către serverul web.
