ASP.NET-ohjaimet: TarkistaBox, RadioButton, ListBox

ASP.Net-ohjaimien lisääminen verkkolomakkeisiin

ASP.Net pystyy lisäämään lomakkeisiin ohjausobjekteja, kuten tekstiruutuja ja otsikoita.

Tarkastellaan muita verkkolomakkeissa käytettävissä olevia ohjausobjekteja ja niiden yhteisiä ominaisuuksia.

Esimerkissämme luomme yhden lomakkeen, jolla on seuraavat toiminnot.

1. Käyttäjän mahdollisuus kirjoittaa nimensä.
2. Mahdollisuus valita kaupunki, jossa käyttäjä asuu.
3. Käyttäjän mahdollisuus valita sukupuoli.
4. Mahdollisuus valita kurssi, jonka käyttäjä haluaa oppia. Valinnanvaraa tulee molemmille C# ja ASP.Net.

Tarkastellaan jokaista säädintä yksityiskohtaisesti. Lisätään ne rakentaaksesi lomakkeen yllä mainituilla toiminnoilla.

Vaihe 1) Ensimmäinen vaihe on avata Forms Designer demo-verkkolomakkeelle. Kun olet tehnyt tämän, voit vetää ohjaimia työkalulaatikosta Verkkolomake.

Suunnittelijan verkkolomakkeen avaaminen:

• Napsauta Demo.aspx-tiedostoa hiiren kakkospainikkeella Ratkaisujen hallinnassa ja
• Valitse valikkovaihtoehto View Designer.

Kun olet suorittanut yllä olevan vaiheen, näet lomakesuunnittelijasi alla olevan kuvan mukaisesti.

Aloitetaan nyt ohjausobjektien lisääminen yksi kerrallaan.

Label Control

Otsikko-ohjausobjektia käytetään tekstin tai viestin näyttämiseen käyttäjälle lomakkeella. Otsikko-ohjausobjektia käytetään yleensä yhdessä muiden ohjausobjektien kanssa. Yleinen esimerkki on otsikon lisääminen tekstiruutuohjausobjektin kanssa. Otsikko antaa käyttäjälle viitteitä siitä, mitä tekstiruutuun odotetaan täyttyvän. Katsotaanpa alla olevan esimerkin avulla, miten voimme toteuttaa tämän. Käytämme otsikkoa nimeltä 'nimi'. Tätä käytetään yhdessä tekstiruutuohjausobjektien kanssa, jotka lisätään myöhemmässä osiossa.

Vaihe 1) Ensimmäinen vaihe on vetää 'tunniste'-ohjausobjekti työkalupakista verkkolomakkeelle alla olevan kuvan mukaisesti.

Vaihe 2) Kun tarra on lisätty, noudata seuraavia ohjeita.

1. Siirry ominaisuusikkunaan napsauttamalla hiiren kakkospainikkeella otsikko-ohjausobjektia.
2. Valitse Ominaisuudet-valikkovaihtoehto.

Vaihe 3) Muuta ominaisuusikkunassa Text-ominaisuuden arvoksi Name.

Muuta myös ohjausobjektin ID-ominaisuuden arvoksi lblName. Määrittämällä ohjauksille merkityksellinen tunnus, niihin on helpompi päästä käsiksi koodausvaiheen aikana. Tämä näkyy alla.

Kun olet tehnyt yllä olevat muutokset, näet seuraavan tulosteen.

Lähtö: -

Näet, että Verkkolomakkeessa näkyy Nimi-tarra.

Tekstilaatikko

Tekstiruutua käytetään antamaan käyttäjälle mahdollisuus kirjoittaa tekstiä Web-lomakesovellukseen. Katsotaanpa, kuinka voimme toteuttaa tämän alla olevan esimerkin avulla. Lisäämme lomakkeeseen yhden tekstilaatikon, johon käyttäjä voi kirjoittaa nimensä.

Vaihe 1) Ensimmäinen vaihe on vetää tekstiruutuelementti työkalupakista verkkolomakkeeseen alla olevan kuvan mukaisesti.

Alla on kuva, miltä tämä näyttäisi lomakesuunnittelussa, kun tekstiruutuohjausobjekti on lomakkeella.

Vaihe 2) Kun tekstilaatikko on lisätty, sinun on muutettava tunnusominaisuutta.

• Siirry ominaisuusikkunaan napsauttamalla hiiren kakkospainikkeella tekstiruutukomponenttia ja
• Valitse Ominaisuudet ja sitten
• Muuta tekstiruudun ID-ominaisuudeksi txtName.

