# Programmeren in ASP.NET/HTML-controls
## Wat is een server-control?

Vooraleer je begint met HTML-server-controls, moet je een basisconcept hebben van wat een server-control is. Server-controls zijn speciale tags die door de webserver op ongeveer dezelfde manier verwerkt worden als HTML-tags door je browser. Je kunt server-control-tags herkennen doordat ze een runat="server" attribuut hebben. Dit helpt de server om ze te onderscheiden van standaard HTML-tags of van andere soorten tekst waar de server niets mee te maken heeft.
Eigenaardig genoeg bestaat er geen runat="client" attribuut. Als je een pagina opvraagt met het "runat"-attribuut ingesteld als client (of iets anders) krijg je een "parser error" die je zegt dat "The Runat attribute must have the value Server." Wanneer de server een server-control tegenkomt zal hij in het geheugen een object aanmaken dat die server-control voorstelt. Dit object kan property's en methodes hebben, en het kan zelfs server-events oproepen tijdens de verwerking van de ASP.NET pagina. Als de verwerking gedaan is, zal de control zijn output in de vorm van HTML opmaken en dit wordt dan naar de browser gestuurd als onderdeel van de resulterende pagina.
Er zijn vijf soorten server-controls:
* HTML-controls
* web-controls
* user-controls
* custom controls
* web parts
Dit hoofdstuk behandelt de eerste soort server-controls meer in detail: HTML-controls. Het volgende hoofdstuk gaat over web-controls.

## Wat zijn HTML-controls?

HTML-server-controls zijn eenvoudig een verzameling server-controls die erg lijken op hun overeenkomstige HTML-tags. In feite moet je om een HTML-server-control op een pagina te declareren alleen een bestaande HTML-tag nemen en het eerder genoemde runat="server"-attribuut toevoegen. Als er een HTML-server-control is die correspondeert met de HTML-tag die je hebt "gecontroliseerd", wordt de HTML-tag het overeenkomstige type van server-control. Anders zal het eenvoudig een HTML-control worden van het standaardtype HtmlGenericControl.

### HTML-controls

De eerste soort van server-control, de HTML-control, lijkt erg veel op een standaard HTML-tag. Het enige verschil is dat zij een speciaal runat="server" attribuut bevat. Hier is een simpel voorbeeld met alleen HTML:
imagevoorbeeld.htm
In een eerste stap maken we er een aspx-pagina van:
imagevoorbeeld1.aspx
Een gewone image zou op deze manier geschreven worden:
Om er een HTML-control van te maken, voeg je runat="server" toe.
Als je Visual Studio gebruikt, kan je gewoon rechtsklikken op het HTML-element in Design View en "Run as Server Control" selecteren in het snelmenu.
De afbeelding heeft het runat="server"-attribuut gekregen, waardoor ze in een HTML-control veranderd is. De tag kreeg ook een id-attribuut zodat je ernaar kan refereren in je code. Zo geef je dus een naam aan een HTML-control.
De eerste regel is het zogenaamde "Page-directief", waarin de taal van de pagina ingesteld wordt. Voorlopig is er nog geen code aanwezig.
De HTML-code van het resultaat is de volgende:
Het runat="server"-attribuut is in het resultaat verdwenen, net zoals de eerste regel.
De coderegel om de afbeelding te veranderen is nu heel gemakkelijk: imgVoorbeeld.src = "images/bloem.gif"
Je gebruikt dus de ID van de control om de eigenschappen ervan in te stellen.
Merk op hoe de property van de control (.src) dezelfde naam heeft als het attribuut van de overeenkomstige HTML <img>-tag (src).
imagevoorbeeld2.aspx
Opmerkingen
* de code staat tussen <script>-tags, die ook weer het attribuut runat="server" hebben.
* in deze pagina staat de code binnen een subroutine Page_Load. Deze routine is in feite een event dat wordt uitgevoerd telkens vóór de pagina in HTML omgezet wordt.
* Page_Load heeft een welbepaalde signatuur: er zijn 2 vaste parameters nodig. Dit is de juiste schrijfwijze:
In het geval van Page_Load worden deze parameters (Sender en E) zelden gebruikt.
* Je kan Page_Load ook snel toevoegen in Visual Studio door te dubbelklikken op het formulier.
* alle attributen van de HTML-control (hier de afbeelding) zijn toegankelijk in de code onder de vorm controlID.naamAttribuut. In het voorbeeld wordt het src-attribuut van de afbeelding gewijzigd door aan imgVoorbeeld.src een andere waarde te geven.
* de afbeelding wordt eerst ingesteld ("design time") op "images/voorbeeld.gif", maar daarna wordt dit in Page_Load ("run time") veranderd in "images/bloem.gif". Het is deze laatste afbeelding die de gebruiker te zien krijgt.
Nog een stapje verder: nu voeg je een knop toe, en deze knop krijgt een onServerClick-attribuut (hier met de waarde actieKlik). Vervang Page_Load door actieKlik.
imagevoorbeeld3.aspx
Nu kan je de afbeelding veranderen door op de knop te klikken.
Opmerkingen
* Om dit te laten werken, moet je ook een <form>-tag toevoegen. Deze moet ook het runat="server" attribuut hebben.
* De subroutine actieKlik is nu de event-handler voor wanneer er op de knop geklikt wordt.
Deze event-handler heeft dezelfde signatuur als Page_load:
De eerste parameter Sender verwijst naar het object dat het event veroorzaakt, in dit geval btnActie. De tweede parameter E bevat bijkomende informatie over het event. Later zullen we deze parameters soms gebruiken.
Zelfs een simpele <p>-tag kan een HTML-control worden, zoals in het voorbeeld hieronder:
helloworld3.aspx
Nota: de <p>-tag heeft geen overeenkomstige HTML-control en wordt daarom verwerkt als een control van het type HtmlGenericControl. Deze heeft een eigenschap InnerText, die je kan gebruiken om de inhoud van de tag te veranderen.

