ASP.NET-i juhtelemendid: kontrolligeBox, raadionupp, loendBox

ASP.Neti juhtelementide lisamine veebivormidele

ASP.Net võimaldab vormile lisada juhtelemente, näiteks tekstikaste ja silte.

Vaatame teisi veebivormide jaoks saadaolevaid juhtelemente ja tutvume nende ühiste omadustega.

Meie näites loome ühe vormi, millel on järgmised funktsioonid.

1. Kasutaja võimalus sisestada oma nimi.
2. Võimalus valida linn, kus kasutaja elab.
3. Kasutaja võimalus sisestada soo valik.
4. Võimalus valida kursus, mida kasutaja soovib õppida. Valikus on mõlema jaoks C# ja ASP.Net.

Vaatame iga juhtelementi üksikasjalikumalt. Lisame need, et ülalmainitud funktsionaalsusega vorm üles ehitada.

Step 1) Esimene samm on demo veebivormi vormide kujundaja avamine. Kui olete seda teinud, saate juhtelemente tööriistakastist lohistada Veebivorm.

Kujundaja veebivormi avamiseks tehke järgmist.

• Paremklõpsake lahenduste brauseris failil Demo.aspx ja seejärel
• Valige menüükäsk Kuva kujundaja.

Kui olete ülaltoodud toimingu sooritanud, näete oma vormikujundajat, nagu allpool näidatud.

Nüüd hakkame oma juhtelemente ükshaaval lisama.

Sildi kontroll

Sildi juhtelementi kasutatakse vormil teksti või sõnumi kuvamiseks. Sildi juhtelementi kasutatakse tavaliselt koos teiste juhtelementidega. Levinud näide on see, kus koos tekstivälja juhtelemendiga lisatakse silt. Silt annab kasutajale märku, mida tekstiväljal oodatakse olevat. Vaatame allpool toodud näite abil, kuidas seda rakendada. Kasutame silti nimega „nimi”. Seda kasutatakse koos tekstivälja juhtelementidega, mis lisatakse hilisemas osas.

Step 1) Esimene samm on lohistada „sildi” juhtelement tööriistakastist veebivormile, nagu allpool näidatud.

Step 2) Kui silt on lisatud, järgige järgmisi samme.

1. Minge omaduste aknasse, paremklõpsates sildi juhtelemendil.
2. Valige menüüst suvand Atribuudid.

Step 3) Muutke atribuutide aknas atribuudi Text väärtuseks Name.

Samamoodi muutke ka juhtelemendi ID atribuudi väärtuseks lblName. Määrates juhtelementidele tähendusliku ID, on neile kodeerimisetapis lihtsam juurdepääs. See on näidatud allpool.

Kui olete ülaltoodud muudatused teinud, näete järgmist väljundit.

Väljund:-

Näete, et veebivormil kuvatakse silt Nimi.

Tekstikast

Tekstikasti kasutatakse selleks, et kasutaja saaks veebivormirakendusse teksti sisestada. Vaatame, kuidas saame seda rakendada allpool toodud näite abil. Lisame vormile ühe tekstikasti, kuhu kasutaja saab oma nime sisestada.

Step 1) Esimene samm on tekstivälja juhtelemendi lohistamine tööriistakastist veebivormile, nagu allpool näidatud.

Allpool on näidatud, kuidas see vormide kujundajas välja näeks, kui tekstivälja juhtelement on vormil.

Step 2) Kui tekstikast on lisatud, peate ID atribuuti muutma.

• Minge omaduste aknasse, paremklõpsates tekstivälja juhtelemendil ja
• Valige Atribuudid ja seejärel
• Muutke tekstivälja ID atribuut väärtuseks txtName.

Kui olete ülaltoodud muudatused teinud, näete järgmist väljundit.

Väljund:-

Loendikast

Loendikasti kasutatakse veebivormi üksuste loendi kuvamiseks. Vaatame, kuidas saame seda rakendada allpool toodud näite abil. Lisame vormile loendikasti mõne linna asukoha salvestamiseks.

Step 1) Esimene samm on loendiboksi juhtelemendi lohistamine tööriistakastist veebivormile, nagu allpool näidatud.

Step 2) Kui lohistad loendikasti vormile, ilmub eraldi külgmenüü. Selles menüüs vali menüü „Muuda üksusi“.

Step 3) Nüüd kuvatakse teile dialoogiboks, kus saate loendiüksused loendikasti lisada.

1. Loendiüksuse lisamiseks klõpsake nuppu Lisa.
2. Andke loendiüksuse tekstiväärtusele nimi – meie puhul Mumbai. Korrake samme 1 ja 2, et lisada loendiüksused Mangalore'i ja Hyderabadi jaoks.
3. Klõpsake nuppu OK.

Step 4) Mine omaduste aknasse ja muuda juhtelemendi ID atribuudi väärtuseks lstLocation.

Kui olete ülaltoodud muudatused teinud, näete järgmist väljundit.

Väljund:-

Väljundist on selgelt näha, et loendikast lisati vormile.

Raadio nupp

Raadionuppu kasutatakse üksuste loendi kuvamiseks, millest kasutaja saab ühe valida. Vaatame, kuidas saame seda rakendada allpool toodud näite abil. Lisame raadionupu meeste/naiste valiku jaoks.

Step 1) Esimene samm on lohistada raadionupp tööriistakastist veebivormile (vt allolevat pilti). Lisage kindlasti kaks raadionuppu, üks valiku „Mees“ ja teine ​​valiku „Naine“ jaoks.

Step 2) Kui raadionupp on lisatud, muutke atribuuti "tekst".