Kun teet yllä olevat muutokset, näet seuraavan tulosteen.

Lähtö: -

Luetteloruutu

Luettelolaatikkoa käytetään esittelemään luettelo kohteista verkkolomakkeessa. Katsotaanpa, kuinka voimme toteuttaa tämän alla olevan esimerkin avulla. Lisäämme lomakkeeseen luetteloruudun joidenkin kaupunkien sijaintien tallentamiseksi.

Vaihe 1) Ensimmäinen vaihe on vetää luetteloruutuohjausobjekti työkalupakista verkkolomakkeeseen alla olevan kuvan mukaisesti.

Vaihe 2) Kun vedät luetteloruudun lomakkeeseen, näkyviin tulee erillinen sivuvalikko. Valitse tästä valikosta 'Muokkaa kohteita' -valikko.

Vaihe 3) Näyttöön tulee nyt valintaikkuna, jossa voit lisätä luettelokohteita luetteloruutuun.

1. Napsauta Lisää-painiketta lisätäksesi luettelon kohteen.
2. Anna luettelokohdan tekstiarvolle nimi – meidän tapauksessamme Mumbai. Toista vaiheet 1 ja 2 lisätäksesi luettelokohdat Mangalorelle ja Hyderabadille.
3. Napsauta OK-painiketta.

Vaihe 4) Siirry ominaisuusikkunaan ja muuta ohjausobjektin ID-ominaisuuden arvoksi lstLocation.

Kun olet tehnyt yllä olevat muutokset, näet seuraavan tulosteen.

Lähtö: -

Tulosteesta näkyy selvästi, että listalaatikko on lisätty lomakkeeseen.

Radiopainike

Valintanappia käytetään esittelemään luettelo kohteista, joista käyttäjä voi valita yhden. Katsotaanpa, kuinka voimme toteuttaa tämän alla olevan esimerkin avulla. Lisäämme valintanapin mies/nainen vaihtoehdolle.

Vaihe 1) Ensimmäinen vaihe on vetää 'radiobutton'-ohjausobjekti verkkolomakkeeseen työkalupakista (katso kuva alla). Muista lisätä kaksi radiopainiketta, toinen 'Mies'-vaihtoehdolle ja toinen 'Nainen'-vaihtoehdolle.

Vaihe 2) Kun Radiopainike on lisätty, muuta teksti-ominaisuutta.

• Siirry ominaisuusikkunaan napsauttamalla 'Radiobutton control'.
• Muuta valintapainikkeen tekstiominaisuudeksi "Mies".
• Toista sama vaihe vaihtaaksesi sen muotoon 'Nainen'.
• Muuta myös vastaavien ohjausobjektien ID-ominaisuudet arvoiksi rdMale ja rdFemale.

Kun olet tehnyt yllä olevat muutokset, näet seuraavan tulosteen.

Lähtö: -

Tulosteesta näkyy selvästi, että valintanappi on lisätty lomakkeeseen.

Valintaruutu

Valintaruutua käytetään luettelon näyttämiseen, josta käyttäjä voi valita useita vaihtoehtoja. Katsotaanpa, miten voimme toteuttaa tämän alla olevan esimerkin avulla. Lisäämme kaksi valintaruutua verkkolomakkeisiimme. Nämä valintaruudut tarjoavat käyttäjälle vaihtoehdon, haluaako hän oppia. C# tai ASP.Net.

Vaihe 1) Ensimmäinen vaihe on vetää valintaruutu-ohjausobjekti työkalupakista verkkolomakkeeseen alla olevan kuvan mukaisesti.

Vaihe 2) Kun valintaruudut on lisätty, muuta valintaruudun tunnus -ominaisuutta.

• Siirry ominaisuusikkunaan napsauttamalla valintaruutua.
• Muuta vastaavien säätimien ID-ominaisuuksiksi "chkC" ja "chkASP".

Muuta myös valintaruudun ohjausobjektin tekstiominaisuuden arvoksi C#. Tee sama toiselle Checkbox-säätimelle ja muuta se arvoksi "ASP.Net".

1. Muuta valintaruudun ID-ominaisuudeksi 'chkASP'.

2. Muuta valintaruudun ID-ominaisuudeksi chkC.

Kun olet tehnyt yllä olevat muutokset, näet seuraavan tulosteen.

Lähtö: -

Tulosteesta näkyy selvästi, että valintaruudut on lisätty lomakkeeseen.

Button