## Hoe werkt het?

Bij het opvragen van deze pagina merkt de server dat het een aspx-pagina is, en zal de ASP.NET-engine in werking treden. De eerste keer wordt de pagina gecompileerd. Dit betekent dat de code vertaald wordt in machinecode, en deze wordt opgeslagen in een uitvoerbaar bestand. ASP.NET gebruikt hiervoor de extensie .dll (van Dynamic Link Library). Je vindt deze DLL terug in de folder "c:\Windows\Microsoft.NET\Framework\vx.x.xxxx\Temporary ASP.NET Files" (vervang indien nodig c:\Windows door de juiste folder waar Windows geïnstalleerd werd, en vx.x.xxxx door de versie van het .NET framework).
Daarna wordt bij het opvragen van de pagina altijd deze DLL gebruikt. Alle volgende aanvragen zullen dus sneller verwerkt worden, omdat het compileren niet meer moet gebeuren. Als je het originele bestand wijzigt, dan wordt de DLL wel opnieuw gecompileerd. Dit gebeurt volledig automatisch bij de eerste aanvraag. ASP.NET vergelijkt hiervoor de datum van het aspx-bestand en van de DLL.
Deze DLL bevat nu de juiste code om een HTML-pagina aan te maken, en deze pagina wordt uiteindelijk naar de gebruiker gestuurd.

## Het nut van HTML-controls

HTML-server-controls weerspiegelen dus hun overeenkomstige HTML-tags en voeren eenvoudig de HTML-tags uit tijdens het gebruik. Waarom heb je die controls dan nodig? De controls vereenvoudigen sterk het werken met de property's en attributen van de HTML-tags. Ze laten je ook toe de logica die de tags beïnvloedt weg te verplaatsen van de tags zelf. Zo kan je nettere code schrijven.
0to9.aspx
Als je deze pagina opvraagt krijg je bijvoorbeeld dit resultaat:
Merk op dat er geen enkele variabele of geen enkele code buiten het ene nette script blok staat. Server-controls maken deze flexibiliteit mogelijk. Je kan zelfs alle code in een apart bestand (bv. 0to9.aspx.vb) zetten. Dit doe je door bij de creatie van een nieuwe pagina de optie "Place code in separate file" aan te vinken. In de pagina krijg je dan bij het Page-directief de volgende attributen:
* Versie 1.1: Codebehind="0to9.aspx.vb" Inherits="0to9".
* Versie 2.0: CodeFile="0to9.aspx.vb" Inherits="0to9"

## Hoe gebruik je ze?

