ASP.NET kontrole: ProvjeriteBox, RadioButton, PopisBox

Dodavanje ASP.Net kontrola web obrascima

ASP.Net ima mogućnost dodavanja kontrola obrascima, kao što su tekstualni okviri i oznake.

Pogledajmo ostale kontrole dostupne za web obrasce i neka od njihovih uobičajenih svojstava.

U našem primjeru izradit ćemo jedan obrazac koji će imati sljedeću funkcionalnost.

1. Mogućnost da korisnik unese svoje ime.
2. Mogućnost odabira grada u kojem korisnik prebiva.
3. Mogućnost da korisnik unese opciju za spol.
4. Mogućnost odabira tečaja koji korisnik želi učiti. Bit će izbora za oboje C# i ASP.Net.

Pogledajmo svaku kontrolu pobliže. Dodajmo ih kako bismo izradili obrazac s gore navedenom funkcionalnošću.

Korak 1) Prvi korak je otvaranje Forms Designer-a za Demo web obrazac. Nakon što to učinite, moći ćete povući kontrole iz okvira s alatima u Web obrazac.

Za otvaranje web obrasca Designera:

• Desnom tipkom miša kliknite datoteku Demo.aspx u Solution Exploreru i
• Odaberite opciju izbornika View Designer.

Nakon što izvršite gornji korak, moći ćete vidjeti svoj dizajner obrazaca kao što je prikazano u nastavku.

Sada krenimo dodavati kontrole jednu po jednu.

Kontrola naljepnica

Kontrola label koristi se za prikaz teksta ili poruke korisniku na obrascu. Kontrola label se obično koristi zajedno s drugim kontrolama. Uobičajeni primjer je kada se oznaka dodaje zajedno s kontrolom textbox. Oznaka daje korisniku naznaku o tome što se očekuje da će se ispuniti u tekstualnom okviru. Pogledajmo kako to možemo implementirati na primjeru prikazanom u nastavku. Koristit ćemo oznaku pod nazivom 'naziv'. Ovo će se koristiti zajedno s kontrolama textboxa, koje će biti dodane u kasnijem odjeljku.

Korak 1) Prvi korak je povlačenje kontrole 'oznaka' na web obrazac iz alatnog okvira kao što je prikazano dolje.

Korak 2) Nakon što je oznaka dodana, slijedite sljedeće korake.

1. Idite na prozor svojstava klikom desne tipke miša na kontrolu oznake.
2. Odaberite opciju izbornika Svojstva.

Korak 3) U prozoru svojstava promijenite vrijednost svojstva Text u Naziv.

Slično, također promijenite vrijednost svojstva ID kontrole u lblName. Određivanjem značajnog ID-a za kontrole, postaje lakše pristupiti im tijekom faze kodiranja. Ovo je prikazano u nastavku.

Nakon što napravite gore navedene promjene, vidjet ćete sljedeći izlaz.

Izlaz:-

Vidjet ćete da se oznaka Naziv pojavljuje na web obrascu.

Textbox

Tekstni okvir se koristi za dopuštanje korisniku da unese tekst u aplikaciju web obrasca. Pogledajmo kako to možemo implementirati s primjerom prikazanim u nastavku. Formi ćemo dodati jedan tekstni okvir u koji korisnik može unijeti svoje ime.

Korak 1) Prvi korak je povlačenje kontrole tekstnog okvira na web obrazac iz alatnog okvira kao što je prikazano dolje.

U nastavku je prikazano kako bi to izgledalo u dizajneru obrazaca nakon što se kontrola Textbox nalazi na obrascu.

Korak 2) Nakon što je tekstualni okvir dodan, morate promijeniti svojstvo ID-a.

• Idite na prozor svojstava desnim klikom na kontrolu Textbox i
• Odaberite Svojstva, a zatim
• Promijenite svojstvo ID-a tekstualnog okvira u txtName.

