ASP.NET-kontroller: KontrolleraBox, RadioButton, ListaBox

Lägga till ASP.Net-kontroller till webbformulär

ASP.Net har möjlighet att lägga till kontroller i ett formulär, till exempel textrutor och etiketter.

Låt oss titta på de andra kontrollerna som är tillgängliga för webbformulär och se några av deras vanliga egenskaper.

I vårt exempel kommer vi att skapa ett formulär som kommer att ha följande funktionalitet.

1. Möjligheten för användaren att ange sitt namn.
2. Ett alternativ att välja den stad där användaren bor.
3. Möjligheten för användaren att ange ett alternativ för könet.
4. Ett alternativ att välja en kurs som användaren vill lära sig. Det kommer att finnas val för båda C# och ASP.Net.

Låt oss titta på varje kontroll i detalj. Låt oss lägga till dem för att bygga formuläret med ovan nämnda funktionalitet.

Steg 1) Det första steget är att öppna formulärdesignern för demowebbformuläret. När du har gjort detta kommer du att kunna dra kontroller från verktygslådan till Webbformulär.

Så här öppnar du webbformuläret för Designer:

• Högerklicka på filen Demo.aspx i Solution Explorer och
• Välj menyalternativet View Designer.

När du har utfört steget ovan kommer du att kunna se din Form Designer som visas nedan.

Nu ska vi börja lägga till våra kontroller en efter en.

Etikettkontroll

Etikettkontrollen används för att visa en text eller ett meddelande till användaren i formuläret. Etikettkontrollen används normalt tillsammans med andra kontroller. Ett vanligt exempel är när en etikett läggs till tillsammans med textrutekontrollen. Etiketten ger användaren en indikation på vad som förväntas fyllas i textrutan. Låt oss se hur vi kan implementera detta med ett exempel som visas nedan. Vi kommer att använda en etikett som heter "namn". Denna kommer att användas tillsammans med textrutekontrollerna, som kommer att läggas till i det senare avsnittet.

Steg 1) Det första steget är att dra kontrollen "etikett" till webbformuläret från verktygslådan som visas nedan.

Steg 2) När etiketten har lagts till följer du följande steg.

1. Gå till egenskapsfönstret genom att högerklicka på etikettkontrollen.
2. Välj menyalternativet Egenskaper.

Steg 3) Ändra värdet för egenskapen Text till Namn i egenskapsfönstret.

Ändra också ID-egenskapsvärdet för kontrollen till lblName. Genom att ange ett meningsfullt ID för kontroller blir det lättare att komma åt dem under kodningsfasen. Detta visas nedan.

När du har gjort ovanstående ändringar kommer du att se följande utdata.

Produktion:-

Du kommer att se att namnetiketten visas på webbformuläret.

Textruta

En textruta används för att låta en användare skriva in viss text i webbformulärapplikationen. Låt oss se hur vi kan implementera detta med ett exempel som visas nedan. Vi kommer att lägga till en textruta i formuläret där användaren kan ange sitt namn.

Steg 1) Det första steget är att dra textrutekontrollen till webbformuläret från verktygslådan som visas nedan.

Nedan visas hur detta skulle se ut i formulärdesignern när textrutekontrollen finns på formuläret.

Steg 2) När textrutan har lagts till måste du ändra ID-egenskapen.

• Gå till egenskapsfönstret genom att högerklicka på textrutekontrollen och
• Välj Egenskaper, sedan
• Ändra ID-egenskapen för textrutan till txtName.

När du har gjort ändringarna ovan ser du följande utdata.

Produktion:-

Listruta

En listbox används för att visa en lista över objekt på webbformuläret. Låt oss se hur vi kan implementera detta med ett exempel som visas nedan. Vi kommer att lägga till en listruta i formuläret för att lagra några stadsplatser.

Steg 1) Det första steget är att dra listrutekontrollen till webbformuläret från verktygslådan som visas nedan.

Steg 2) När du drar listrutan till formuläret visas en separat sidomeny. I den här menyn väljer du menyn "Redigera objekt".

Steg 3) Du kommer nu att presenteras med en dialogruta där du kan lägga till listobjekten i listrutan.

1. Klicka på knappen Lägg till för att lägga till ett listobjekt.
2. Ge ett namn för textvärdet för listobjektet – i vårt fall Mumbai. Upprepa steg 1 och 2 för att lägga till listobjekt för Mangalore och Hyderabad.
3. Klicka på OK-knappen.

Steg 4) Gå till egenskapsfönstret och ändra ID-egenskapsvärdet för kontrollen till lstLocation.

När du har gjort ovanstående ändringar kommer du att se följande utdata.

Produktion:-

Från utdata kan du tydligt se att listboxen har lagts till i formuläret.

Radio knapp

En alternativknapp används för att visa en lista med objekt som användaren kan välja en av. Låt oss se hur vi kan implementera detta med ett exempel som visas nedan. Vi kommer att lägga till en alternativknapp för ett manligt/kvinnligt alternativ.

Steg 1) Det första steget är att dra kontrollen "radioknapp" till webbformuläret från verktygslådan (se bilden nedan). Se till att lägga till två radioknappar, en för alternativet "Man" och den andra för "Kvinna".

