ASP.NET vezérlők: EllenőrizzeBox, RadioButton, ListBox

ASP.Net vezérlők hozzáadása a webes űrlapokhoz

Az ASP.Net képes vezérlőket hozzáadni egy űrlaphoz, például szövegdobozokat és címkéket.

Nézzük meg a webes űrlapokhoz elérhető egyéb vezérlőket, és ismerjük meg néhány közös tulajdonságukat.

Példánkban létrehozunk egy űrlapot, amely a következő funkciókkal rendelkezik.

1. Az a képesség, hogy a felhasználó beírja a nevét.
2. Lehetőség a felhasználó lakóhelyének városának kiválasztására.
3. Az a lehetőség, hogy a felhasználó megadhat egy lehetőséget a nemhez.
4. Lehetőség olyan kurzus kiválasztására, amelyet a felhasználó el akar tanulni. Mindkettőre lesz választási lehetőség C# és az ASP.Net.

Nézzük meg részletesen az egyes vezérlőket. Adjuk hozzá őket az űrlap elkészítéséhez a fent említett funkciókkal.

Step 1) Az első lépés az Űrlaptervező megnyitása a Demo webes űrlaphoz. Miután ezt megtette, áthúzhatja a vezérlőket az eszköztárból a Webes űrlap.

A Designer webes űrlap megnyitásához:

• Kattintson jobb gombbal a Demo.aspx fájlra a Megoldáskezelőben, és
• Válassza a View Designer menüpontot.

Miután végrehajtotta a fenti lépést, látni fogja az űrlaptervezőt az alábbiak szerint.

Most kezdjük el egyesével hozzáadni a vezérlőinket.

Címkeellenőrzés

A címke vezérlőelem szöveg vagy üzenet megjelenítésére szolgál a felhasználó számára az űrlapon. A címke vezérlőelemet általában más vezérlőelemekkel együtt használják. Gyakori példa erre, amikor egy címkét adnak hozzá a szövegdoboz vezérlőelemmel együtt. A címke jelzi a felhasználónak, hogy mivel kell kitöltenie a szövegdobozt. Nézzük meg, hogyan valósíthatjuk meg ezt az alábbi példán keresztül. Egy „név” nevű címkét fogunk használni. Ezt a szövegdoboz vezérlőelemekkel együtt fogjuk használni, amelyeket a későbbi szakaszban adunk hozzá.

Step 1) Az első lépés, hogy a „címke” vezérlőelemet az eszköztárból a webes űrlapra húzzuk, az alábbiak szerint.

Step 2) A címke hozzáadása után kövesse az alábbi lépéseket.

1. A címkevezérlőre jobb gombbal kattintva lépjen a tulajdonságok ablakba.
2. Válassza a Tulajdonságok menüpontot.

Step 3) A tulajdonságok ablakban módosítsa a Text tulajdonság értékét Névre.

Hasonlóképpen módosítsa a vezérlő ID tulajdonság értékét is lblName értékre. Ha értelmes azonosítót adunk meg a vezérlőknek, könnyebbé válik a hozzáférésük a kódolási szakaszban. Ez az alábbiakban látható.

Miután elvégezte a fenti módosításokat, a következő kimenetet fogja látni.

Kimenet:-

Látni fogja, hogy a Név címke megjelenik a webes űrlapon.

Szövegdoboz

A szövegdoboz segítségével a felhasználó beírhat szöveget a webes űrlapalkalmazásba. Nézzük meg, hogyan tudjuk ezt megvalósítani az alábbi példán keresztül. Hozzáadunk egy szövegmezőt az űrlaphoz, amelyben a felhasználó megadhatja a nevét.

Step 1) Az első lépés, hogy a szövegdoboz-vezérlőt az eszköztárból a webes űrlapra húzzuk, az alábbiak szerint.

Az alábbiakban látható, hogyan nézne ki ez az űrlaptervezőben, miután a Szövegdoboz vezérlőelem az űrlapon van.

Step 2) A szövegdoboz hozzáadása után módosítania kell az azonosító tulajdonságot.

• A Tulajdonságok ablakhoz kattintson a jobb gombbal a Szövegdoboz vezérlőre, és
• Válassza a Tulajdonságok lehetőséget, majd
• Módosítsa a szövegdoboz ID tulajdonságát txtName értékre.

A fenti módosítások elvégzése után a következő kimenet jelenik meg.

