ASP.NET-besturingselementen: controlerenBox, Keuzerondje, LijstBox, Tekstvak, Label
Jacob Lee
ASP.Net-besturingselementen toevoegen aan webformulieren
Met ASP.Net kunt u besturingselementen aan een formulier toevoegen, zoals tekstvakken en labels.
Laten we eens kijken naar de andere besturingselementen die beschikbaar zijn voor webformulieren en enkele van hun gemeenschappelijke eigenschappen bekijken.
In ons voorbeeld maken we één formulier met de volgende functionaliteit.
- De mogelijkheid voor de gebruiker om zijn naam in te voeren.
- Een optie om de stad te kiezen waarin de gebruiker woont
- De mogelijkheid voor de gebruiker om een optie voor het geslacht in te voeren.
- 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 Designer-webformulier 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 besturingselementen
Labelcontrole
Het labelbesturingselement wordt gebruikt om een tekst of bericht weer te geven aan de gebruiker op het formulier. Het labelbesturingselement wordt normaal gesproken samen met andere besturingselementen gebruikt. Een veelvoorkomend voorbeeld is wanneer een label wordt toegevoegd samen met het tekstvakbesturingselement. 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 genaamd 'naam'. Dit wordt gebruikt in combinatie met de tekstvakbesturingselementen, die later worden toegevoegd.
Stap 1) De eerste stap is om het 'label'-besturingselement vanuit de werkbalk naar het webformulier te slepen, zoals hieronder weergegeven.
Stap 2) Nadat u het label hebt toegevoegd, volgt u de volgende stappen.
- Ga naar het eigenschappenvenster door met de rechtermuisknop op het labelbesturingselement te klikken
- Kies de menuoptie Eigenschappen
Stap 3) Wijzig in het eigenschappenvenster de naam van de eigenschap Tekst in 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.
Zodra 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 om het tekstvakbesturingselement vanuit de werkbalk naar het webformulier te slepen, zoals hieronder weergegeven
Hieronder ziet u hoe dit eruit zou zien in de formulierontwerper zodra het besturingselement Tekstvak op het formulier staat
Stap 2) Nadat het tekstvak is toegevoegd, moet u de ID-eigenschap wijzigen.
- Ga naar het eigenschappenvenster door met de rechtermuisknop op het besturingselement Tekstvak te klikken en
- Kies dan 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 om het besturingselement van de keuzelijst vanuit de werkbalk naar het webformulier te slepen, zoals hieronder weergegeven
Stap 2) Zodra u de keuzelijst naar het formulier sleept, verschijnt er een apart zijmenu. Kies in dit menu het menu 'Items bewerken'.
Stap 3) Er verschijnt nu een dialoogvenster waarin u de lijstitems aan de keuzelijst kunt toevoegen.
- Klik op de knop Toevoegen om een lijstitem toe te voegen.
- Geef een naam voor de tekstwaarde van het lijstitem – in ons geval Mumbai. Herhaal stap 1 en 2 om lijstitems voor Mangalore en Hyderabad toe te voegen.
- Klik op de knop OK
Stap 4) Ga naar het eigenschappenvenster en wijzig de ID-eigenschapswaarde van het besturingselement in lstLocatie.
Zodra u de bovenstaande wijzigingen hebt aangebracht, ziet u de volgende uitvoer
Uitgang: -
Uit de uitvoer blijkt duidelijk dat de lijstvakken aan het formulier zijn 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 om het besturingselement 'radiobutton' vanuit de toolbox naar het webformulier te slepen (zie onderstaande afbeelding). Zorg ervoor dat u 2 radiobuttons toevoegt, één voor de optie 'Man' en de andere 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 dit te wijzigen in 'Vrouwelijk'.
- Wijzig ook de ID-eigenschappen van de respectieve besturingselementen in rdMale en rdFemale.
Zodra u de bovenstaande wijzigingen hebt aangebracht, ziet u de volgende uitvoer
Uitgang: -
Uit de uitvoer kunt u duidelijk zien dat het keuzerondje aan het formulier is toegevoegd
checkbox
Een selectievakje wordt gebruikt om een lijst met opties te bieden waaruit de gebruiker meerdere keuzes kan maken. Laten we eens kijken hoe we dit kunnen implementeren met een voorbeeld hieronder. We voegen 2 selectievakjes toe aan onze webformulieren. Deze selectievakjes bieden de gebruiker een optie om te leren of ze C# of ASP.Net.
Stap 1) De eerste stap is om het selectievakje vanuit de werkbalk naar het webformulier te slepen, zoals hieronder weergegeven
Stap 2) Zodra de selectievakjes zijn toegevoegd, wijzigt u de eigenschap checkbox-id in 'chkASP'.
- 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'.
- Wijzig de ID-eigenschap van het selectievakje naar 'chkASP'
- Wijzig de ID-eigenschap van het selectievakje naar chkC
Zodra u de bovenstaande wijzigingen hebt aangebracht, ziet u de volgende uitvoer
Uitgang: -
Uit de uitvoer blijkt duidelijk dat het selectievakje is toegevoegd aan het formulier.
Knop
Er wordt gebruik gemaakt van een knop waarmee de gebruiker op een knop kan 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 zullen een eenvoudige knop toevoegen met de naam 'Verzenden'. Dit wordt gebruikt om alle informatie op het formulier in te dienen.
Stap 1) De eerste stap is om het knopbesturingselement vanuit de gereedschapskist naar het webformulier te slepen, 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'.
Zodra 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 webformulierontwerper.
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: -
- De bovenstaande regel code doet het eenvoudigste. Het neemt de waarde van het Name-tekstvakbesturingselement en stuurt het naar de client via het Response-object. Dus als u de string "Guru99" in het naamtekstvak wilt invoeren, de waarde van txtName. Een tekst zou 'Guru99' zijn.
- De volgende regel code neemt de geselecteerde waarde van de listbox via de eigenschap 'lstLocation.SelectedItem.text'. Vervolgens schrijft het deze waarde via de Response.Write-methode terug naar de client.
- Ten slotte maken we alle besturingselementen op het formulier onzichtbaar. Als we dit niet doen, worden alle besturingselementen plus onze responswaarden samen weergegeven. Normaal gesproken, wanneer een persoon alle informatie op het formulier invoert, zoals de naam, locatie, geslacht, enz., zou de volgende pagina die aan de gebruiker wordt getoond alleen de informatie moeten bevatten die niet is ingevoerd. De gebruiker wil de besturingselementen Naam, Geslacht en locatie niet opnieuw zien. Maar ASP.Net weet dit niet en daarom worden standaard alle besturingselementen opnieuw weergegeven wanneer de gebruiker op de knop Verzenden klikt. Daarom moeten we code schrijven om ervoor te zorgen dat alle besturingselementen verborgen zijn, zodat de gebruiker alleen de gewenste uitvoer ziet.
Zodra u de bovenstaande wijzigingen hebt aangebracht, ziet u de volgende uitvoer
Uitgang: -
Voer in het Uitvoerscherm de volgende stappen uit
- Geef de naam Guru99 op in het tekstvak Naam
- Kies een locatie in de keuzelijst van Bangalore
- Klik op de knop Verzenden
Zodra u dit doet, ziet u 'Guru99' en de locatie 'Bangalore' wordt op de pagina weergegeven.
Samenvatting
- In ASP.Netkunt u de standaardbesturingselementen aan een formulier toevoegen, zoals labels, tekstvakken, keuzelijsten, enz.
- Aan elk besturingselement kan een gebeurtenis zijn gekoppeld. De meest voorkomende gebeurtenis is de knopklikgebeurtenis. Dit wordt gebruikt wanneer informatie naar de webserver moet worden verzonden.
