ASP.NET-besturingselementen: controlerenBox, Keuzerondje, LijstBox

ASP.Net-besturingselementen toevoegen aan webformulieren

ASP.Net biedt de mogelijkheid om besturingselementen zoals tekstvakken en labels aan een formulier toe te voegen.

Laten we eens kijken naar de andere besturingselementen die beschikbaar zijn voor webformulieren en naar enkele van hun gemeenschappelijke eigenschappen.

In ons voorbeeld maken we één formulier met de volgende functionaliteit.

1. De mogelijkheid voor de gebruiker om zijn naam in te voeren.
2. Een optie om de stad te kiezen waar de gebruiker woont.
3. De mogelijkheid voor de gebruiker om een ​​optie voor het geslacht in te voeren.
4. Een optie om een ​​cursus te kiezen die de gebruiker wil leren. Er zullen keuzes zijn voor beide C# en ASP.Net.

Laten we elk besturingselement in detail bekijken. Laten we ze toevoegen om het formulier te bouwen met de bovengenoemde functionaliteit.

Stap 1) De eerste stap is om de Forms Designer voor het Demo webformulier te openen. Zodra u dit doet, kunt u besturingselementen van de toolbox naar de webformulier.

Om het webformulier van de ontwerper te openen:

• Klik met de rechtermuisknop op het bestand Demo.aspx in de Solution Explorer en
• Kies de menuoptie Bekijk Designer.

Zodra u de bovenstaande stap heeft uitgevoerd, kunt u uw Formulierontwerper zien, zoals hieronder weergegeven.

Laten we nu beginnen met het één voor één toevoegen van onze bedieningselementen.

Labelcontrole

Het labelbesturingselement wordt gebruikt om tekst of een bericht aan de gebruiker op het formulier weer te geven. Het labelbesturingselement wordt doorgaans samen met andere besturingselementen gebruikt. Een veelvoorkomend voorbeeld is het toevoegen van een label aan een tekstvak. Het label geeft de gebruiker een indicatie van wat er in het tekstvak moet worden ingevuld. Laten we eens kijken hoe we dit kunnen implementeren met een voorbeeld hieronder. We gebruiken een label met de naam 'naam'. Dit wordt gebruikt in combinatie met de tekstvakken, die in een later gedeelte worden toegevoegd.

Stap 1) De eerste stap is het slepen van het 'label'-besturingselement vanuit de toolbox naar het webformulier, zoals hieronder weergegeven.

Stap 2) Nadat u het label hebt toegevoegd, volgt u de volgende stappen.

1. Open het eigenschappenvenster door met de rechtermuisknop op het labelbesturingselement te klikken.
2. Kies de menuoptie Eigenschappen.

Stap 3) Wijzig in het eigenschappenvenster de waarde van de eigenschap Tekst naar Naam.

Wijzig op dezelfde manier ook de ID-eigenschapswaarde van het besturingselement in lblName. Door een betekenisvolle ID aan de bedieningselementen op te geven, wordt het gemakkelijker om er toegang toe te krijgen tijdens de codeerfase. Dit is hieronder weergegeven.

Nadat u de bovenstaande wijzigingen hebt aangebracht, ziet u de volgende uitvoer.

Uitgang: -

U zult zien dat het naamlabel op het webformulier verschijnt.

Tekstvak

Een tekstvak wordt gebruikt om een ​​gebruiker toe te staan ​​wat tekst in te voeren in de webformuliertoepassing. Laten we eens kijken hoe we dit kunnen implementeren met een voorbeeld hieronder. We voegen één tekstvak toe aan het formulier waarin de gebruiker zijn naam kan invoeren.

Stap 1) De eerste stap is het slepen van het tekstvakbesturingselement vanuit de toolbox naar het webformulier, zoals hieronder weergegeven.

Hieronder ziet u hoe dit er in de formulierontwerper uitziet zodra het tekstvakbesturingselement aan het formulier is toegevoegd.

Stap 2) Nadat het tekstvak is toegevoegd, moet u de ID-eigenschap wijzigen.

• Ga naar het eigenschappenvenster door met de rechtermuisknop op het tekstvakbesturingselement te klikken en
• Kies vervolgens Eigenschappen.
• Wijzig de ID-eigenschap van het tekstvak naar txtName.