Kimenet:-

Listadoboz

A Listbox az elemek listájának megjelenítésére szolgál a webes űrlapon. Nézzük meg, hogyan tudjuk ezt megvalósítani az alábbi példán keresztül. Hozzáadunk egy listamezőt az űrlaphoz néhány város helyének tárolására.

Step 1) Az első lépés, hogy a listamező vezérlőjét az eszköztárból a webűrlapra húzzuk, az alábbiak szerint.

Step 2) Miután áthúzta a listamezőt az űrlapra, egy külön oldalsó menü jelenik meg. Ebben a menüben válassza az „Elemek szerkesztése” menüpontot.

Step 3) Ekkor megjelenik egy párbeszédpanel, amelyben hozzáadhatja a listaelemeket a listához.

1. Kattintson a Hozzáadás gombra egy listaelem hozzáadásához.
2. Adjon nevet a listaelem szöveges értékének – esetünkben Mumbai. Ismételje meg az 1. és 2. lépést Mangalore és Hyderabad listaelemeinek hozzáadásához.
3. Kattintson az OK gombra.

Step 4) Lépjen a tulajdonságok ablakba, és módosítsa a vezérlő ID tulajdonságának értékét lstLocation értékre.

Miután elvégezte a fenti módosításokat, a következő kimenetet fogja látni.

Kimenet:-

A kimenetből jól látható, hogy a Listbox hozzáadódott az űrlaphoz.

Rádiógomb

A rádiógomb segítségével megjelenítheti az elemek listáját, amelyek közül a felhasználó kiválaszthat egyet. Nézzük meg, hogyan tudjuk ezt megvalósítani az alábbi példán keresztül. Hozzáadunk egy rádiógombot a férfi/nő opcióhoz.

Step 1) Az első lépés, hogy a „radiobutton” vezérlőt az eszköztárból a webes űrlapra húzod (lásd az alábbi képet). Ügyelj arra, hogy két választógombot adj hozzá, egyet a „Férfi”, a másikat pedig a „Nő” opcióhoz.

Step 2) Miután hozzáadta a Radiobuttont, módosítsa a "text" tulajdonságot.

• A "Radiobutton control" gombra kattintva lépjen a tulajdonságok ablakába.
• Módosítsa a rádiógomb szövegtulajdonságát „Férfi”-re.
• Ismételje meg ugyanezt a lépést a „Nő” értékre való módosításhoz.
• Ezenkívül módosítsa a megfelelő vezérlők azonosító tulajdonságait rdMale és rdFemale értékre.

Miután elvégezte a fenti módosításokat, a következő kimenetet fogja látni.

Kimenet:-

A kimenetből jól látható, hogy a választógomb hozzáadódott az űrlaphoz.

jelölőnégyzetet

Egy jelölőnégyzet segítségével egy listát jeleníthetünk meg a lehetőségekről, amelyek közül a felhasználó több lehetőséget is választhat. Nézzük meg, hogyan valósíthatjuk meg ezt egy példával az alábbi példán keresztül. Két jelölőnégyzetet fogunk hozzáadni a webes űrlapjainkhoz. Ezek a jelölőnégyzetek lehetőséget biztosítanak a felhasználónak arra vonatkozóan, hogy szeretne-e tanulni. C# vagy ASP.Net.

Step 1) Az első lépés, hogy a jelölőnégyzet vezérlőjét az eszköztárból a webes űrlapra húzzuk, az alábbiak szerint.

Step 2) Miután hozzáadta a jelölőnégyzeteket, módosítsa a jelölőnégyzet azonosító tulajdonságát.

• A Jelölőnégyzet vezérlőelemre kattintva lépjen a tulajdonságok ablakába.
• Módosítsa a megfelelő vezérlők azonosító tulajdonságait „chkC” és „chkASP” értékre.

Ezenkívül módosítsa a Checkbox vezérlő szövegtulajdonságát 'C#'-ra. Tegye ugyanezt a másik Checkbox vezérlővel is, és módosítsa „ASP.Net”-re.

1. Módosítsa a jelölőnégyzet azonosító tulajdonságát 'chkASP' értékre.

2. Módosítsa a jelölőnégyzet azonosító tulajdonságát chkC-re.

Miután elvégezte a fenti módosításokat, a következő kimenetet fogja látni.

Kimenet:-

A kimenetből jól látható, hogy a jelölőnégyzetek hozzáadódtak az űrlaphoz.

