# Programmeren in ASP.NET/Webformulieren
## Wat is een webformulier?

Webformulieren zijn het hoofdonderdeel van ASP.NET.
Elk webformulier bevat een <form>-tag met een runat="server" attribuut:
Webformulieren zijn in feite HTML-formulieren die uitgebreid zijn met alle mogelijk eigenschappen, methodes en events om een optimale controle te hebben vanuit een programma. Als je Visual Studio gebruikt, kan je formulierelementen gewoon op het formulier slepen, en vervolgens de code eenvoudig toevoegen.
Webformulieren werken zo dat bij het selecteren uit een lijst of bij het klikken op een knop automatisch server-side code uitgevoerd wordt. Dit gebeurt met zogenaamde postbacks.
Webformulieren bestaan uit twee delen: het HTML-gedeelte in een aspx-bestand (ook het markup-gedeelte genoemd), en de code achter het formulier.

## Het doel van webformulieren

De nieuwe mogelijkheden in webformulieren zijn:
* Volledige scheiding van HTML-markup en code
* Een uitgebreide verzameling server-side controls die de browser kunnen herkennen en overeenkomstig de juiste HTML doorgeven
* Minder code nodig doordat een deel van de code al in de controls verwerkt is.
* Een programmeermodel gebaseerd op events
* Programmeurs kunnen hun eigen controls maken met aangepaste functionaliteit. Deze controls kunnen ook beschikbaar gemaakt worden voor iedereen.

## Een voorbeeld van een webformulier in Visual Web Developer

We maken hier een webformulier waarin de gebruiker zijn voornaam en familienaam invult; Daarna kan de gebruiker op de "Login"-knop klikken. De volledige naam verschijnt dan in een label onder de knop.
Om het Login-formulier te maken
* Open Visual Studio en klik "New file..." in het "File"-menu.
* Kies "Web Form" in de lijst
* Kies de naam van de pagina bij "Name", bv. "login.aspx"
* Klik OK om het formulier aan te maken
Nu zou je een webformulier genaamd "login.aspx moeten zien in het middelste venster.
Maak het formulier zoals hierboven door de titels in het formulier te typen, door de juiste web-server-controls erop te slepen, en de eigenschappen in te stellen volgens de tabel hieronder:
Tabel: Controls gebruikt in het Login-formulier:
Je kan de pagina nu al testen door ze op te vragen in je browser (druk F5). Je kan nu gegevens inbrengen, maar als je op "Login" klikt, gebeurt er nog niks.

## Code aan de knop koppelen

* Sluit het programma af door de browser te sluiten.
* Zorg dat de pagina in design mode te zien is, en dubbelklik op de "Login"-knop. Een codevenster verschijnt, met de event procedure "btnSubmit" (als je dubbelklikt wordt het default event van de knop aangemaakt).
* Vul deze methode in zodat ze er als volgt uitziet:
Hier wordt de "Text"-eigenschap van zowel de tbNaam als de tbVoornaam invoervakken opgevraagd, en deze gegevens worden in de Label control geplaatst. De ganse pagina ziet er nu zo uit:
login.aspx
Nu kan je de pagina testen. Als je de pagina voor de eerste keer oproept, ziet de broncode er ongeveer zo uit:
Je merkt een aantal zaken:
* de code is niet meer te zien
* alle web-controls zijn omgezet in gewone HTML-elementen
* het formulier heeft als action-attribuut de pagina zelf.
* er is een verborgen invoerveld "__VIEWSTATE" met een ingewikkelde waarde. Dit veld wordt gebruikt om vroeger ingevulde waarden te bewaren tussen roundtrips (zie ook hoofdstuk 22).

## Hoe werkt dit webformulier?

