Figuur 1, Twee TextBox controls waarvan de waardes in Label controls worden weergegeven
HTML bevat een aantal elementen waarmee een gebruiker gegevens naar de server kan sturen, zoals een tekstveld, keuzerondje en selectievakje. ASP.NET bevat een verzameling server controls die precies dezelfde functie hebben, maar handiger in gebruik op de server. Een selectievakje bijvoorbeeld stuurt als deze aangevinkt is de tekst "on" naar de server, hetgeen vertaalt moet worden naar of het selectievakje aangevinkt is of niet. De checkbox control die dezelfde functie vervult in ASP.NET bevat een eigenschap Checked, die aangeeft of dit het geval is, zodat u de "vertaalslag" niet zelf hoeft te doen. De server controls die hier behandeld worden zijn:
De TextBox control geeft een tekstveld weer in de webbrowser. Dit tekstveld kan 1 of meerdere regels groot zijn, of een wachtwoordveld zijn (waarin sterretjes weergegeven worden in plaats van de ingevoerde karakters). In HTML worden deze drie verschillende tekstvelden met verschillende elementen ingevoegd, hoewel het eigenlijk drie vormen van hetzelfde type veld zijn. In ASP.NET is ervoor gekozen om daar ΘΘn control voor te gebruiken. De TextBox control heeft dezelfde eigenschappen als een Label control, maar de invloed daarvan wisselt per webbrowser. Verder heeft de TextBox control de eigenschappen in tabel 1.
| Eigenschap | Omschrijving |
| AutoPostBack | Geeft aan of het formulier automatisch opgestuurd moet worden naar de server als het veld verandert. De waarde kan True of False (standaard) zijn. |
| Columns | Aantal karakters dat het tekstvak breed is. Alternatief voor Width . |
| MaxLength | Aantal karakters dat maximaal ingevoerd kan worden. Standaard is dit onbeperkt. |
| ReadOnly | Geeft aan of de waarde in het veld gewijzigd kan worden. De waarde kan True of False (standaard) zijn. |
| Rows | Aantal karakters dat het tekstvak hoog is. Als alternatief voor Height. Alleen nuttig als de TextMode op MultiLine staat. |
| TextMode | Soort tekstveld. De mogelijke waardes zijn SingleLine (standaard) voor een tekstveld van ΘΘn regel, MultiLine voor een tekstveld van meerdere regels, en Password voor een wachtwoordveld. |
| Wrap | Geeft aan of de tekst in een tekstveld voor meerdere regels automatisch naar de volgende regel moet gaan als de tekst rechts het veld uit loopt. De waarde kan True (standaard) of False zijn. |
De voorbeeld code hieronder laat zien hoe u een TextBox met een enkele regel, en met meerdere regels gebruikt. Verder wordt in deze code gebruik gemaak van twee Label controls om de tekst die ingevoerd wordt weer te geven. Doordat AutoPostBack voor beide controls aan staat, is een knop om de pagina te versturen niet nodig (werkt alleen in webbrowsers die JavaScript ondersteunen). U kunt deze code ook krijgen door met Web Matrix of Visual Studio .NET twee TextBox controls en twee Label controls de pagina op te slepen, en zonodig enkele eigenschappen uit tabel 1 aan te passen.
<html>
<head>
</head>
<body>
<form runat="server" ID=
"Form1">
<p>
<asp:TextBox id="TextBox1" runat=
"server"< BR> AutoPostBack="True"></asp:TextBox>
</p>
<p>
<asp:TextBox id="TextBox2" runat="server" AutoPostBack="True"
TextMode="MultiLine" Rows="4"></asp:TextBox>
</p>
<hr />
</form>
<p>
TextBox1:
<asp:Label id="Label1" runat="server" Font-Italic="True"></asp:Label>
</p>
<p>
TextBox2:<br />
<asp:Label id="Label2" runat="server" Font-Italic="True"></asp:Label>
</p>
</body>
</html>
In script-code kunt u de waarde van de TextBox control opvragen via de Text eigenschap. Hieronder ziet u code die gebruikt wordt om twee Label controls te vullen met de waardes uit de TextBox controls. De gebeurtenismethode Page_Load is gekoppeld aan het laden van de pagina, en dit wordt elke keer gedaan als de pagina opgevraagd wordt, dus ook als de gebruiker iets ingevoerd heeft en de pagina terug gestuurd wordt.
VB.NET
<script runat="server"> Sub Page_Load(sender As Object, e As EventArgs) Label1.Text = TextBox1.Text Label2.Text = TextBox2.Text End Sub </script>
C#
<script runat="server">
void Page_Load(Object sender, EventArgs e) {
Label1.Text = TextBox1.Text;
Label2.Text = TextBox2.Text;
}
</script>
Als u de bovenstaande script-code (VB.NET of C#) toevoegt aan de HTML code die er boven staat, dan heeft u een pagina zoals weergegeven in figuur 1. De pagina zoals die in figuur 1 is weergegeven, is het resultaat nadat u in beide TextBox controls iets heeft ingevoerd.
Figuur 1, Twee TextBox controls waarvan de waardes in Label controls worden
weergegeven
De Button control kunt u gebruiken om bepaalde acties uit te laten voeren. Impliciet betekent dit dat als u op een knop klikt de pagina naar de server wordt verstuurd. Vervolgens wordt de gebeurteniscode uitgevoerd die u aan de knop heeft gekoppeld. De Button control heeft dezelfde eigenschappen als een Label control, maar de invloed daarvan wisselt per webbrowser. Verder heeft de Button control de eigenschappen in tabel 2.
| Eigenschap | Omschrijving |
| CausesValidation | Bepaalt of invoer gevalideerd wordt als op de knop geklikt wordt. De waarde kan True (standaard) of False zijn. Validatie wordt besproken in Ingevoerde waardes controleren. |
| CommandArgument | Waarde die meegestuurd kan worden als op de knop geklikt wordt. Dient in principe in gebruikt te worden in combinatie met CommandName. De waarde kan gebruikt worden om te bepalen welke actie ondernomen moet worden in gebeurteniscode (zie verder CommandName). |
| CommandName | Naam van het commando dat wordt uitgevoerd als op de knop geklikt wordt. Deze naam is alleen interessant als u meerdere knoppen in een pagina heeft staan, en u met code wilt bepalen op welke knop geklikt is. Dit komt vooral voor als u dezelfde gebeurteniscode gebruikt voor verschillende knoppen. |
Het primaire doel van de Button control is dat u bepaalde code kunt laten uitvoeren als op de knop geklikt wordt. Deze gebeurteniscode wordt alleen uitgevoerd als op de knop geklikt wordt, en is dus niet van invloed op andere gebeurtenissen. De meeste controls hebben meerdere soorten gebeurtenissen die kunnen optreden en waarvoor code geschreven kan worden, maar in de meeste gevallen zult u daar geen gebruik van hoeven maken. Daar waar deze gebeurtenissen van belang zijn zullen ze apart besproken worden. In het geval van de Button control kunt u gebeurteniscode koppelen via de OnClick gebeurtenis, die u als eigenschap in kunt voegen. Hoe dit werkt ziet u in de HTML code hieronder.
<html>
<head>
</head>
<body>
<form runat="server" ID="Form1">
<p>
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server"
OnClick="Button1_Click" Text="Verstuur">
</asp:Button>
</p>
<p>
TextBox1:
<asp:Label id="Label1" runat="server" Font-Italic="True"></asp:Label>
</p>
</form>
</body>
</html>
In de code hierboven staat een TextBox control, een Label control en een Button control. De tekst die op de knop staat wordt gegeven door de Text eigenschap. De OnClick eigenschap eigenschap verwijst naar de gebeurtenismethode Button1_Click. Deze methode moet ingevoegd worden in het script blok. De code die we in dit geval gebruiken ziet u hieronder.
VB.NET
<script runat="server"> Sub Button1_Click(sender As Object, e As EventArgs) Label1.Text = TextBox1.Text End Sub </script>
C#
<script runat="server">
void Button1_Click(Object sender, EventArgs e) {
Label1.Text = TextBox1.Text;
}
</script>
Met de code hierboven wordt op het moment dat de gebruiker op de knop klikt de waarde in TextBox1 toegekend aan Label1 . Het resultaat nadat de gebruiker tekst heeft ingevoerd en op de knop geklikt heeft ziet u in figuur 2.
Figuur 2, Label die een waarde heeft na het klikken op de Verstuur knop
De LinkButton control is in principe gelijk aan de Button control, en ze hebben dan ook precies dezelfde eigenschappen. Het verschil is dat de Button control een knop weergeeft in de webbrowser, en dat de LinkButton zich manifesteert als een link. Daardoor is de LinkButton wat beter op te maken in webbrowsers waarin knoppen niet aangepast kunnen worden. Een voorbeeld daarvan ziet u in de onderstaande code, waarvan u het resultaat ziet in figuur 3.
<asp:LinkButton id="LinkButton1" runat="server"
BackColor="LightBlue" ForeColor="Black"
BorderColor="Black" BorderStyle="Solid" BorderWidth="2px"
Font-Bold="True" Font-Names="Verdana,Helvetica"
Height="25px">
Dit is een knop
</asp:LinkButton>
Figuur 3, Opgemaakt LinkButton control
De ImageButton control heeft dezelfde functie als de Button en de LinkButton, maar de knop is in dit geval een afbeelding in plaats van HTML. De eigenschappen van de ImageButton zijn daarom de combinatie van de eigenschappen van de Button control en die van de Image control. Ter herinnering: de eigenschappen van de Image control zijn AlternateText, ImageAlign, en ImageUrl. Omdat het gebruik verder identiek is aan de Button control en de Image control, laten we een voorbeeld hier achterwege.
De CheckBox control geeft een selectievakje weer. In tegenstelling tot HTML wordt bij de CheckBox control tekst weergegeven die bij de CheckBox hoort en in principe dus aan de gebruiker vertelt waarvoor het selectievakje dient. Op die tekst is dezelfde opmaak van toepassing als op een Label control, dus die eigenschappen bevat de CheckBox control in ieder geval. De eigenschappen die de CheckBox control verder bevat ziet u in tabel 3.
| Eigenschap | Omschrijving |
| AutoPostback | Geeft aan of het formulier automatisch opgestuurd moet worden naar de server als de CheckBox verandert. De waarde kan True of False (standaard) zijn. |
| Checked | Geeft aan of de CheckBox aangevinkt is of niet. De waarde kan True (standaard) of False zijn, voor aangevinkt en niet-aangevinkt. |
| TextAlign | De positie van de tekst die bij de CheckBox hoort ten opzichte van het selectievakje. De waarde kan Left voor links, en Right (standaard) voor rechts zijn. |
In de code hieronder ziet u een voorbeeld waarin de eigenschappen in tabel 3 gebruikt worden. Er worden twee CheckBox controls gebruikt, waarvan de eerste aangevinkt is als de pagina voor het eerst opgevraagd wordt. De tweede CheckBox control heeft de tekst links van het selectievakje staan in plaats van rechts. Beide gebruiken AutoPostBack zodat de pagina verstuurd wordt naar de server als de waarde verandert.
<html>
<head>
</head>
<body>
<form runat="server" ID="Form1">
<p>
<asp:CheckBox id="CheckBox1" runat="server"
Text="ASP.NET Web Matrix Project"
Checked="True" AutoPostBack="True">
</asp:CheckBox>
</p>
<p>
<asp:CheckBox id="CheckBox2" runat="server"
Text="Visual Studio .NET"
TextAlign="Left" AutoPostBack="True">
</asp:CheckBox>
</p>
</form>
</body>
</html>
De code hieronder wordt elke keer uitgevoerd als de pagina opgevraagd wordt. Het zorgt ervoor dat de tekst van de CheckBox controls vet gemaakt wordt als de betreffende CheckBox is aangevinkt. Als u de pagina voor het eerst opvraagt ziet u derhalve hetzelfde als in figuur 4.
VB.NET
<script runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
CheckBox1.Font.Bold = CheckBox1.Checked
CheckBox2.Font.Bold = CheckBox2.Checked
End Sub
</script>
C#
<script runat="server">
void Page_Load(Object sender, EventArgs e) {
CheckBox1.Font.Bold = CheckBox1.Checked;
CheckBox2.Font.Bold = CheckBox2.Checked;
}
</script>
Figuur 4, CheckBox controls waarvan de tekst vet is als het selectievakje
aangevinkt is
De RadioButton control geeft een keuzerondje weer. Over het algemeen worden die in een groep gebruikt om de gebruiker een keuze te laten maken uit meerdere opties. Als meerdere RadioButton control sdeel uit maken van dezelfde groep, kan selchts ΘΘn keuze gemaakt worden. Verder werkt de RadioButton control hetzelfde als de CheckBox control, zodat naast de eigenschappen van de Label control de RadioButton de eigenschappen heeft in tabel 4.
| Eigenschap | Omschrijving |
| AutoPostback | Geeft aan of het formulier automatisch opgestuurd moet worden naar de server als de RadioButton control verandert. De waarde is standaard False, en kan maar voor ΘΘn RadioButton control uit een groep True zijn. |
| Checked | Geeft aan of de RadioButton geselecteerd is aangevinkt is of niet. De waarde kan True (standaard) of False zijn, voor aangevinkt en niet-aangevinkt. |
| GroupName | Naam van de groep waartoe de RadioButton control behoort. Binnen een groep kan slechts ΘΘn RadioButton control geselecteerd worden. |
| TextAlign | De positie van de tekst die bij de CheckBox hoort ten opzichte van het selectievakje. De waarde kan Left voor links, en Right (standaard) voor rechts zijn. |
De code hieronder laat zien hoe groepen RadioButton controls werken. De eerste twee RadioButton controls behoren tot dezelfde groep, de laatste behoort niet tot een groep. Omdat alle RadioButton controls gemarkeerd zijn met het attribuut Checked="True", zouden ze alledrie geselecteerd moeten zijn. Figuur 5 laat zien dat alleen de laatste in de groep en de RadioButton zonder groep geselecteerd zijn. Dit komt omdat in de groep slechts ΘΘn RadioButton geselecteerd mag zijn. Als er meerdere geselecteerd zijn vanuit de code, dan wordt de laatst geselecteerde weergegeven als geselecteerd. Daarmee vervalt meteen de selectie van de overige RadioButton controls in de groep.
<asp:RadioButton id="RadioButton1" runat="server" GroupName="Tools"
Text="ASP.NET Web Matrix" Checked="True">
</asp:RadioButton><br />
<asp:RadioButton id="RadioButton2" runat="server" GroupName="Tools"
Text="Visual Studio.NET" Checked="True">
</asp:RadioButton><br />
<asp:RadioButton id="RadioButton3" runat="server" Text="Notepad"
Checked="True"></asp:RadioButton>
Figuur 5, RadioButton controls met en zonder groep
RadioButton controls gebruiken op de manier zoals hier weergegeven is over het algemeen niet erg handig. Als een bepaalde keuze gemaakt is, wilt u eigenlijk weten welke keuze er gemaakt is. Met de hier getoonde werkwijze moet u aan iedere RadioButton vragen of deze geselecteerd is of niet. Met de RadioButtonList control, besproken in List controls gebruiken, heeft u dit probleem niet.
⌐2002 Microsoft Nederland BV