ASP.NET-ohjaimet: TarkistaBox, RadioButton, ListBox, tekstilaatikko, etiketti
Jacob Lee
ASP.Net-ohjaimien lisääminen verkkolomakkeisiin
ASP.Netillä on mahdollisuus lisätä lomakkeeseen ohjaimia, kuten tekstilaatikoita ja tarroja.
Katsotaanpa muita verkkolomakkeille saatavilla olevia säätimiä ja katsotaan joitain niiden yleisiä ominaisuuksia.
Esimerkissämme luomme yhden lomakkeen, jolla on seuraavat toiminnot.
- Käyttäjän mahdollisuus kirjoittaa nimensä.
- Mahdollisuus valita kaupunki, jossa käyttäjä asuu
- Käyttäjän mahdollisuus valita sukupuoli.
- 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.
Avaa Designer-verkkolomake
- Napsauta hiiren kakkospainikkeella Demo.aspx-tiedostoa Solution Explorerissa ja
- Valitse valikkovaihtoehto View Designer.
Kun olet suorittanut yllä olevan vaiheen, näet lomakesuunnittelijasi alla olevan kuvan mukaisesti.
Aloitetaan nyt säätimien lisääminen yksitellen
Label Control
Tarrasäädintä käytetään tekstin tai viestin näyttämiseen käyttäjälle lomakkeella. Tarrasäädintä käytetään tavallisesti yhdessä muiden säätimien kanssa. Yleisiä esimerkkejä ovat tarra lisääminen tekstilaatikon ohjauksen mukana. Tarra antaa käyttäjälle viitteen siitä, mitä tekstilaatikon odotetaan täytettävän. Katsotaanpa, kuinka voimme toteuttaa tämän alla olevan esimerkin avulla. Käytämme tunnistetta nimeltä "nimi". Tätä käytetään yhdessä tekstilaatikon ohjaimien kanssa, jotka lisätään myöhemmässä osassa.
Vaihe 1) Ensimmäinen vaihe on vetää "tarra" -säädin työkalulaatikosta verkkolomakkeeseen alla olevan kuvan mukaisesti.
Vaihe 2) Kun tarra on lisätty, noudata seuraavia ohjeita.
- Siirry ominaisuusikkunaan napsauttamalla hiiren kakkospainikkeella tarran ohjausobjektia
- Valitse Ominaisuudet-valikkovaihtoehto
Vaihe 3) Muuta ominaisuusikkunassa Teksti-ominaisuuden nimeksi Nimi
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 teet 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ää tekstilaatikon ohjausobjekti verkkolomakkeeseen työkalulaatikosta alla olevan kuvan mukaisesti
Alla näkyy, miltä tämä näyttäisi lomakkeiden suunnittelijassa, kun Textbox-ohjausobjekti on lomakkeessa
Vaihe 2) Kun tekstilaatikko on lisätty, sinun on muutettava tunnusominaisuutta.
- Siirry ominaisuusikkunaan napsauttamalla hiiren kakkospainikkeella Textbox-ohjausobjektia ja
- Valitse sitten ominaisuudet
- Muuta tekstilaatikon id-ominaisuuden arvoksi 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ää luetteloruudun ohjausobjekti Web-lomakkeeseen työkalulaatikosta alla olevan kuvan mukaisesti
Vaihe 2) Kun vedät luetteloruudun lomakkeeseen, erillinen sivuvalikko tulee näkyviin. Valitse tästä valikosta Muokkaa kohteita -valikko.
Vaihe 3) Näyttöön tulee nyt valintaikkuna, jossa voit lisätä luettelokohteita luetteloruutuun.
- Napsauta Lisää-painiketta lisätäksesi luettelon kohteen.
- Anna nimi luettelokohteen tekstiarvolle – meidän tapauksessamme Mumbai. Toista vaiheet 1 ja 2 lisätäksesi luettelokohteita Mangalorelle ja Hyderabadille.
- Napsauta OK-painiketta
Vaihe 4) Siirry Ominaisuudet-ikkunaan ja muuta ohjausobjektin ID-ominaisuuden arvoksi lstLocation.
Kun teet yllä olevat muutokset, näet seuraavan tulosteen
Lähtö: -
Tulosteesta näet selvästi, että Listboxes 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 askel on vetää "valintanappi" -säädin työkalupakin verkkolomakkeeseen. (katso kuva alla). Varmista, että lisäät kaksi valintanappia, joista toinen valitsee "Mies" ja toinen "Nainen".
Vaihe 2) Kun Radiopainike on lisätty, muuta teksti-ominaisuutta.
- Siirry ominaisuusikkunaan napsauttamalla 'Radiobutton control'.
- Muuta valintapainikkeen tekstiominaisuudeksi "Mies".
- Toista sama vaihe vaihtaaksesi sen arvoksi Nainen.
- Muuta myös vastaavien ohjausobjektien ID-ominaisuudet arvoiksi rdMale ja rdFemale.
Kun teet yllä olevat muutokset, näet seuraavan tulosteen
Lähtö: -
Tulosteesta näet selvästi, että valintanappi on lisätty lomakkeeseen
Valintaruutu
Valintaruutua käytetään tarjoamaan luettelo vaihtoehdoista, joista käyttäjä voi valita useita vaihtoehtoja. Katsotaanpa, kuinka voimme toteuttaa tämän alla olevan esimerkin avulla. Lisäämme verkkolomakkeihimme 2 valintaruutua. Nämä valintaruudut antavat käyttäjälle mahdollisuuden valita, haluavatko he oppia C# tai ASP.Net.
Vaihe 1) Ensimmäinen vaihe on vetää valintaruudun ohjausobjekti verkkolomakkeeseen työkalulaatikosta alla olevan kuvan mukaisesti
Vaihe 2) Kun valintaruudut on lisätty, muuta valintaruudun tunnus -ominaisuuden arvoksi "chkASP".
- 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".
- Muuta valintaruudun ID-ominaisuuden arvoksi "chkASP"
- Muuta valintaruudun ID-ominaisuuden arvoksi chkC
Kun teet yllä olevat muutokset, näet seuraavan tulosteen
Lähtö: -
Tulosteesta näet selvästi, että valintaruudut on lisätty lomakkeeseen.
Painike
Painikkeen avulla käyttäjä voi napsauttaa painiketta, joka sitten aloittaa lomakkeen käsittelyn. Katsotaanpa, kuinka voimme toteuttaa tämän nykyisellä esimerkillämme alla esitetyllä tavalla. Lisäämme yksinkertaisen painikkeen nimeltä "Lähetä"-painike. Tätä käytetään kaikkien lomakkeen tietojen toimittamiseen.
Vaihe 1) Ensimmäinen vaihe on vetää painikeohjain Web-lomakkeeseen työkalulaatikosta 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 teet 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ää automaattisesti btnSubmit_Click-tapahtuman, kun kaksoisnapsautat painiketta verkkolomakkeiden suunnittelijassa.
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;
}
Koodin selitys: -
- Yllä oleva koodirivi tekee yksinkertaisimman asian. Se ottaa Nimi-tekstiruudun ohjausobjektin arvon ja lähettää sen asiakkaalle Response-objektin kautta. Joten jos haluat kirjoittaa merkkijonon "Guru99" nimitekstikenttään, txtName-arvon. Teksti olisi "Guru99".
- Seuraava koodirivi ottaa luetteloruudun valitun arvon ominaisuuden 'lstLocation.SelectedItem.text' kautta. Sitten se kirjoittaa tämän arvon Response.Write-menetelmän kautta takaisin asiakkaalle.
- Lopuksi teemme kaikki lomakkeen säätimet näkymättömiksi. Jos emme tee tätä, kaikki säätimet ja vastausarvomme näytetään yhdessä. Normaalisti, kun henkilö syöttää lomakkeeseen kaikki tiedot, kuten nimen, sijainnin, sukupuolen jne. Seuraava sivu näytetään käyttäjälle pitäisi olla vain tiedot, joita ei ole syötetty. Käyttäjä ei halua nähdä nimi-, sukupuoli- ja sijaintisäätimiä uudelleen. Mutta ASP.Net ei tiedä tätä, joten oletusarvoisesti se näyttää jälleen kaikki säätimet, kun käyttäjä napsauttaa Lähetä-painiketta. Siksi meidän on kirjoitettava koodi varmistaaksemme, että kaikki ohjaimet ovat piilossa, jotta käyttäjä näkee vain halutun lähdön.
Kun teet yllä olevat muutokset, näet seuraavan tulosteen
Lähtö: -
Suorita Output-näytössä seuraavat vaiheet
- Anna Guru99:n nimi nimitekstikenttään
- Valitse sijainti Bangaloren luetteloruudusta
- Napsauta Lähetä-painiketta
Kun teet tämän, näet "Guru99" ja sijainti "Bangalore" näkyy sivulla.
Yhteenveto
- In ASP.Net, voit lisätä lomakkeeseen vakiosäätimiä, kuten tarroja, tekstilaatikoita, luetteloruutuja jne.
- Jokaiseen ohjausobjektiin voi liittyä tapahtuma. Yleisin tapahtuma on painikkeen napsautustapahtuma. Tätä käytetään, kun tiedot on lähetettävä verkkopalvelimelle.