Nakon što napravite gore navedene promjene, vidjet ćete sljedeći rezultat.

Izlaz:-

Okvir s popisom

Listbox se koristi za prikaz popisa stavki na web obrascu. Pogledajmo kako to možemo implementirati s primjerom prikazanim u nastavku. U obrazac ćemo dodati okvir s popisom za pohranjivanje nekih gradskih lokacija.

Korak 1) Prvi korak je povlačenje kontrole okvira s popisom na web obrazac iz alatnog okvira kao što je prikazano dolje.

Korak 2) Nakon što povučete okvir s popisom na obrazac, pojavit će se zaseban bočni izbornik. U tom izborniku odaberite izbornik 'Uredi stavke'.

Korak 3) Sada će vam se prikazati dijaloški okvir u kojem možete dodati stavke popisa u okvir s popisom.

1. Kliknite gumb Dodaj za dodavanje stavke popisa.
2. Dajte naziv tekstualnoj vrijednosti stavke popisa – u našem slučaju, Mumbai. Ponovite korake 1 i 2 da biste dodali stavke popisa za Mangalore i Hyderabad.
3. Kliknite na gumb OK.

Korak 4) Idite u prozor svojstava i promijenite vrijednost svojstva ID kontrole na lstLocation.

Nakon što napravite gore navedene promjene, vidjet ćete sljedeći izlaz.

Izlaz:-

Iz ispisa se jasno vidi da je Listbox dodan u obrazac.

Radio gumb

Radio gumb se koristi za prikaz popisa stavki među kojima korisnik može odabrati jednu. Pogledajmo kako to možemo implementirati s primjerom prikazanim u nastavku. Dodat ćemo radio gumb za opciju muško/žensko.

Korak 1) Prvi korak je povlačenje kontrole 'radiobutton' na web obrazac iz alatnog okvira (pogledajte sliku ispod). Obavezno dodajte 2 radio gumba, jedan za opciju 'Muško', a drugi za 'Žensko'.

Korak 2) Nakon što je Radiobutton dodan, promijenite svojstvo 'text'.

• Idite na prozor svojstava klikom na 'Kontrola radiobutton'.
• Promijenite svojstvo teksta radio gumba u 'Muški'.
• Ponovite isti korak da biste ga promijenili u 'Žensko'.
• Također, promijenite svojstva ID-a odgovarajućih kontrola u rdMale i rdFemale.

Nakon što napravite gore navedene promjene, vidjet ćete sljedeći izlaz.

Izlaz:-

Iz ispisa se jasno vidi da je radio gumb dodan u obrazac.

Okvir

Potvrdni okvir koristi se za prikaz popisa opcija u kojima korisnik može odabrati više opcija. Pogledajmo kako to možemo implementirati na primjeru prikazanom u nastavku. Dodat ćemo 2 potvrdna okvira našim web obrascima. Ovi potvrdni okviri pružit će korisniku mogućnost odabira želi li učiti. C# ili ASP.Net.

Korak 1) Prvi korak je povlačenje kontrole za potvrdni okvir na web obrazac iz alatnog okvira kao što je prikazano dolje.

Korak 2) Nakon što su potvrdni okviri dodani, promijenite svojstvo ID-a potvrdnog okvira.

• Idite na prozor svojstava klikom na kontrolu okvira za potvrdu.
• Promijenite svojstva ID-a odgovarajućih kontrola u 'chkC' i 'chkASP'.

Također, promijenite svojstvo teksta kontrole Checkbox u 'C#'. Učinite isto za drugu kontrolu Checkbox i promijenite je u 'ASP.Net'.

1. Promijenite svojstvo ID-a potvrdnog okvira na 'chkASP'.

2. Promijenite svojstvo ID-a potvrdnog okvira na chkC.

Nakon što napravite gore navedene promjene, vidjet ćete sljedeći izlaz.

Izlaz:-

Iz ispisa se jasno vidi da su potvrdni okviri dodani u obrazac.

Button