Nadat u de bovenstaande wijzigingen hebt aangebracht, ziet u het volgende resultaat.

Uitgang: -

Keuzelijst

Een Listbox wordt gebruikt om een ​​lijst met items op het webformulier te tonen. Laten we eens kijken hoe we dit kunnen implementeren met een voorbeeld hieronder. We voegen een listbox toe aan het formulier om een ​​aantal stadslocaties op te slaan.

Stap 1) De eerste stap is het slepen van het keuzelijstbesturingselement vanuit de toolbox naar het webformulier, zoals hieronder weergegeven.

Stap 2) Zodra je de keuzelijst naar het formulier sleept, verschijnt er een apart zijmenu. Kies in dit menu de optie 'Items bewerken'.

Stap 3) Er verschijnt nu een dialoogvenster waarin u de lijstitems aan de keuzelijst kunt toevoegen.

1. Klik op de knop Toevoegen om een ​​lijstitem toe te voegen.
2. Geef een naam op voor de tekstwaarde van het lijstitem – in ons geval Mumbai. Herhaal stap 1 en 2 om lijstitems voor Mangalore en Hyderabad toe te voegen.
3. Klik op de knop OK.

Stap 4) Ga naar het eigenschappenvenster en wijzig de waarde van de eigenschap ID van het besturingselement in lstLocation.

Nadat u de bovenstaande wijzigingen hebt aangebracht, ziet u de volgende uitvoer.

Uitgang: -

Uit de uitvoer blijkt duidelijk dat de Listbox aan het formulier is toegevoegd.

Radio knop

Een keuzerondje wordt gebruikt om een ​​lijst met items weer te geven waaruit de gebruiker er één kan kiezen. Laten we eens kijken hoe we dit kunnen implementeren met het onderstaande voorbeeld. We zullen een keuzerondje toevoegen voor een man/vrouw-optie.

Stap 1) De eerste stap is het slepen van het keuzerondje (radiobutton) vanuit de toolbox naar het webformulier (zie onderstaande afbeelding). Zorg ervoor dat u twee keuzerondjes toevoegt: één voor de optie 'Man' en één voor 'Vrouw'.

Stap 2) Zodra het keuzerondje is toegevoegd, wijzigt u de eigenschap 'text'.

• Ga naar het eigenschappenvenster door op 'Keuzerondjesbediening' te klikken.
• Wijzig de teksteigenschap van het keuzerondje in 'Man'.
• Herhaal dezelfde stap om het te veranderen naar 'Vrouwelijk'.
• Wijzig ook de ID-eigenschappen van de respectieve besturingselementen in rdMale en rdFemale.

Nadat u de bovenstaande wijzigingen hebt aangebracht, ziet u de volgende uitvoer.

Uitgang: -

Uit de uitvoer blijkt duidelijk dat de keuzeknop aan het formulier is toegevoegd.

checkbox

Een selectievakje wordt gebruikt om een ​​lijst met opties te tonen waaruit de gebruiker meerdere keuzes kan maken. Laten we eens kijken hoe we dit kunnen implementeren met een voorbeeld hieronder. We voegen twee selectievakjes toe aan onze webformulieren. Deze selectievakjes geven de gebruiker de mogelijkheid om aan te geven of hij of zij meer wil leren. C# of ASP.Net.

Stap 1) De eerste stap is het slepen van het selectievakje vanuit de toolbox naar het webformulier, zoals hieronder weergegeven.

Stap 2) Nadat de selectievakjes zijn toegevoegd, wijzig je de eigenschap 'checkbox ID'.

• Ga naar het eigenschappenvenster door op het selectievakje te klikken.
• Wijzig de ID-eigenschappen van de respectievelijke besturingselementen in 'chkC' en 'chkASP'.

Wijzig ook de text-eigenschap van het Checkbox-besturingselement naar 'C#'. Doe hetzelfde voor het andere Checkbox-besturingselement en wijzig het naar 'ASP.Net'.

1. Wijzig de ID-eigenschap van het selectievakje naar 'chkASP'.

2. Wijzig de ID-eigenschap van het selectievakje naar chkC.

Nadat u de bovenstaande wijzigingen hebt aangebracht, ziet u de volgende uitvoer.

Uitgang: -

Uit de uitvoer blijkt duidelijk dat de selectievakjes aan het formulier zijn toegevoegd.

Knop

