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

ASP.Neti juhtelementide lisamine veebivormidele

ASP.Netil on võimalus lisada vormile juhtelemente, nagu tekstikastid ja sildid.

Vaatame teisi veebivormide jaoks saadaolevaid juhtelemente ja vaatame mõningaid nende ühiseid omadusi.

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

• Paremklõpsake Solution Exploreris faili Demo.aspx ja
• Valige menüükäsk Kuva kujundaja.

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

Nüüd alustame oma juhtelementide ükshaaval lisamist

Sildi kontroll

Sildi juhtelementi kasutatakse vormil kasutajale teksti või sõnumi kuvamiseks. Sildi juhtelementi kasutatakse tavaliselt koos teiste juhtelementidega. Levinud näited on see, kus koos tekstikasti juhtelemendiga lisatakse silt. Silt annab kasutajale vihje selle kohta, mida tekstikasti oodatakse. Vaatame, kuidas saame seda rakendada allpool toodud näite abil. Kasutame silti nimega "nimi". Seda kasutatakse koos tekstikasti juhtelementidega, mis lisatakse hilisemas jaotises.

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

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

1. Minge atribuutide aknasse, paremklõpsates sildi juhtelemendil
2. Valige menüü Atribuudid

Step 3) Muutke atribuutide aknas atribuudi Tekst nimeks Nimi

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 lohistada tekstikasti juhtelement tööriistakastist veebivormile, nagu allpool näidatud

Allpool on näha, kuidas see vormikujundajas välja näeb, kui tekstikasti juhtelement on vormil

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

• Minge atribuutide aknasse, paremklõpsates tekstikasti juhtelemendil ja
• Seejärel valige omadused
• Muutke tekstikasti atribuudi id 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 loendikasti juhtelemendi lohistamine tööriistakastist veebivormile, nagu allpool näidatud

Step 2) Kui lohistate loendikasti vormi, kuvatakse eraldi külgmenüü. Selles menüüs valige 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. Mangalore'i ja Hyderabadi loendiüksuste lisamiseks korrake samme 1 ja 2.
3. Klõpsake nuppu OK

Step 4) Minge atribuutide aknasse ja muutke juhtelemendi ID atribuudi väärtuseks lstAsukoht.

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

Väljund:-

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

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 tõmmata raadionupu juhtelement tööriistakastist veebivormile. (vt pilti allpool). Lisage kindlasti 2 raadionuppu, üks valiku „Mees” ja teine ​​„Naine” jaoks.

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

• Minge atribuutide aknasse, klõpsates nuppu "Raadionupu juhtimine".
• Muutke raadionupu tekstiomaduseks "Mees".
• Korrake sama sammu, et muuta see olekuks „Naine”.
• 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 on vormile lisatud

Checkbox

Märkeruutu kasutatakse valikute loendi esitamiseks, milles kasutaja saab valida mitu valikut. Vaatame, kuidas saame seda rakendada allpool toodud näite abil. Lisame oma veebivormidele 2 märkeruutu. Need märkeruudud annavad kasutajale võimaluse valida, kas ta soovib õppida C# või ASP.Net.

Step 1) Esimene samm on lohistada märkeruudu juhtelement tööriistakastist veebivormile, nagu allpool näidatud

Step 2) Kui märkeruudud on lisatud, muutke märkekasti ID atribuudiks "chkASP".

• 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. Muuda märkekasti ID atribuudiks 'chkASP'

2. Muutke märkeruudu ID atribuudiks chkC

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

Väljund:-

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

Button

Nuppu kasutatakse selleks, et võimaldada kasutajal klõpsata nupul, mis seejärel alustab vormi töötlemist. Vaatame, kuidas saame seda rakendada meie praeguse näitega, nagu allpool näidatud. Lisame lihtsa nupu nimega "Esita". Seda kasutatakse kogu vormil oleva teabe esitamiseks.

Step 1) Esimene samm on lohistada nupu juhtelement 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 sündmuse btnSubmit_Click automaatselt, kui topeltklõpsate veebivormide kujundaja 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, txtName väärtus. Tekst oleks 'Guru99'.
2. Järgmine koodirida võtab atribuudi „lstLocation.SelectedItem.text” kaudu loendikasti valitud väärtuse. Seejärel kirjutab see selle väärtuse meetodi Response.Write kaudu kliendile tagasi.
3. Lõpuks muudame kõik vormi juhtelemendid nähtamatuks. Kui me seda ei tee, kuvatakse kõik juhtelemendid ja meie vastuse väärtused koos. Tavaliselt, kui inimene sisestab vormile kogu teabe, nagu nimi, asukoht, sugu jne. Järgmine leht kuvatakse kasutajale peaks sisaldama ainult seda teavet, mida pole 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õiki juhtelemente, kui kasutaja klõpsab nuppu Esita. Seetõttu peame kirjutama koodi tagamaks, et kõik juhtnupud on peidetud, nii et kasutaja näeks lihtsalt soovitud väljundit.

Kui teete ülaltoodud muudatused, näete järgmist väljundit

Väljund:-

Tehke kuval Väljund järgmised sammud

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

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

kokkuvõte

• In ASP.Net, saate vormidele lisada standardseid juhtelemente, nagu sildid, tekstikastid, loendikastid jne.
• Iga juhtelemendiga võib olla seotud sündmus. Kõige tavalisem sündmus on nupu klõpsamise sündmus. Seda kasutatakse siis, kui teavet on vaja veebiserverisse saata.