Gomb

Egy gombbal a felhasználó rákattinthat, ami elindítja az űrlap feldolgozását. Nézzük meg, hogyan valósíthatjuk meg ezt a jelenlegi példánkkal, az alábbiak szerint. Hozzáadunk egy egyszerű gombot, a „Küldés” gombot. Ezzel elküldhetjük az űrlapon található összes információt.

Step 1) Az első lépés, hogy a gombvezérlőt az eszköztárból a webes űrlapra húzzuk, az alábbiak szerint.

Step 2) A gomb hozzáadása után lépjen a tulajdonságok ablakba a gombvezérlőre kattintva. Módosítsa a gombvezérlő szövegtulajdonságát Elküldés értékre. Ezenkívül módosítsa a gomb ID tulajdonságát „btnSubmit” értékre.

Miután elvégezte a fenti módosításokat, a következő kimenetet fogja látni.

Kimenet:-

A kimenetből jól látható, hogy a gomb hozzá lett adva az űrlaphoz.

Eseménykezelő az ASP.Netben

Amikor webes űrlappal dolgozik, eseményeket adhat hozzá a vezérlőkhöz. Az esemény olyan dolog, ami akkor történik, amikor egy cselekvést végrehajtanak. Valószínűleg a leggyakoribb művelet az űrlapon lévő gombra kattintás.

A webes űrlapokon kódot adhat hozzá a megfelelő aspx.cs fájlhoz. Ez a kód használható bizonyos műveletek végrehajtására, amikor egy gombot megnyomnak az űrlapon. Általában ez a leggyakoribb esemény a Web Forms alkalmazásban. Lássuk, hogyan érhetjük el ezt.

Ezt leegyszerűsítjük. Csak adjon hozzá egy eseményt a gombvezérlőhöz, hogy megjelenítse a felhasználó által beírt nevet. Ennek eléréséhez kövessük az alábbi lépéseket.

Step 1) Először duplán kell kattintania a gombra a webes űrlapon. Ezzel megjelenik a gomb eseménykódja a Visual Studio-ban.

A btnSubmit_Click eseményt a Visual Studio automatikusan hozzáadja, amikor duplán kattintasz a gombra a webes űrlaptervezőben.

Step 2) Adjunk hozzá kódot az elküldési eseményhez, hogy megjelenítsük a név szövegdobozának értékét és a felhasználó által kiválasztott helyet.

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 Magyarázat:-

1. A fenti kódsor a legegyszerűbb dolgot teszi. Fogadja a Name szövegdoboz vezérlőelem értékét, és elküldi azt a kliensnek a Response objektumon keresztül. Tehát, ha a következő karakterláncot szeretnéd beírni: „Guru99” a név szövegmezőben, akkor a txtName.Text értéke ' lenneGuru99'.
2. A kód következő sora a listamező kiválasztott értékét az 'lstLocation.SelectedItem.Text' tulajdonságon keresztül veszi át. Ezután a Response.Write metódus segítségével visszaírja ezt az értéket a kliensnek.
3. Végül láthatatlanná tesszük az űrlap összes vezérlőjét. Ha ezt nem tesszük meg, akkor az összes vezérlő és a válaszértékek együtt jelennek meg. Normális esetben, amikor egy személy megadja az űrlapon az összes információt, például a nevet, a helyet, a nemet stb., a felhasználónak megjelenő következő oldalon csak a ki nem adott információk jelennek meg. A felhasználó nem szeretné újra látni a név, a nem és a hely vezérlőit. Az ASP.Net azonban ezt nem tudja, ezért alapértelmezés szerint újra megjeleníti az összes vezérlőt, amikor a felhasználó a Küldés gombra kattint. Ezért kódot kell írnunk, amely biztosítja, hogy az összes vezérlő rejtve legyen, így a felhasználó csak a kívánt kimenetet látja.

Miután elvégezte a fenti módosításokat, a következő kimenetet fogja látni.

Kimenet:-

A Kimenet képernyőn hajtsa végre a következő lépéseket:

1. Adj nevet Guru99 a név szövegmezőjében.
2. Válasszon egy helyszínt a Bangalore listából.
3. Kattintson a Küldés gombra.

Ha ezt megteszed, látni fogod, hogy 'Guru99' és a helyszín 'Bangalore' jelenik meg az oldalon.

GYIK