Een knop wordt gebruikt om de gebruiker de mogelijkheid te geven op een andere knop te klikken, waarna de verwerking van het formulier wordt gestart. Laten we eens kijken hoe we dit kunnen implementeren met ons huidige voorbeeld, zoals hieronder weergegeven. We voegen een eenvoudige knop toe met de naam 'Verzenden'. Deze knop wordt gebruikt om alle informatie in het formulier te verzenden.

Stap 1) De eerste stap is het slepen van de knopbesturing vanuit de toolbox naar het webformulier, zoals hieronder weergegeven.

Stap 2) Zodra de knop is toegevoegd, gaat u naar het eigenschappenvenster door op het knopbesturingselement te klikken. Wijzig de teksteigenschap van het knopbesturingselement in Verzenden. Wijzig ook de ID-eigenschap van de knop in 'btnSubmit'.

Nadat u de bovenstaande wijzigingen hebt aangebracht, ziet u de volgende uitvoer.

Uitgang: -

Uit de uitvoer kunt u duidelijk zien dat de knop aan het formulier is toegevoegd.

Gebeurtenishandler in ASP.Net

Wanneer u met een webformulier werkt, kunt u gebeurtenissen aan besturingselementen toevoegen. Een gebeurtenis is iets dat gebeurt wanneer een actie wordt uitgevoerd. Waarschijnlijk de meest voorkomende actie is het klikken op een knop op een formulier.

In webformulieren kunt u code toevoegen aan het bijbehorende aspx.cs-bestand. Deze code kan worden gebruikt om bepaalde acties uit te voeren wanneer er op een knop op het formulier wordt gedrukt. Dit is over het algemeen de meest voorkomende gebeurtenis in webformulieren. Laten we kijken hoe we dit kunnen bereiken.

We gaan dit eenvoudig maken. Voeg gewoon een gebeurtenis toe aan de knopbediening om de naam weer te geven die door de gebruiker is ingevoerd. Laten we de onderstaande stappen volgen om dit te bereiken.

Stap 1) Eerst moet u dubbelklikken op de knop op het webformulier. Dit zal de gebeurteniscode voor de knop in Visual Studio oproepen.

De gebeurtenis btnSubmit_Click wordt automatisch door Visual Studio toegevoegd wanneer u dubbelklikt op de knop in de webformulierenontwerper.

Stap 2) Laten we nu code toevoegen aan de submit-gebeurtenis om de waarde van het tekstvak 'naam' en de door de gebruiker gekozen locatie weer te geven.

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

1. De bovenstaande code doet het eenvoudigste. Het neemt de waarde van het tekstvak 'Naam' en stuurt deze via het Response-object naar de client. Dus als je de tekenreeks "GuruAls er '99' in het naamtekstvak staat, is de waarde van txtName.Text 'Guru99 '.
2. De volgende regel code haalt de geselecteerde waarde uit de lijstbox via de eigenschap 'lstLocation.SelectedItem.Text'. Vervolgens wordt deze waarde via de Response.Write-methode teruggestuurd naar de client.
3. Tot slot maken we alle besturingselementen op het formulier onzichtbaar. Als we dit niet doen, worden alle besturingselementen plus de responswaarden tegelijk weergegeven. Normaal gesproken, wanneer een gebruiker alle informatie op het formulier invult, zoals naam, locatie, geslacht, enz., zou de volgende pagina alleen de informatie moeten tonen die niet is ingevuld. De gebruiker wil de besturingselementen voor naam, geslacht en locatie niet opnieuw zien. Maar ASP.Net weet dit niet en toont daarom standaard alle besturingselementen opnieuw wanneer de gebruiker op de knop 'Verzenden' klikt. We moeten dus code schrijven om ervoor te zorgen dat alle besturingselementen verborgen zijn, zodat de gebruiker alleen de gewenste uitvoer ziet.

Nadat u de bovenstaande wijzigingen hebt aangebracht, ziet u de volgende uitvoer.

Uitgang: -

Voer in het uitvoerscherm de volgende stappen uit:

1. Geef een naam van Guru99 in het naamtekstvak.
2. Kies een locatie in de lijst met opties voor Bangalore.
3. Klik op de knop Verzenden.

Als je dit doet, zie je 'Guru'99' en de locatie 'Bangalore' worden op de pagina weergegeven.

Veelgestelde vragen