• Minge atribuutide aknasse, klõpsates nuppu "Raadionupu juhtimine".
• Muutke raadionupu tekstiomaduseks "Mees".
• Korda sama sammu, et muuta see „Naissoost“-ks.
• Samuti muutke vastavate juhtelementide ID atribuudid väärtuseks rdMale ja rdFemale.

Kui olete ülaltoodud muudatused teinud, näete järgmist väljundit.

Väljund:-

Väljundist on selgelt näha, et raadionupp lisati vormile.

Checkbox

Märkeruutu kasutatakse valikute loendi kuvamiseks, kus kasutaja saab valida mitu valikut. Vaatame allpool toodud näite abil, kuidas seda rakendada. Lisame oma veebivormidele kaks märkeruutu. Need märkeruudud pakuvad kasutajale valikuvõimalust õppida või mitte. C# või ASP.Net.

Step 1) Esimene samm on märkeruudu juhtelemendi lohistamine tööriistakastist veebivormile, nagu allpool näidatud.

Step 2) Kui märkeruudud on lisatud, muutke märkeruudu ID omadust.

• Minge atribuutide aknasse, klõpsates märkeruutu.
• Muutke vastavate juhtelementide ID atribuudid väärtuseks 'chkC' ja 'chkASP'.

Samuti muutke märkeruudu juhtelemendi teksti atribuudiks "C#". Tehke sama ka teise märkeruudu juhtelemendi puhul ja muutke see väärtuseks "ASP.Net".

1. Muutke märkeruudu ID atribuut väärtuseks 'chkASP'.

2. Muutke märkeruudu ID omaduseks chkC.

Kui olete ülaltoodud muudatused teinud, näete järgmist väljundit.

Väljund:-

Väljundist on selgelt näha, et märkeruudud lisati vormile.

Button

Nuppu kasutatakse selleks, et kasutaja saaks klõpsata nupul, mis seejärel alustaks vormi töötlemist. Vaatame, kuidas me saame seda meie praeguse näite abil rakendada, nagu allpool näidatud. Lisame lihtsa nupu nimega „Esita“. Seda kasutatakse kogu vormil oleva teabe esitamiseks.

Step 1) Esimene samm on nupu juhtelemendi lohistamine tööriistakastist veebivormile, nagu allpool näidatud.

Step 2) Kui nupp on lisatud, minge atribuutide aknasse, klõpsates nupu juhtnupul. Muutke nupu juhtelemendi teksti atribuudiks Esita. Samuti muutke nupu ID atribuudiks "btnSubmit".

Kui olete ülaltoodud muudatused teinud, näete järgmist väljundit.

Väljund:-

Väljundist on selgelt näha, et nupp lisati vormile.

Sündmuste töötleja ASP.Netis

Veebivormiga töötades saate juhtelementidesse sündmusi lisada. Sündmus on miski, mis juhtub toimingu sooritamisel. Ilmselt kõige tavalisem toiming on vormil nupu klõpsamine.

Veebivormides saate lisada koodi vastavale aspx.cs failile. Seda koodi saab kasutada teatud toimingute tegemiseks, kui vormil nuppu vajutatakse. See on Web Formsis üldiselt kõige levinum sündmus. Vaatame, kuidas seda saavutada.

Teeme selle lihtsaks. Lihtsalt lisage nupu juhtelemendile sündmus, et kuvada kasutaja sisestatud nimi. Selle saavutamiseks järgime alltoodud samme.

Step 1) Kõigepealt peate topeltklõpsama veebivormi nuppu. See kuvab Visual Studio nupu sündmuse koodi.

Visual Studio lisab btnSubmit_Click sündmuse automaatselt, kui topeltklõpsate veebivormide kujundajas nuppu.

Step 2) Lisame nüüd saatmissündmusele koodi, et kuvada nime tekstikasti väärtus ja kasutaja valitud asukoht.

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

1. Ülaltoodud koodirida teeb kõige lihtsama asja. See võtab tekstivälja juhtelemendi Name väärtuse ja saadab selle kliendile Response objekti kaudu. Seega, kui soovite sisestada stringi „Guru99” nime tekstikastis, siis txtName.Text väärtus oleks 'Guru99'.
2. Järgmine koodirida võtab loendikastist valitud väärtuse atribuudi 'lstLocation.SelectedItem.Text' kaudu. Seejärel kirjutab see väärtuse meetodi Response.Write abil kliendile tagasi.
3. Lõpuks muudame kõik vormil olevad juhtelemendid nähtamatuks. Kui me seda ei tee, kuvatakse kõik juhtelemendid ja meie vastuseväärtused koos. Tavaliselt, kui inimene sisestab vormile kogu teabe, näiteks nime, asukoha, soo jne, peaks järgmisel lehel olema ainult see teave, mida ei sisestatud. Kasutaja ei soovi nime, soo ja asukoha juhtelemente uuesti näha. Kuid ASP.Net ei tea seda ja seetõttu kuvab see vaikimisi uuesti kõik juhtelemendid, kui kasutaja klõpsab nuppu „Esita“. Seega peame kirjutama koodi, mis tagab, et kõik juhtelemendid on peidetud, et kasutaja näeks ainult soovitud väljundit.

Kui olete ülaltoodud muudatused teinud, näete järgmist väljundit.

Väljund:-

Väljundekraanil tehke järgmised toimingud:

1. Anna nimi Guru99 nime tekstikastis.
2. Valige asukoht Bangalore'i loendikastist.
3. Klõpsake nuppu Esita.

Kui sa seda teed, näed sa 'GuruLehel kuvatakse „99” ja asukohta „Bangalore”.

KKK