Server controls vormen het hart van ASP.NET. Door de server controls in een pagina te manipuleren wordt het resultaat van een pagina anders. Server controls zijn er in alle soorten en maten. Ten eerste zijn er server controls die vrijwel gelijk zijn aan elementen die in HTML ook voorkomen. Het label en de knop uit De basis van een ASP.NET pagina zijn daarvan goede voorbeelden, en in die categorie bevinden zich verder onder andere tekstvelden, keuzelijsten, en tabellen. Hoewel we daarvoor dus een ander element gebruiken, worden ze in de browser weergegeven als hun HTML equivalent. ASP.NET zorgt er echter voor dat als er iets gedaan wordt met die elementen, dat er code uitgevoerd wordt die daaraan verbonden is. Ten tweede zijn er server controls die opgebouwd zijn uit verscheidene HTML elementen. Een mooi voorbeeld hiervan is de zogenaamde Calendar control die een kalender weergeeft waarmee gebruikers een datum kunnen selecteren. Als laatste zijn er server controls die niet per sΘ een zichtbaar resultaat hebben, maar die een bepaalde functie vervullen, zoals het controleren van gegevens die een gebruiker heeft ingevoerd.
Alle server controls zijn te herkennen aan enkele eigenschappen. Ten eerste hebben alle server controls het attribuut runat="server", om aan te duiden dat ze op de server gebruikt worden. Als u een bepaald HTML element wilt aanpassen op de server, dan kunt u die voorzien van dit attribuut. Dat HTML element wordt daarmee in feite een server control, maar we noemen ze HTML controls. Een HTML control kan alleen gemaakt worden op basis van een geldig HTML element, en is beperkter in mogelijkheden dan volwaardige server controls. Ten tweede hebben vrijwel alle server controls een id attribuut met daarin een unieke naam binnen de pagina. Dat is logisch, want als een control geen unieke naam zou hebben, zou ASP.NET niet weten welke control het nu eigenlijk aan moet passen. Als een server control geen unieke naam heeft, wordt er tijdens het uitvoeren een toegekend. Omdat we dan niet weten wat die naam is, kunnen we echter niet vanuit code die control aanpassen. Waarom dergelijke controls toch handig kunnen zijn leert u later in deze handleiding. Een laatste eigenschap van server controls, met uitzondering van HTML controls, is dat ze een voorvoegsel hebben. Standaard ASP.NET server controls hebben allemaal het voorvoegsel asp, server controls die niet standaard deel uitmaken van ASP.NET hebben een ander, nader te bepalen voorvoegsel. Het voorvoegsel en de naam van het soort control worden gescheiden door een dubbele punt. Daardoor ziet een server control er in principe als volgt uit (zonder eventuele facultatieve attributen):
<asp:ServerControlNaam ID="naam" Runat="server">waarde</asp:ServerControlNaam>
of
<asp:ServerControlNaam ID="naam" Runat="server"/>
Het is belangrijk op te merken dat server controls altijd een eind-tag moeten hebben en dat de waarde van attributen tussen aanhalingstekens (dubbele quotes) of apostrofs (enkele quotes) moeten staan. Dit komt omdat server control code well-formed moet zijn, een vereiste die van Extensible Markup Language (XML) is overgenomen. XHTML, de nieuwste versie van HTML, moet ook well-formed zijn, en is in feite ook alleen maar een vorm van XML. De server controls zijn dus eigenlijk ook stukjes XML. U kunt de eind-tag expliciet toevoegen zoals in het eerste voorbeeld, maar u kunt de begin-tag ook eindigen met een /. Daarmee wordt de begin-tag meteen ook de eind-tag. Een andere vereiste van XML, en dus van ASP.NET server controls, is dat de begin tag en de eind tag precies hetzelfde moeten zijn, zelfs met hoofd- en kleine letters. De namen van de server controls en de attributen zijn verder niet hoofdlettergevoelig, dus kunt u het gemakkelijkst altijd kleine letters gebruiken voor de namen. In deze handleiding zal als conventie de eerste letter van ieder woord in een naam met een hoofdletter geschreven worden, zoals zichtbaar is in de voorbeelden.
Verschillende server controls hebben verschillende eigenschappen en daardoor verschillende attributen. De eigenschappen die gemeenschappelijk zijn, zoals hoogte en breedte zijn gelukkig wel voor iedere control hetzelfde, iets wat in HTML niet altijd het geval is. Deze attributen bepalen hoe de server control functioneert en eruit ziet. Attributen die geen onderdeel uitmaken van de server control kunt u gewoon bijvoegen, maar deze worden dan gekopiδerd naar de HTML. U kunt daarmee dus alleen be∩nvloeden hoe de uiteindelijke HTML in de webbrowser werkt of eruit ziet, niet hoe de server control functioneert als de server de pagina uitvoert. Sommige eigenschappen van een server control kunnen eventueel ook weergegeven worden in sub-elementen van een server control. Dit is handig voor bepaalde attributen die als groep invloed hebben op een onderdeel van de server control. Hieronder ziet u een voorbeeld met de eerder genoemde Calendar control, waarin u dit goed kunt zien.
VB.NET
<%@ Page Language="VB" Culture="nl-NL" %>
<script runat="server">
Sub Calendar1_SelectionChanged(sender As Object, e As EventArgs)
Label1.Text = "U heeft " & _
Calendar1.SelectedDate.ToLongDateString() & _
" geselecteerd."
End Sub
</script>
<html>
<head>
</head>
<body>
<form runat="server" ID="Form1">
<p>
<asp:Label id="Label1" runat="server"
Font-Size="Larger" Font-Bold="True">
</asp:Label>
</p>
<p>
<asp:Calendar id="Calendar1" runat="server" Font-Size="8pt"
BorderWidth="1px" Width="220px" Height="200px"
CellPadding="1" Font-Names="Verdana"
ForeColor="#003399" DayNameFormat="FirstLetter"
OnSelectionChanged="Calendar1_SelectionChanged">
<TodayDayStyle forecolor="White" backcolor="#99CCCC"/>
<SelectorStyle forecolor="#336666" backcolor="#99CCCC"/>
<NextPrevStyle forecolor="#CCCCFF"/>
<DayHeaderStyle height="1px" forecolor="#336666"
backcolor="#99CCCC"/>
<SelectedDayStyle font-bold="True" forecolor="#CCFF99"
backcolor="#009999"/>
<TitleStyle font-size="10pt" font-bold="True"
height="25px" borderwidth="1px"
forecolor="#CCCCFF" borderstyle="Solid"
bordercolor="#3366CC" backcolor="#003399"/>
<WeekendDayStyle backcolor="#CCCCFF"/>
<OtherMonthDayStyle forecolor="#999999"/>
</asp:Calendar>
</p>
</form>
</body>
</html>
C#
<%@ Page Language="C#" Culture="nl-NL" %>
<script runat="server">
void Calendar1_SelectionChanged((Object sender, EventArgs e) {
Label1.Text = "U heeft " + Calendar1.SelectedDate.ToLongDateString() + " geselecteerd.";
}
</script>
<html>
<head>
</head>
<body>
<form runat="server" ID="Form1">
<p>
<asp:Label id="Label1" runat="server"
Font-Size="Larger" Font-Bold="True">
</asp:Label>
</p>
<p>
<asp:Calendar id="Calendar1" runat="server" Font-Size="8pt"
BorderWidth="1px" Width="220px" Height="200px"
CellPadding="1" Font-Names="Verdana"
ForeColor="#003399" DayNameFormat="FirstLetter"
OnSelectionChanged="Calendar1_SelectionChanged">
<TodayDayStyle forecolor="White" backcolor="#99CCCC"/>
<SelectorStyle forecolor="#336666" backcolor="#99CCCC"/>
<NextPrevStyle forecolor="#CCCCFF"/>
<DayHeaderStyle height="1px" forecolor="#336666"
backcolor="#99CCCC"/>
<SelectedDayStyle font-bold="True" forecolor="#CCFF99"
backcolor="#009999"/>
<TitleStyle font-size="10pt" font-bold="True"
height="25px" borderwidth="1px"
forecolor="#CCCCFF" borderstyle="Solid"
bordercolor="#3366CC" backcolor="#003399"/>
<WeekendDayStyle backcolor="#CCCCFF"/>
<OtherMonthDayStyle forecolor="#999999"/>
</asp:Calendar>
</p>
</form>
</body>
</html>
U kunt de bovenstaande code ook verkrijgen door in Web Matrix een label en een Calendar control op de pagina te slepen. vervolgens kunt u dubbelklikken op de kalender om het code gedeelte weer te geven. In de designomgeving kunt u in het Properties venster autoformat gebruiken om de kalender een leuk uiterlijk te geven. In de bovenstaande code kunt u zien dat onder de Calendar control elementen zitten om de opmaak verder te definiδren. De elementen zijn gegroepeerd naar onderdeel van de kalender, dus de opmaak voor vandaag, de geselecteerde dag, weekdagen, enzovoorts wordt allemaal afzonderlijk geregeld. U begrijpt dat de meeste eigenschappen alleen gelden voor de Calendar control, en bijvoorbeeld niet voor een knop. TitleStyle is wel een element dat voor meerdere controls gebruikt kan worden.
Als u de pagina opvraagt, en vervolgens een datum selecteert, dan krijgt u het volgende te zien:
Figuur 1, Een opgemaakte kalender waarmee een datum geselecteerd is
Daar waar als u op een knop klikt de OnClick gebeurtenis plaats vindt, vindt bij het selecteren van een andere dag de OnSelectionChanged gebeurtenis plaats. De kalender gebruikt niet OnClick als gebeurtenis, omdat die niet duidelijk genoeg is. Een gebruiker kan namelijk ook op de kalender klikken om van maand te wisselen. Wat wel hetzelfde is, zijn de argumenten die aan de functie die de gebeurtenis afhandelt meegegeven worden. Deze argumenten geven aan op welke control de gebeurtenis van toepassing is, er zouden namelijk meer kalenders kunnen zijn die door dezelfde code worden afgehandeld, en welke eigenschappen er bij die gebeurtenis horen. Dit komt echter uitgebreider aan de orde wanneer we wat met die gegevens moeten doen.
⌐2002 Microsoft Nederland BV