Figuur 1, Opgemaakt Label control zoals in de webbrowser weergegeven
Er zijn allerlei soorten server controls beschikbaar in ASP.NET. De basis wordt gelegd door een aantal simpele server controls. Deze controls zijn gericht op het invoegen van tekst, links en afbeeldingen. Deze server controls zijn min of meer gelijk aan elementen die in HTML ook beschikbaar zijn, maar het voordeel is dat de server controls veel consistenter zijn, en daardoor makkelijker in gebruik. Bovendien zijn ze dynamisch en dus vanuit code aan te passen. De controls die hier behandeld worden zijn:
De Literal control is bedoeld voor platte tekst. Dat wil zeggen dat je in een Literal control tekst kwijt kan zonder opmaak. De opmaak van die tekst wordt bepaald door de omliggende opmaak. U vraagt zich nu misschien af wat het nut van een dergelijke server control is, want u zou net zo goed de tekst gewoon in de pagina kunnen plaatsen, of een control kunnen gebruiken waarmee u wel opmaak aan de tekst kunt geven. De Literal control geeft u echter de mogelijkheid om een stuk tekst dynamisch aan te passen. Omdat er geen opmaak mee gemoeid is, vergt het gebruik van de Literal control heel weinig van ASP.NET. In een visuele designomgeving kunt u de Literal control op uw pagina slepen en de eigenschappen vervolgens instellen. Gebruikt u een teksteditor (of kijkt u naar de resulterende HTML van de visuele omgeving), dan is gebruikt u de Literal control als volgt:
<asp:Literal ID="naam" Runat="server">tekst</asp:Literal>
of
<asp:Literal ID="naam" Runat="server" Text="tekst"/>
Zoals u ziet is er maar ΘΘn eigenschap van de Literal control van belang, namelijk de tekst. De tekst kan gegeven worden als waarde van het element of zoals in het tweede geval als waarde van het Text attribuut. Via de Text eigenschap kunt u in programmacode de tekst in de server control aanpassen. De Literal control heeft nog twee eigenschappen die het deelt met alle server controls, namelijk EnableViewState en Visible. Beide kunnen de waarde True (waar) of False (niet waar) hebben, waarbij de standaard waarde True is. De eigenschap EnableViewState heeft te maken met het bewaren van waardes in de server control, en dit wordt verder behandeld in ViewState uitgelegd. De eigenschap Visible bepaalt of de server control te zien is in de webbrowser.
De Label control is feitelijk hetzelfde als de Literal control, met het verschil dat je aan de Label control een opmaak toe kunt kennen. Dit betekent meteen dat de Label control een groot aantal eigenschappen heeft die de Literal control niet heeft. Deze eigenschappen hebben betrekking op hoe de server control opgemaakt is in de webbrowser, en hoe deze zich gedraagt met betrekking tot navigatie in de browser (via de tab toets, sneltoets, en muis). Deze eigenschappen zijn heel belangrijk, omdat vrijwel alle andere server controls (met uitzondering van de Literal control) dezelfde eigenschappen hebben. Het is daarom belangrijk dat u goed weet waar ze voor dienen. In tabel 1 hieronder ziet u welke eigenschappen de Label control heeft, en deelt met andere server controls.
| Eigenschap | Omschrijving |
| AccessKey | Sneltoets die in de webbrowser gebruikt kan worden om naar de server control te gaan. |
| BackColor | Achtergrondkleur van de server control. Dit mag een zes-cijferige HTML kleurcode zijn voorafgegaan door een #, of een van de standaardkleuren die gedefiniδerd zijn. |
| BorderColor | Kleur van de rand om de server control. Dit mag een zes-cijferige HTML kleurcode zijn voorafgegaan door een #, of een van de standaardkleuren die gedefiniδerd zijn. |
| BorderStyle | Stijl van de rand om de server control. Standaard is dit NotSet (niet gedefiniδerd). Andere mogelijke waardes zijn None (geen), Dotted (stippellijn), Dashed (onderbroken lijn), Solid (lijn), Double (dubbele lijn), Groove (verzonken), Ridge (verhoogd), Inset (verzonken control), en Outset (verhoogde control). |
| BorderWidth | Dikte van de rand om de server control. Standaard is dit een getal met de dikte in pixels, en u kunt dit ook expliciet opgeven door px achter de dikte te zetten (bijvoorbeeld 100px). Er zijn vele andere eenheden, waarvan de belangrijkste zijn % (percentage), cm (centimeter), en in (inch). |
| CssClass | Cascading Style Sheet (CSS) class die de server control moet gebruiken in de browser. Als u deze eigenschap gebruikt, wordt de waarde ervan in de HTML de waarde van het class attribuut. |
| Enabled | Geeft aan of de server control in de browser te gebruiken is. De waarde kan True (standaard) of False zijn. |
| EnableViewState | Geeft aan of de server control de waardes bewaart via de ViewState. De waarde kan True (standaard) of False zijn. |
| ForeColor | Kleur van de tekst in de server control. Dit mag een zes-cijferige HTML kleurcode zijn voorafgegaan door een #, of een van de standaardkleuren die gedefiniδerd zijn. |
| Height | Hoogte van de server control. Standaard is dit een getal met de dikte in pixels, en u kunt dit ook expliciet opgeven door px achter de dikte te zetten (bijvoorbeeld 100px). Er zijn vele andere eenheden, waarvan de belangrijkste zijn % (percentage), cm (centimeter), en in (inch). |
| TabIndex | Plaats in de volgorde voor navigatie in de webbrowser via de tab toets. |
| Text | Tekst die in de server control weergegeven moet worden. |
| ToolTip | Tekst die weergegeven moet worden als de gebruiker met de muis over de server control heen beweegt. |
| Visible | Geeft aan of de server control in de webbrowser zichtbaar is. De waarde kan True (standaard) of False zijn. |
| Width | Breedte van de server control. Standaard is dit een getal met de dikte in pixels, en u kunt dit ook expliciet opgeven door px achter de dikte te zetten (bijvoorbeeld 100px). Er zijn vele andere eenheden, waarvan de belangrijkste zijn % (percentage), cm (centimeter), en in (inch). |
Naast de eigenschappen in tabel 1 bevat de Label control ook nog de eigenschap Font. Die eigenschap is weer een combinatie van andere eigenschappen, zoals lettertype, grootte, vet, cursief, enz. De Font eigenschap is in feite een object klasse die zelf eigenschappen bevat. Als er tekst opgemaakt moet worden, gebeurt dit altijd via de Font klasse, dus ook deze is erg belangrijk. Alle eigenschappen van de Font klasse ziet u in tabel 2.
| Eigenschap | Omschrijving |
| Bold | Geeft aan of de tekst vet moet worden weergegeven. De waarde kan True of False (standaard) zijn. |
| Italic | Geeft aan of de tekst cursief moet worden weergegeven. De waarde kan True of False (standaard) zijn. |
| Name | Het voorkeurslettertype waarin de tekst moet worden weergegeven. De waarde moet de naam van een lettertype zijn. |
| Names | Lettertypes die gebruikt kunnen worden om de tekst weer te geven. De waarde moet een lijst lettertypes zijn gescheiden door komma's. Het meest linkse lettertype dat de webbrowser kan weergeven wordt gebruikt. Het aantal lettertypes dat u kunt opgeven is in principe onbeperkt. |
| Overline | Geeft aan of de tekst moet worden weergegeven met een streep erboven. De waarde kan True of False (standaard) zijn. |
| Size | Geeft de grootte van de tekst aan. Deze eigenschap kan de volgende waardes hebben (van klein naar groot: XX-Small, X-Small, Smaller, Small (standaard), Medium, Large, Larger, X-Large, XX-Large. |
| Strikeout | Geeft aan of de tekst doorgestreept moet worden weergegeven. De waarde kan True of False (standaard) zijn. |
| Underline | Geeft aan of de tekst onderstreept moet worden weergegeven. De waarde kan True of False (standaard) zijn. |
Als u met een visuele designomgeving werkt, hoeft u de eigenschappen in tabel 1 en tabel 2 niet allemaal te kennen. De designomgeving stelt u in staat om via het eigenschappenvenster de eigenschappen in te stellen. Heeft u geen beschikking over een dergelijke visuele designomgeving, dan kunt u tabel 1 en tabel 2 gebruiken om de server control in de HTML op te maken. Een voorbeeld hiervan ziet u hieronder.
<asp:Label id="Label1" Runat="server"
Font-Italic="True" Font-Size="Large" Font-Names="Verdana,Helvetica"
ForeColor="Blue" BackColor="#C0C0FF" BorderStyle="Dotted" BorderColor="Black"
Height="50px" Width="150px">
Label
</asp:Label>
In het voorbeeld hierboven worden verschillende eigenschappen van de label control ingesteld. Zoals u kunt zien worden de eigenschappen gewoon als attributen ingevoegd. De verschillende eigenschappen van Font worden gegeven in de vorm Font-eigenschap. Het resultaat van het bovenstaande voorbeeld ziet er uit als in figuur 1, waarbij opgemerkt moet worden dat in sommige webbrowsers het resultaat er iets anders uit kan zien, afhankelijk van wat de webbrowser wel en niet ondersteunt (zie Pagina's opmaken met controls).
Figuur 1, Opgemaakt Label control zoals in de webbrowser weergegeven
De HyperLink control is het server control equivalent van de link in HTML. De HyperLink control is vrijwel identiek aan de Label control, maar bevat nog drie extra eigenschappen. Die eigenschappen staan in tabel 3 hieronder.
| Eigenschap | Omschrijving |
| ImageUrl | Lokatie van de weer te geven afbeelding. Als deze eigenschap niet gebruikt wordt, wordt er geen afbeelding weergegeven. De waarde dient een geldige URL te bevatten. |
| NavigateUrl | Lokatie die de webbrowser moet openen als de gebruiker op de link klikt. De waarde dient een geldige URL te bevatten. |
| Target | Het frame of venster waarin de pagina aangewezen door NavigateUrl geopend moet worden. De waarde moet de naam van een bestaand of nieuw te openen venster bevatten, of een van de volgende waardes: _blank (nieuw venster), _parent (moedervenster of -frame) , _search (in het zoekvenster, alleen Internet Explorer 5.0 en hoger), _self (zelfde venster of frame, standaard), _top (hele venster). |
Aan de hand van tabel 3 kunt u in de HTML de HyperLink control naar een pagina laten wijzen die geopend moet worden in een nieuw venster. Zonder opmaak toe te kennen (zoals in het voorbeeld met de Label control), ziet de code er dan als volgt uit.
<asp:Hyperlink id="Link" Runat="server"
NavigateUrl=http://www.asp.net Target="_blank>
De ASP.NET website
</asp:Hyperlink>
Het resultaat van de bovenstaande code is een normale HTML link in de webbrowser. Het verschil met een gewone link is natuurlijk wel dat de hyperlink control tijdens het uitvoeren van de pagina aangepast kan worden.
De Image control heeft dezelfde functie als het img element in HTML, het weergeven van een afbeelding. Naast de eigenschappen in tabel 1, bevat de Image control ook de eigenschappen in tabel 4. Omdat er geen tekst weergegeven wordt met de Image control, heeft deze geen Font eigenschap.
| Eigenschap | Omschrijving |
| AlternateText | Geeft een alternatieve tekst die weergegeven moet worden als de afbeelding niet geladen wordt (identiek aan het alt attribuut van het img element in HTML). |
| ImageAlign | Bepaalt de uitlijning van de afbeelding. In principe zijn de mogelijkheden gelijk aan de van het img element in HTML. de volgende waardes zijn mogelijk: NotSet (niet gedefiniδerd, standaard), Left (links uitlijnen, tekst loopt rechts om de afbeelding heen), Right (rechts uitlijnen, tekst loopt links om de afbeelding heen), Baseline (de onderkant van de afbeelding lijnt met de eerste regel tekst), Top (de bovenkant van de afbeelding lijnt met de bovenkant van het hoogste element op dezelfde regel), Middle (het midden van de afbeelding lijnt met de eerste regel tekst), Bottom (de onderkant van de afbeelding lijnt met de eerste regel tekst), AbsBottom (de onderkant van de afbeelding lijnt met de onderkant van het grootste element op dezelfde regel), AbsMiddle (het midden van de afbeelding lijnt met het midden van het grootste element op dezelfde regel), of TextTop (de bovenkant van de afbeelding lijnt met bovenkant van de hoogste tekst op dezelfde regel). |
| ImageUrl | Lokatie van de weer te geven afbeelding. De waarde dient een geldige URL te bevatten. |
Hieronder ziet u een voobeeld waarin de grootte van een afbeelding wordt aangepast, en er een rode rand van 2 pixels dikte omde afbeelding heen wordt geplaatst.
<asp:Image id="Image1" runat="server" ImageUrl="images/framework.jpg"
BorderStyle="Solid" BorderWidth="2px" BorderColor="Red"
Width="355px" Height="222px">
</asp:Image>
Het resultaat van de code hierboven ziet u in figuur 2.
Figuur 2, Resultaat van een Image control
⌐2002 Microsoft Nederland BV