Steg 2) När radioknappen har lagts till, ändra egenskapen 'text'.

• Gå till egenskapsfönstret genom att klicka på "Radioknappkontroll".
• Ändra textegenskapen för radioknappen till "Man".
• Upprepa samma steg för att ändra det till 'Kvinna'.
• Ändra också ID-egenskaperna för respektive kontroller till rdMale och rdFemale.

När du har gjort ovanstående ändringar kommer du att se följande utdata.

Produktion:-

Från utdata kan du tydligt se att radioknappen har lagts till i formuläret.

Kryssruta

En kryssruta används för att visa en lista med alternativ där användaren kan välja flera alternativ. Låt oss se hur vi kan implementera detta med ett exempel som visas nedan. Vi lägger till två kryssrutor i våra webbformulär. Dessa kryssrutor ger användaren ett alternativ om de vill lära sig C# eller ASP.Net.

Steg 1) Det första steget är att dra kryssrutekontrollen till webbformuläret från verktygslådan som visas nedan.

Steg 2) När kryssrutorna har lagts till ändrar du egenskapen för kryssrutes-ID.

• Gå till egenskapsfönstret genom att klicka på kryssrutan.
• Ändra ID-egenskaperna för respektive kontroller till 'chkC' och 'chkASP'.

Ändra också textegenskapen för kryssrutan till 'C#'. Gör samma sak för den andra Checkbox-kontrollen och ändra den till 'ASP.Net'.

1. Ändra ID-egenskapen för kryssrutan till 'chkASP'.

2. Ändra ID-egenskapen för kryssrutan till chkC.

När du har gjort ovanstående ändringar kommer du att se följande utdata.

Produktion:-

Från utdata kan du tydligt se att kryssrutorna har lagts till i formuläret.

Knappen

En knapp används för att låta användaren klicka på en knapp som sedan startar bearbetningen av formuläret. Låt oss se hur vi kan implementera detta med vårt nuvarande exempel som visas nedan. Vi kommer att lägga till en enkel knapp som heter knappen "Skicka". Denna kommer att användas för att skicka in all information i formuläret.

Steg 1) Det första steget är att dra knappkontrollen till webbformuläret från verktygslådan som visas nedan.

Steg 2) När knappen har lagts till går du till egenskapsfönstret genom att klicka på knappkontrollen. Ändra textegenskapen för knappkontrollen till Skicka. Ändra också ID-egenskapen för knappen till 'btnSubmit'.

När du har gjort ovanstående ändringar kommer du att se följande utdata.

Produktion:-

Från utgången kan du tydligt se att knappen lades till i formuläret.

Händelsehanterare i ASP.Net

När du arbetar med ett webbformulär kan du lägga till händelser i kontroller. En händelse är något som händer när en handling utförs. Den förmodligen vanligaste åtgärden är att klicka på en knapp på ett formulär.

I webbformulär kan du lägga till kod i motsvarande aspx.cs-fil. Denna kod kan användas för att utföra vissa åtgärder när en knapp trycks på formuläret. Detta är i allmänhet den vanligaste händelsen i webbformulär. Låt oss se hur vi kan uppnå detta.

Vi ska göra detta enkelt. Lägg bara till en händelse till knappkontrollen för att visa namnet som angavs av användaren. Låt oss följa stegen nedan för att uppnå detta.

Steg 1) Först måste du dubbelklicka på knappen på webbformuläret. Detta kommer att ta fram händelsekoden för knappen i Visual Studio.

Händelsen btnSubmit_Click läggs till automatiskt av Visual Studio när du dubbelklickar på knappen i webbformulärsdesignern.

Steg 2) Låt oss nu lägga till kod till inlämningshändelsen för att visa namntextrutans värde och platsen som valts av användaren.

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 Förklaring:-

1. Ovanstående kodrad gör det enklaste. Den tar värdet från textrutekontrollen Name och skickar det till klienten via Response-objektet. Så om du vill ange strängen "Guru99” i namntextrutan, skulle värdet för txtName.Text vara 'Guru99 '.
2. Nästa kodrad tar det valda värdet från listboxen via egenskapen 'lstLocation.SelectedItem.Text'. Den skriver sedan tillbaka detta värde till klienten via Response.Write-metoden.
3. Slutligen gör vi alla kontroller i formuläret osynliga. Om vi ​​inte gör detta kommer alla kontroller plus våra svarsvärden att visas tillsammans. Normalt sett, när en person anger all information i formuläret, såsom namn, plats, kön etc., bör nästa sida som visas för användaren bara innehålla den information som inte angavs. Användaren vill inte se kontrollerna för namn, kön och plats igen. Men ASP.Net vet inte detta, och därför kommer de som standard att visa alla kontroller igen när användaren klickar på knappen Skicka. Därför måste vi skriva kod för att säkerställa att alla kontroller är dolda så att användaren bara ser önskad utdata.

När du har gjort ovanstående ändringar kommer du att se följande utdata.

Produktion:-

Utför följande steg på skärmen Utdata:

1. Ange ett namn på Guru99 i namntextrutan.
2. Välj en plats i listrutan för Bangalore.
3. Klicka på knappen Skicka.

När du gör detta kommer du att se 'Guru99' och platsen 'Bangalore' visas på sidan.

Vanliga frågor