Het codevoorbeeld hierboven heeft je een idee gegeven hoe HTML-controls gebruikt worden. Voor alle duidelijkheid is hier een lijst die illustreert hoe je kan spelen met sommige van de property's en methodes van een HtmlGenericControl.
Hier is een lijst met alle HTML-controls die beschikbaar zijn in ASP.NET. Al deze controls schrijven standaard HTML naar het webformulier:
| Control | Beschrijving | Belangrijkste eigenschappen | Resultaat in HTML |
| HtmlGenericControl | Kan gebruikt worden voor tags waar geen andere HTML-control voor bestaat, zoals <body>, <span>, <p> of <div> | InnerText InnerHTML | |
| HtmlAnchor | Link of anchor | href, Target | <a href="www.com"> </a> |
| HtmlForm | Formulier | Method, Target | <form runat="server"></form> |
| HtmlInputText | Invoerveld | Value, Size | <input type="text" runat="server" /> |
| HtmlInputText (Password) | Invoerveld voor wachtwoorden | Value | <input type="password" runat="server" /> |
| HtmlTextArea | Invoerveld dat meerdere regels toelaat. | Value, Size, Rows | <input type="textarea" runat="server"></textarea> |
| HtmlInputHidden | Verborgen veld | Value | <input type="hidden" runat="server" /> |
| HtmlButton | Knop | Value | <input type="button" runat="server" /> |
| HtmlInputReset | Reset knop | Value | <input type="reset" runat="server" /> |
| HtmlInputSubmit | Submit knop | Value | <input type="submit" runat="server" /> |
| HtmlInputFile | Toont een tekstveld en een Browse knop op het formulier, zodat de gebruiker een bestand van zijn computer kan selecteren. | Value | <input type="file" runat="server" /> |
| HtmlInputCheckBox | aankruisvakje | Checked | <input type="checkbox" runat="server" /> |
| HtmlInputRadioButton | radioknop | Checked, Value | <input type="radio" runat="server" /> |
| HtmlImage | Toont een afbeelding | Src, Alt | <img src="bloem.gif" runat="server" /> |
| HtmlInputImage | Zelfde als HtmlImage, maar werkt als een knop | Src | <input type="image" src="bloem.gif" runat="server" /> |
| HtmlTable | laat toe om informatie in tabelvorm te presenteren. | Rows | {| runat="server" |} |
| HtmlTableRow | Rij in een HtmlTable | Cells | <tr> </tr> |
| HtmlTableCell | Cel in een HtmlTableRow | InnerHTML | <td> </td> |
| HtmlSelect | Toont een lijst met items | Value, SelectedIndex, Size, Items, Multiple | <select size="2" runat="server"></select> |
| HtmlHead (2.0) | Geeft toegang tot de <head>-tag in een pagina | | |
| HtmlLink (2.0) | Geeft toegang tot de <link>-tag in een pagina | | |
| HtmlTitle (2.0) | Geeft toegang tot de <title>-tag in een pagina | | |
Aan de meeste HTML-controls kan je client-side-events koppelen, zoals onClick, onFocus en onMouseOver. Deze events worden dan gekoppeld aan standaard JavaScript-code, die op de client uitgevoerd wordt.
Daarnaast zijn er ook enkele events die op de server kunnen uitgevoerd worden:
| Server-Side Event | Beschrijving | Beschikbaar bij |
| OnServerChange | Gebeurt op de server als de waarde van de control veranderd is ten opzichte van de vorige post | HtmlInputText, HtmlTextArea, HtmlSelect, HtmlInputCheckbox, HtmlInputRadiobutton, HtmlInputHidden |
| OnServerClick | Gebeurt op de server als er op de control geklikt wordt. | HtmlButton, HtmlAnchor, HtmlInputButton, HtmlImage |
In dit voorbeeld worden drie knoppen getoond met zowel onClick- als onServerClick-events:
serverclicktest.aspx
Merk op dat je voor het onClick-event de functie opgeeft inclusief de haakjes en eventuele parameters (zoals Button_Click(1) ), terwijl je voor het onServerClick-event alleen de naam van de functie opgeeft. Parameters zijn daar niet toegelaten, ASP.NET kent zelf de standaard parameters toe.

## Oefeningen

* Maak een pagina met twee invoervakken voor getallen, een knop en een label. Als er op de knop gedrukt wordt, komt in het label de som van de twee invoervakken.
* Maak een pagina met een keuzelijst met kleuren en een knop. Bij het selecteren van een kleur en het drukken op de knop krijgt de pagina-achtergrond de gekozen kleur. Om de achtergrondkleur in te stellen vervang je de <body>-tag door <body id="bodytag" runat="server">, en je zet de kleur met bodytag.Attributes("bgcolor")=kleur (waarin kleur bijvoorbeeld de waarde "green" kan hebben).
* Maak een pagina met 4 titels van cursussen die je elk kan aanvinken met een aankruisvak. Maak ook een knop met de titel "Alles". Als je op deze knop klikt, worden alle 4 titels automatisch aangekruist.

## Een control dynamisch aanmaken

Soms wil je controls in runtime aanmaken. Het kan bijvoorbeeld zijn dat je op voorhand niet weet of je de control nodig hebt, of dat je een variabel aantal controls nodig hebt.
Dit is de code om een HtmlInputText-control toe te voegen aan een formulier met id "formulier1":
Voorbeeld Maak een pagina waar je een getal kan ingeven (bijvoorbeeld: het aantal kinderen). Bij het drukken op submit moeten er evenveel tekstvakken bijkomen op dezelfde pagina.
dynamisch.aspx
Je kan hetzelfde soort functionaliteit ook bekomen met behulp van datacontrols, zoals de Repeater.
Een volledig overzicht over HTML-controls kan je hier vinden (Engelstalig):
* https://www.w3schools.com/aspnet/aspnet_refhtmlcontrols.asp
* https://www.aspalliance.com/aspxtreme/aspnet/syntax/aspsyntaxforhtmlcontrols.aspx