Wanneer een webformulier ingeladen wordt, zijn er een aantal events die opgeroepen worden in een bepaalde volgorde. Er zijn ook events die gebeuren bij bepaalde acties van de gebruiker. Bij een gewone ASP- of HTML-pagina wordt de pagina verwerkt op een lineaire manier, van boven naar beneden. Bij webformulieren is dat helemaal anders.
Tabel: Volgorde van events in een webformulier
Als je de ASPX-pagina of de code verandert, en de pagina wordt daarna weer opgevraagd dan wordt de dynamisch aangemaakte DLL die overeenstemt met de pagina opnieuw aangemaakt. Deze DLL wordt telkens na aanmaak op de schijf bewaard (meestal in de folder c:\Windows\Microsoft.NET\Framework\vx.x.xxxx\Temporary ASP.NET files).
Opmerkingen
* Indien je alleen HTML-server-controls gebruikt in je formulier, dan mag je een action-attribuut toevoegen, om naar een nieuwe pagina te gaan als de gebruiker het formulier indient.
* In dit geval hoeft het formulier soms ook niet het "runat=server" attribuut te hebben.
* In het andere geval (als er dus ook web-controls zijn) zal de server geen rekening houden met het action-attribuut, het posten gebeurt altijd naar het webformulier zelf. Het "runat=server" attribuut is hier altijd vereist voor het formulier. Om de gebruiker door te sturen naar een andere pagina gebruik je dan de Response.Redirect of Server.Transfer-methode (zie verder).
* In een formulier kan je de standaard focus instellen op een bepaalde control, dit is de control die initieel de toetsenbordinvoer krijgt van de gebruiker. Stel hiervoor de property DefaultFocus in van het formulier zelf (alleen ASP.NET 2.0)
* Op een panel of formulier kan je ook de property DefaultButton instellen.

## Round trip en postback

Een interactieve sessie met een gebruiker bestaat meestal uit de volgende stappen:
* De gebruiker vraagt een webformulier op bij de server.
* De webserver stuurt het formulier op.
* De gebruiker geeft data in en dient het formulier in bij de server.
* De server verwerkt het formulier, en stuurt het resultaat op naar de gebruiker.
In deze stappen wordt stap 3 de postback genoemd, terwijl stap 3 en 4 samen een round trip genoemd worden. Een round trip houdt dus een volledige reis over het netwerk naar de webserver en terug met het antwoord.
Om het onderscheid te kunnen maken tussen de eerste aanvraag en de postback aanvraag, kan de server gebruik maken van de IsPostBack eigenschap van het Page object. Deze eigenschap is alleen True bij postback. Bij de eerste aanvraag van een pagina is deze eigenschap False.
Je kan dit gebruiken als je bepaalde operaties alleen de eerste keer wil laten uitvoeren.

## Oefeningen

* Maak een pagina met 3 multiple-choice vragen. Na het invullen bereken je de score.
* Maak het formulier uit de vorige oefening in het dubbel: éénmaal met HTML-controls en éénmaal met web-controls. Vergelijk.
* Maak een pagina waar je 3 artikelen kan bestellen (met elk een invoervak voor de hoeveelheid). Bereken het totaalbedrag op dezelfde pagina (na het drukken op een knop).
* Je verkoopt pizza's, die je aan huis bestelt. Maak een toepassing bestaande uit 4 pagina's:
** De gebruiker vult het aantal in voor pizza's. Geef keuze tussen 3 soorten.
** De gebruiker vult het aantal in voor drank. Geef keuze tussen 3 soorten drank.
** De gebruiker geeft zijn naam en adres in.
** Het resultaat toont een samenvatting van de bestelling en de totaalprijs.
* Maak een pagina met een formulier om een adres in te vullen. Maak twee externe stylesheet met styles voor deze pagina (bijvoorbeeld "pastel" en "roodwit"). Zorg ervoor dat alle controls gebruik maken van de stylesheet. Maak een keuzeknop waar je de stijl van de ganse pagina in één keer kan omschakelen. Tip: maak van de <link>-tag een HTML-control.