Painiketta käytetään käyttäjän napsauttamaan painiketta, joka käynnistää lomakkeen käsittelyn. Katsotaanpa, miten voimme toteuttaa tämän alla olevan esimerkin avulla. Lisäämme yksinkertaisen painikkeen nimeltä 'Lähetä'. Sitä käytetään kaikkien lomakkeen tietojen lähettämiseen.

Vaihe 1) Ensimmäinen vaihe on vetää painike-ohjausobjekti työkalupakista verkkolomakkeeseen alla olevan kuvan mukaisesti.

Vaihe 2) Kun painike on lisätty, siirry ominaisuusikkunaan napsauttamalla painikeohjainta. Muuta painikeohjaimen tekstiominaisuudeksi Lähetä. Muuta myös painikkeen ID-ominaisuuden arvoksi "btnSubmit".

Kun olet tehnyt yllä olevat muutokset, näet seuraavan tulosteen.

Lähtö: -

Tulosteesta näet selvästi, että painike on lisätty lomakkeeseen.

Tapahtumakäsittelijä ASP.Netissä

Kun työskentelet verkkolomakkeen kanssa, voit lisätä tapahtumia ohjaimiin. Tapahtuma on jotain, joka tapahtuu, kun toiminto suoritetaan. Luultavasti yleisin toiminta on lomakkeen painikkeen napsauttaminen.

Verkkolomakkeissa voit lisätä koodia vastaavaan aspx.cs-tiedostoon. Tällä koodilla voidaan suorittaa tiettyjä toimintoja, kun lomakkeen painiketta painetaan. Tämä on yleensä Web Formsin yleisin tapahtuma. Katsotaanpa, kuinka voimme saavuttaa tämän.

Aiomme tehdä tämän yksinkertaiseksi. Lisää vain tapahtuma painikeohjaukseen, niin näet käyttäjän kirjoittaman nimen. Noudatetaan alla olevia vaiheita saavuttaaksesi tämän.

Vaihe 1) Ensin sinun on kaksoisnapsautettava Web-lomakkeen painiketta. Tämä tuo esiin painikkeen tapahtumakoodin Visual Studiossa.

Visual Studio lisää btnSubmit_Click-tapahtuman automaattisesti, kun kaksoisnapsautat painiketta verkkolomakkeiden suunnittelutyökalussa.

Vaihe 2) Lisätään nyt lähetystapahtumaan koodi, joka näyttää nimen tekstikentän arvon ja käyttäjän valitseman sijainnin.

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 Selitys:-

1. Yllä oleva koodirivi tekee yksinkertaisimman asian. Se ottaa Name-tekstiruudun arvon ja lähettää sen asiakkaalle Response-objektin kautta. Joten jos haluat syöttää merkkijonon "Guru99” nimitekstikentässä, txtName.Text-kentän arvo olisi 'Guru99 '.
2. Seuraava koodirivi ottaa listaruudun valitun arvon ominaisuuden 'lstLocation.SelectedItem.Text' kautta. Sitten se kirjoittaa tämän arvon takaisin asiakkaalle Response.Write-metodin avulla.
3. Lopuksi teemme kaikista lomakkeen ohjausobjekteista näkymättömiä. Jos emme tee tätä, kaikki ohjausobjektit ja vastausarvomme näkyvät yhdessä. Normaalisti, kun henkilö syöttää lomakkeeseen kaikki tiedot, kuten nimen, sijainnin, sukupuolen jne., seuraavalla käyttäjälle näytettävällä sivulla pitäisi olla vain tiedot, joita ei syötetty. Käyttäjä ei halua nähdä nimen, sukupuolen ja sijainnin ohjausobjekteja uudelleen. Mutta ASP.Net ei tiedä tätä, ja siksi se näyttää oletusarvoisesti kaikki ohjausobjektit uudelleen, kun käyttäjä napsauttaa Lähetä-painiketta. Siksi meidän on kirjoitettava koodia varmistaaksemme, että kaikki ohjausobjektit ovat piilossa, jotta käyttäjä näkee vain halutun tulosteen.

Kun olet tehnyt yllä olevat muutokset, näet seuraavan tulosteen.

Lähtö: -

Suorita Tuloste-näytössä seuraavat vaiheet:

1. Anna nimi Guru99 nimitekstikentässä.
2. Valitse sijainti Bangaloren luettelosta.
3. Napsauta Lähetä-painiketta.

Kun teet tämän, näet 'Guru99' ja sijainti 'Bangalore' näkyvät sivulla.

UKK