Gumb se koristi kako bi korisnik mogao kliknuti na gumb koji bi zatim pokrenuo obradu obrasca. Pogledajmo kako to možemo implementirati s našim trenutnim primjerom kao što je prikazano u nastavku. Dodat ćemo jednostavan gumb pod nazivom 'Pošalji'. On će se koristiti za slanje svih informacija na obrascu.

Korak 1) Prvi korak je povlačenje kontrole gumba na web obrazac iz alatnog okvira kao što je prikazano dolje.

Korak 2) Nakon što je gumb dodan, idite na prozor svojstava klikom na kontrolu gumba. Promijenite svojstvo teksta kontrole gumba u Pošalji. Također promijenite ID svojstvo gumba u 'btnSubmit'.

Nakon što napravite gore navedene promjene, vidjet ćete sljedeći izlaz.

Izlaz:-

Iz izlaza možete jasno vidjeti da je gumb dodan u obrazac.

Rukovatelj događajima u ASP.Netu

Kada radite s web obrascem, možete dodati događaje kontrolama. Događaj je nešto što se događa kada se radnja izvrši. Vjerojatno najčešća radnja je klik na gumb na obrascu.

U web obrascima možete dodati kod u odgovarajuću datoteku aspx.cs. Ovaj kod se može koristiti za izvođenje određenih radnji kada se pritisne gumb na obrascu. Ovo je općenito najčešći događaj u web obrascima. Pogledajmo kako to možemo postići.

Učinit ćemo ovo jednostavnim. Samo dodajte događaj kontroli gumba za prikaz naziva koji je unio korisnik. Slijedimo korake u nastavku da bismo to postigli.

Korak 1) Prvo morate dvaput kliknuti gumb na web obrascu. Ovo će prikazati kod događaja za gumb u Visual Studiju.

Događaj btnSubmit_Click automatski dodaje Visual Studio kada dvaput kliknete gumb u dizajneru web obrazaca.

Korak 2) Dodajmo sada kod događaju slanja za prikaz vrijednosti tekstualnog okvira naziva i lokacije koju je odabrao korisnik.

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 Obrazloženje:-

1. Gornji redak koda radi najjednostavniju stvar. Uzima vrijednost kontrole tekstualnog okvira Name i šalje je klijentu putem objekta Response. Dakle, ako želite unijeti niz "Guru99” u tekstualnom okviru za naziv, vrijednost txtName.Text bila bi 'Guru99'.
2. Sljedeći redak koda uzima odabranu vrijednost okvira s popisom putem svojstva 'lstLocation.SelectedItem.Text'. Zatim zapisuje tu vrijednost putem metode Response.Write natrag klijentu.
3. Konačno, sve kontrole na obrascu činimo nevidljivima. Ako to ne učinimo, sve kontrole i vrijednosti naših odgovora bit će prikazane zajedno. Normalno, kada osoba unese sve podatke u obrazac kao što su ime, lokacija, spol itd., sljedeća stranica prikazana korisniku trebala bi sadržavati samo podatke koji nisu uneseni. Korisnik ne želi ponovno vidjeti kontrole Ime, spol i lokacija. Ali ASP.Net to ne zna i stoga će prema zadanim postavkama ponovno prikazati sve kontrole kada korisnik klikne gumb Pošalji. Stoga moramo napisati kod kako bismo osigurali da su sve kontrole skrivene kako bi korisnik vidio samo željeni izlaz.

Nakon što napravite gore navedene promjene, vidjet ćete sljedeći izlaz.

Izlaz:-

Na ekranu Izlaz izvršite sljedeće korake:

1. Daj ime od Guru99 u tekstualnom okviru za ime.
2. Odaberite lokaciju s popisa u Bangaloreu.
3. Kliknite na gumb Pošalji.

Nakon što to učinite, vidjet ćete 'Guru99' i lokacija 'Bangalore' prikazana na stranici.

Pitanja i odgovori